Thursday 7 July 2011

Membuat Tab Menu Navigator Horizontal

Tutorial ini ane buat soalnya ada yang nanya ama ane gimana cara membuat Tab Menu Horizontal. Contohnya kayak dibawah ini :



Nah, bagi kamu yang tertarik untuk membuat Tab Menu Horizontal..,,caranya cukup mudah..

Langkah I

1. Masuk ke Dasbor 
2. Masuk ke Layout atau Tata Letak
3. Cari kode berikut ]]></b:skin> gunakan Ctrl+F untuk memudahkan dalam pencarian
4. Setelah kode tersebut (persisi dibawah) masukan script berikut :

.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}
5. Klik simpan Template.

Langkah II

1. Masuk ke Dasbor
2. Klik Tab Layout/Tata Letak
3. Klik Tab Elemen Laman
4. Klik Tambah Gadget yang berada diposisi atas header..,,kalau pada tahap ini template belum disetting untuk bisa menambah Gadget...,,silahkan klikdisini
5. Klik menu HTML/Java Script
6. Pastekan script berikut kedalam 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="http://blog-permak.blogspot.com/">Home</a>

<a href="http://blog-permak.blogspot.com/p/about-me.html="_blank">About Me</a>

<a href="http://blog-permak.blogspot.com/p/contact.html/" target="_blank">Contact</a>

</li>
</div>
</div>

7. Untuk script yang berwarna biru di atas menandakan warna latarnya, silahkan ganti dengan warna pilihan anda agar sesuai dengan warna site anda. Untuk mendapatkan variasi kode warna, silahkan terlebih dahulu surfing di sini Colors Code
8. Silahkan ganti script URL yang berwarna Kuningdengan URL milik anda
9. Silahkan ganti script yang berwarna coklat dengan kata pilihan anda

kalau ingin menambahkan jumlah tab masukan script dengan dasar <a href="URL ANDA">PILIHAN KATA ANDA</a>
10. Klik Simpan
11. Selesai


untuk contoh dari hasil Tab Menu Navigator Horizontal diatas silahkan cek disini  

0 comments:

Post a Comment

Silahkan Komentarnya Gan ^_^
Jangan SPAM Ya