selain untuk mempercantik blog,menu navigasi juga berfungsi untuk memudahkan pengunjung menelusuri blog kita..dalam artikel ini saya akan membahas tentang cara mudah membuat menu navigasi,langsung aja kita menuju ke TKP.
BACA JUGA: CARA MEMBUAT TEKS BERJALAN
silahkan anda login dahulu ke blogger pergi ke
1.dashbor,lalu pilih
2.tata letak/rancangan,lalu klik
3.edit html,jangan lupa beri tanda "centhang" pada kotak kecil bertuliskan expand template widget,
4.copy pastekan kode dibawah ini sebelum kode ]]>< /b:skin>
silahkan anda klik tombol "F3" pada kebord, untuk mempermudah pencarian.berikut ini kodenya:
#NavbarMenu { background: #000; width:
400px; height: 10px; font-size: 11px; font-
family: Trebuchet MS, Tahoma, Verdana;
color: #fff; margin: 0px; padding: 0px; }
#NavbarMenuleft { width: 400px; float: left;
margin: 0; padding: 0; } #nav { margin: 0;
padding: 0; } #nav ul { float: left; list-style:
none; margin: 0; padding: 0; } #nav li { list-
style: none; margin: 0; padding: 0; } #nav li a,
#nav li a:link, #nav li a:visited { background:
#222222; height: 15px; color: #fff; display:
block; font-size: 11px; font-family: trebuchet
ms, ; text-transform: none; text-decoration:
none; margin: 0; padding-top:6px; padding-
bottom:5px; padding-left:13px; padding-
right:13px; border-right: 1px solid #000; }
#nav li a:hover, #nav li a:active {background:
#222222; color: #ffffff; margin: 0; padding-
top:6px; padding-bottom:5px; padding-
left:13px; padding-right:13px; text-decoration:
none; } #nav li li a, #nav li li a:link, #nav li li
a:visited { background: #ffffff; width: 150px;
color: #222222; font-size: 11px; font-family:
trebuchet ms,; font-weight: normal; text-
transform: none; float: none; margin: 0;
padding: 7px 10px; border: 1px solid #000; }
#nav li li a:hover, #nav li li a:active
{ background: #222222; color: #ffffff; padding:
7px 10px; } #nav li { float: left; padding: 0; }
#nav li ul { z-index: 9999; position: absolute;
left: -999em; height: auto; width: 170px;
margin: 0; padding: 0; } #nav li ul a { width:
140px; } #nav li ul ul { margin: -32px 0 0
171px; } #nav li:hover ul ul, #nav li:hover ul ul
ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul
ul { left: -999em; } #nav li:hover ul, #nav li
li:hover ul, #nav li li li:hover ul, #nav
li.sfhover ul, #nav li li.sfhover ul, #nav li li
li.sfhover ul { left: auto; } #nav li:hover, #nav
li.sfhover { position: static; }lalu kliksimpan template
silahkan anda balik lg ke menu dashboard klik rancangan/tata letak dan klik tambah gadget terus pilih edit html/java script lalu copy paste kode dibawah ini
< div class='menuhorisontal'>
< ul id='nav'>
< li>< a href='http://ibnuchusain.blogspot.com'>home< /a> < /li>
masukkan link anda disini
masukkan link anda disini
masukkan link anda disini
masukkan link anda disini
< /li>< /ul>
< /div>
lalu klik save/simpan
BACA JUGA : CARA BIKIN KOLOM BANNER
ket: < a href="http://ibnuchusain.blogspot.com">home< /a> adalah contoh link,silahkan ganti dgn URL/link anda.
selamat mencoba n semoga bermanfaat :)
