Selasa, 08 Maret 2011

tab menu navigator yang horizontal

Bagaimana yah caranya membuat sebuah tab menu navigator yang horizontal ??? Buat yang bisa pasti jawabannya "MUDAH SAJAH, TINGGAL BLA_BLA_BLA DAN BLA". Heee__

Tapi buat kita yang masih awam banget pasti jawabannya "duuuhh_ gimana ya??? Kunungi Kang Google ahh___". Ckckckcckkkk___ :)

Eitssss___ lupa, sebelumnya lo dah pada tau ga yang gimana si yang dimaksud dengan navigator horizontal tuh??? Jangan_jangan belum tau lagi... (Wew__). Ya suttraaahh, gambar di bawah ini contoh dari meenu horizontal.


Hayoooo___ punya siapa tuh?????

Oke,,, langsung aja ke TKP ah....!! Silahkan lo ikuti langkah-langkah berikut :

Langkah Pertama :

1. Masuk ke Dasbor

2. Klik Tab Tata Letak

3. Klik Tab Edit HTML

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

5. Diatas kode ]]></b:skin> , paste script di bawah ini :

.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 Dasbor

2. Klik Tab Tata Letak

3. Klik Tab Element Halaman

4. Klik Tambah Gadget yang berada di posisi header ( atas )

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:#7CFC00;">
<div class="menuhorisontal">
<li>
<a href="http://usman-86.blogspot.com">HOME</a>
</li>
</div>
</div>
<div style="overflow:no; width:100%px; height:100%px; padding:0px; border:0px solid #FFFFFF; background:#FFFFFF;">
<div class="menuhorisontal">
<li>
<a href="http://irmansyah.blogspot.com/">HOME</a>
</li>
</div>
</div>



7. Sekarang silahkan lo ganti warna_warna diatas dengan warna_warna yang anda suka...

8. Silahkan ganti script URL nya juga.

9. Klik Simpan

10. Selesai ( hasilnya pasti berbeda dengan punya gw,,, cuz gw juga copas kodenya dari orang lain... Ckckcckk___)

0 komentar:

Posting Komentar