MEMBUAT MENU DAN SUB MENU NAVIGASI HORISONTAL PADA BLOG

Sebelum membuat menu navigasi, sebaiknya kita terlebih dahulu membuat link yang akan mengarahkan menu-menu kita. Untuk blogger kita gunakan alamat posting sebagai link kita (kecuali kita ingin mebuat link ke situs tertentu dari menu). Demikian juga halnya dengan Sub Menu yang akan kita buat, persiapkan dulu link-linknya.
Sebagai contoh kita akan membuat menu denga skema sebagai berikut :

• TUTORIAL
- Tutorial Blogspot
- Tutorial Dreamweaver
- Tutorial Wordpress
- Tutorial PHP/HTML

• BISNIS ONLINE
- Adsense
- Reseller
- Pay To Clic
- Pay To Review

• LINKKU
- Blog Tutorial
- Iklan Gratis
- Solusi Finansial
- CPNS

Skema diatas yang dimaksud sebagai menu adalah : TUTORIAL, BISNIS ONLINE dan LINKKU, sedangkan Sub Menu adalah kategori yang berada di bawah menu seperti : Tutorial Blogspot, Adsense, Iklan Gratis dsb.

Pertama kali yang perlu kita persiapkan adalah membuat link terhadap menu dan sub menu tersebut, disini karena setiap menu telah memiliki sub menu, maka link dari menu bisa ditiadakan. Dalam pembuatan link dengan skema diatas terdapat dua bentuk link, yaitu link menggunakan fasilitas posting di blog dan link terhadap blog/situs/web lain.

Untuk membuat link menu dengan blog/web/situs lain (seperti pada menu LINKKU), kita hanya membutuhkan alamat (URL) blog/web/situs yang akan kita linkkan. Misalnya :

URL Sub Menu Automotif : http://mantpi-electronic.blogspot.com

URL Sub Menu Iklan HP : http://mantpi-hp.blogspot.com

URL Sub Menu steak : http://mantpi-steaks.blogspot.com

Sedangkan untuk membuat link yang mengarah pada blog kita sendiri misalnya blognya http://blogku.com, maka buat postingan dengan judul adsense yang akan memberikan alamat URL : http://blogku.com/2009/03/adsense.html. Keteranga http://blogku.com meupakan nama domain blog kita, 2009, adalah tahun posting, 03 merupakan bulan pada saat kita melakukan postingan sedangkan adsense.html, merupakan judul postingan (bernama adsense) kita.

Dengan begitu setiap sub menu dibuatkan alamat URL yang sesuai dengan alamat positngan yang akan kita sediakan.

Langkah Kedua adalah login terlebih dahulu pada ID blogger anda, pilih TATALETAK, lalu klik EDIT HTML. Jangan lupa centang Expand Template Widget, lalu letakkan kode CSS berikut tepat diatas kode ]]>< / script>

ul#main-nav {font-family:helvetica,arial,sans-serif;margin:0;padding:0;float:left;width:100%;font-size:0.9em;}

ul#main-nav li {margin:0;padding:0;list-style:none;float:left;margin:0 0.3em 0 0;width:9em;}

ul#main-nav li a {text-decoration:none;display:block;padding:0.3em 0.5em;border:1px solid silver;color:#003;background:#fff;}

ul#main-nav li a:hover, ul#main-nav li a:focus {border:1px solid gray;color:#000;background:#efefef;}

ul#main-nav li ul {padding:0;display:none;}

ul#main-nav li:hover ul {display:block;}

ul#main-nav li ul li {float:none;}

ul#main-nav li ul li a {font-size:0.9em;}

Langkah Ketiga

Setelah anda melakukan login dib logger dengan ID anda, pilih TATA LETAK selanjutnya klik ELEMEN HALAMAN, tambahkan Gadget JAVASCRIPT/HTML lalu copy paste kode HTML berikut ini.

<br /><ul id="main-nav"><br /> <li><a href="http://abdulkamil.com" title="Berbagai Tutorial Blog dan Website">TUTORIAL</a><br /> <ul><br /> <li><a href="http://pdpmjember.com/2009/03/tutorialblogspot.html" title="Tutorial Blogspot">BLOGSPOT</a></li><br /><li><a href="http://pdpmjember.com/2009/03/tutorialdreamweaver.html" title="Tutorial Dreamweaver">DREAMWEAVER</a></li><br /> <li><a href="http://pdpmjember.com/2009/03/tutorialwordpress.html" title="Tutorial Wordpress">WORDPRESS</a></li><br /> <li><a href="http://abdulkamil.com " title="Kumpulan artikel bisnis online">BISNIS ONLINE</a><br /> <ul><br /> <li><a href="http://pdpmjember.com/2009/03/adsense.html" title="Tutorial Adsense">ADSENSE</a></li><br /><li><a href="http://pdpmjember.com/2009/03/ptc.html" title="Tutorial Pay to clic">PAY TO CLIC</a></li><br /> <li><a href="http://pdpmjember.com/2009/03/ptp.html" title="Tutorial Pay To Perview">PAY TO PERVIEW</a></li><br /><li><a href="http://abdulkamil.com " title="Berbagai Tutorial Blog dan Website">LINKKU</a><br /> <ul><br /> <li><a href="http://abdulkamil.com " title="Tutorial Blogspot">BLOG TUTORIAL</a></li><br /><li><a href="http://uanghibah.com " title="Disini solusi masalah financial anda">SOLUSI FINANSIAL</a></li><br /> <li><a href="http://newiklangratis.blogspot.com" title="Pasang Iklan sesukanya Gr@TiS">IKLAN Gr@TiS</a></li><br /><li><a href="http://suksescpns.net" title="Kumpulan Soal-soal CPNS">CPNS</a></li><br /></ul><br />