Tutorial Membuat TAB Horizontal Blogspot ( open link )

Biasanya para blogger pemula menginginkan model blognya yang lebih dinamis . fitur ini juga bisa membuat blog kita tidak terlalu penuh dan juga pastinya para pengunjung bisa mencari-cari isi blog kita , oke kita langsung saja menuju caranya ; ^_^

Langkah Pertama :

1. Masuk ke Dasboard.

2. Klik Tab Rancangan.

3. Klik Tab Edit HTML.

4. Silahkan cari di dalam template anda kode ]]></b:skin>

5. Pasang kode CSS di bawah ini sebelum kode  tersebut.

.menuhorisontal{width:100%; overflow:hidden; border-bottom:0px solid #000000;}
.menuhorisontal ul{margin:0; padding:0; padding-left:0px; font:13px Arial; list-style-type:none}
.menuhorisontal li{display:inline; margin:0}
.menuhorisontal li a{float:left; display:block; text-decoration:none; margin-right:2px; padding:2px 2px 2px 2px; color:#000000; background:#CCCCCC;}
.menuhorisontal li a:hover{color:#FFFFFF; background:#2E2EFE}

6. Klik Simpan Template

Langkah Kedua :
1. Masuk ke Dashboard

2. Klik Tab Rancangan

3. Klik Tab Element Halaman

4. Klik Tambah Gadget yang berada di posisi Header

5. Klik pilihan menu HTML/JavaScript

6. Pastekan script berikut ini ke dalam kolom konten tersebut.
  

<div style="overflow:no; width:100%px; height:100%px; padding:0px; border:0px solid #FFFFFF; background:#FFFFFF;">
<div class="menuhorisontal">
<li>
<a href="URL">Nama Tab</a>
<a href="URL">Nama Tab</a>
<a href="URL">Nama Tab</a>
<a href="URL">Nama Tab</a>
</li>
</div>
</div>

7. Klik Simpan

8. Selesai.


Referensi  blackdeviant