Cara Membuat Tab Menu 3 Kolom Simple

Also Read Other Articles

Tab menu merupakan elemen penting dalam blog karena berguna untuk meringkas 3 elamen menjadi satu tempat, contoh Misalkan Arsip Blog, Entri Populer, Recent Comment atau bisa diganti dengan yang lain...

Caranya cukup mudah yaitu hanya dengan menambahkan widget saja...

1. Klik rancangan

2. Add Gadget HTML javascript

3. Masukkan kode dibawah ini ke dalamnya...

 <style type="text/css">

div.TabView div.Tabs a

{

float: left;

display: block;

width: 80px;

height: 14px;

text-align: center;

margin: 2px 0px 0px 2px;

background-color: #0dc3ff;

padding-top: 1px;

border:3px inset #D43D1A;padding:5px;text-align:center;-moz-border-radius-topleft:0px;-moz-border-radius-topright:10px;-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:0px;

font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */

font-weight: 600;

}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active

{

background-color: none;

}

div.TabView div.Pages

{

clear: both;

border: 2px solid #FAEBD7;

overflow: hidden;

background-color: none;

}

div.TabView div.Pages div.Page

{

height: 100%;

padding: 5px;

overflow: hidden;

}

div.TabView div.Pages div.Page div.Pad

{

padding: 3px 5px;

}

</style>

<form action="tabview.html" method="get">

</form>

</code><div class="TabView" id="TabView">

<code>

</code><br />

<div class="Tabs" style="width: 385px;">

<code><a href="http://www.blogger.com/blogger.g?blogID=ID BLOG SOBAT"><span style="color: antiquewhite;"><blink>Arsip Blog<blink></blink></blink></span></a>

<a href="http://www.blogger.com/blogger.g?blogID=ID BLOG SOBAT"><span style="color: antiquewhite;">Popular Post</span></a>

<a href="http://www.blogger.com/blogger.g?blogID=ID BLOG SOBAT"><span style="color: antiquewhite;"><blink>Recent Comment<blink></blink></blink></span></a>

</code></div>

<code>

</code><br />

<div class="Pages" style="height: 300px; width: 295px;">

<code>

</code><br />

<div class="Page">

<code>

</code><br />

<div class="Pad">

<code>

<span style="color: cyan;">MASUKKAN KODE ARSIP BLOG SOBAT DI SINI</span>

</code><br />

<div class="Page">

<code>

</code><br />

<div class="Pad">

<code>

<span style="color: cyan;">MASUKKAN KODE POPULAR POST SOBAT DISINI</span>NI

</code><br />

<div class="Page">

<div class="Pad">

<code><span style="color: cyan;">MASUKKAN KODE RECENT COMMENT SOBAT DISINI

</span>

<script src="http://projectloss.googlecode.com/files/tab_view.js">

</script>

<script type="text/javascript">

tabview_initialize('TabView');

</script> 

Recent Comment Sobat, ( Bisa diganti dengan kode sobat yang lain)

6. Klik Simpan, Lihat hasilnya

Selamat Mencoba dan Salam Sukses !!!

4. Ganti kode yang saya beri warna biru dengan ID BLOG SOBAT 5. Ganti Tulisan yang saya beri warna merah dengan kode, Arsip Blog, Popular Post.