TAB MENU NAVIGATOR HORISONTAL

Bila kita blogwalking ke beberapa site, pasti akan melihat beberapa dari site tersebut memiliki tab menu navigator horizontal pada headernya. Bila blog kita belum memiliki element diatas header, silahkan lihat cara MEMBUAT ELEMENT DI ATAS HEADER.
Tab menu tersebut tentunya sangat bermanfaat sekali, karena kita bisa menyimpan URL penting di sana, dan/atau para pengunjung bisa langsung masuk ke halaman tersebut hanya dengan satu kali klik saja.

Berikut ini adalah langkah - langkah cara membuat tab menu horizontal.

Langkah I :

• Login ke Blogger lalu Masuk ke Dasbor
• Pilih menu Rancangan
• Klik Tab Edit HTML lalu centang expand
• Silahkan cari di dalam template kode : ]]></b:skin>
• Sebelum kode tersebut pastekan script di bawah ini

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

6. Klik Simpan Template

Langkah II :

• Masuk ke Dasbor
• Klik Tab Tata Letak
• Klik Tab Element Halaman
• Klik Tambah Gadget yang berada di posisi header ( atas )
• Klik pilihan menu HTML/JavaScript
• Pastekan script berikut ini ke dalam kolom konten tersebut

<div style="overflow:no; width:100%px; height:100%px; padding:0px; border:0px solid <span style="color: red;">#FFFFFF</span>; background:<span style="color: red;">#FFFFFF</span>;"></div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><div class="menuhorisontal"></div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><li></div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><a href="<span style="color: blue;">your link here</span>"><span style="color: orange;">your menu here</span></a></div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><a href="<span style="color: blue;">your link here</span>" target="_blank"><span style="color: orange;">your menu here</span></a></div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><a href="<span style="color: blue;">your link here</span>" target="_blank"><span style="color: orange;">your menu here</span></a></div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><a href="<span style="color: blue;">your link here</span>" target="_blank"><span style="color: orange;">your menu here</span></a></div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><a href="<span style="color: blue;">your link here</span>" target="_blank"><span style="color: orange;">your menu here</span></a></div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><a href="<span style="color: blue;">your link here</span>" target="_blank"><span style="color: orange;">your menu here</span></a></div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><a href="<span style="color: blue;">your link here</span>" target="_blank"><span style="color: orange;">your menu here</span></a></div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><br /> </div><div style="color: cyan;"></li></div><div style="color: cyan;"><br /> </div><div style="color: cyan;"></div></div><div style="color: cyan;"><br /> </div><div style="color: cyan;"></div></div><div style="color: cyan;"><br /> </div></div>

• Script berwarna merah di atas adalah kode-kode warna, ganti dengan warna yang sesuai dengan blog kita. Untuk mengetahui kode-kode warna silahkan "klik disini"
• Silahkan ganti script URL yang berwarna biru dengan URL/link.
• Silahkan ganti script yang berwarna orange dengan Menu.
• Klik Simpan
• Selesai

Catatan :

Untuk jumlah menu sesuaikan dengan kebutuhan kita, kita bisa menambah atau menguranginya dengan mengikuti struktur kode HTML tersebut diatas.

Posted in: tutorial blogger