RSS

>MEMBUAT MENU &N SUB MENU NAVIGASI HORISONTAL PADA BLOG

26 Feb

>

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 Blog tutorial : http://abdulkamil.com
URL Sub Menu Iklan Gratis : http://newiklangratis.blogspot.com
URL Sub Menu Solusi Finansial : http://uanghibah.com
URL Sub Menu CPNS : http://suksescpns.net
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.
 
Tinggalkan komentar

Ditulis oleh pada 26 Februari 2010 in Uncategorized

 

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

 
%d blogger menyukai ini: