Membuat Menu Navigasi Horizontal Drop Down di Blog

Membuat Menu Navigasi Horizontal Drop Down di Blog
Assalamualaikum sobat semuanya .....

Pada kesempatan yang berbahagia ini saya akan share tentang Cara Membuat Menu Navigasi Horizontal Drop Down di Blog, mungkin dari sebagian sobat udah ada yang mengetahui cara Membuat Menu Navigasi Horizontal Drop Down di Blog, dan ada juga yang udah menerapkannya di blog,, Menu Navigasi Drop Down memang menjadi andalan para bloger untuk mempersingkat dan memperjelas, daftar postingnya.. dari sekian banyak style Menu navigasi drop down, disini saya akan coba menerangkan menu navigasi dropdown yang simple aja... Simple Drop Down

Kalo sobat tertarik ,, Ikuti langkah-langkahnya ::

1. Login ke Blog sobat

2. Pilih Template - Edit HTML - klik ''expand template widget'' di bagian atas

3. Cari code ]]></b:skin> . Untuk mempercepat, gunakan pencarian dengan klik CTRL+F, maka akan muncul di bgian bawah sidebar

4. Copy Code berikut ::

#NavbarMenu{background:#000000; width:1100px; height:32px; color:#5A6C8C; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; border-bottom:1px solid #666;}
#NavbarMenuleft{width:700px; float:left; margin:0; padding:0;}
#search{width:240px; font-size:11px; float:right; 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; text-shadow:1px 1px 1px #000;}
#nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;}
#nav li a:hover, #nav li a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px; text-decoration:none;}
#nav li li a, #nav li li a:link, #nav li li a:visited{background:#000000; width:150px; color:#e5e3e3; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #151f23; border-left:px solid #151f23; border-right:2px solid #151f23; font:normal 14px Georgia, Times New Roman;}
#nav li li a:hover, #nav li li a:active{background:#4a4d4c; color:#fff; padding:3px 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:-24px 0 0 170px;}
#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;}
#searchbox{padding:0; margin:0;}
#search input{background:#fff; color:#000; float:left ;margin:5px 0 0 10px; width:168px; padding:3px 7px; border:1px solid #cdcdcd; font:normal 11px arial, verdana, Times New Roman;}
#search .btn{background:#333; color:#fff; font-size:11px; margin:5px 0 0 3px; padding:2px; width:30px; cursor:pointer; border-left:1px solid #666; border-top:1px solid #666; border-right:2px solid #111; border-bottom:2px solid #111;}
#top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;}
#top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;}
#top a:hover{color:#cc0000; text-decoration: underline;}
#top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;}
.topleft {width: 304px; float: left; margin: 0; padding:0;}
.topleft img a, .topleft img {border:1px solid #ccc; margin: 0; padding: 1px;}
.topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;}

5. Paste code tadi tepat di atas ]]></b:skin> . SIMPAN pengaturan !
6. Sekarang sobat masuk ke ''Tata Letak - Pilih Tambah Gadget (pilih tambah gadget yang dibawah heading atau judul blog sobat).
7. Pilih tambah HTML/Java Script.

8. Copy dan Paste Code berikut ::

<li><a href='http://remajasampit.blogspot.com/2012/01/daftar-sinopsis-novel.html'>SINOPSIS NOVEL</a>

<li><a href='#'>BAHASA</a>

<ul>

<li><a href='http://remajasampit.blogspot.com/2012/01/membaca-fkip-pbsi-smester-1.html'>MEMBACA</a></li>

<li><a href='http://remajasampit.blogspot.com/2012/01/menyimak-fkip-pbsi-smester1.html'>MENYIMAK</a></li>

<li><a href='http://remajasampit.blogspot.com/2012/02/daftar-isi-bahasa-bantu.html'>BHS BANTU</a></li>

</ul></li>

<li><a href='http://remajasampit.blogspot.com/2012/01/hrefhttpremajasampit.html'>SASTRA</a>

<ul>

<li><a href='http://remajasampit.blogspot.com/2012/01/teori-sastra-1.html'>TEORI SASTRA</a></li>

<li><a href='http://remajasampit.blogspot.com/2012/01/hrefhttpremajasampit.html'>DRAMA & PUISI</a></li>

</ul></li>

<li><a href='#'>ISLAM</a>

<ul>

<li><a href='http://remajasampit.blogspot.com/2012/02/daftar-gratis-ebook-islami.html'>EBOOK ISLAM</a>

<li><a href='http://remajasampit.blogspot.com/2012/01/mukaddimah-ceramah-beserta-artinya.html'>CERAMAH</a>

<li><a href='http://remajasampit.blogspot.com/2012/02/daftar-mp3-islami.html'>MP3 ISLAMI</a></li>

</li></li></ul></li>

<li><a href='#'>DOWNLOAD</a>

<ul>

<li><a href='http://remajasampit.blogspot.com/2012/03/daftar-download-brush-photoshop.html'>BRUSH PHOTOSHOP</a>

<li><a href='http://remajasampit.blogspot.com/2012/01/daftar-gratis-software.html'>SOFTWARE</a></li>

<li><a href='http://remajasampit.blogspot.com/2012/01/judul-game-type-assasins-creed.html'>TRAINER GAME</a></li>

</li></li></li></ul></li>

<ul>

<li><a href='http://remajasampit.blogspot.com/2012/01/daftar-semual-hal-yang-aneh-dan-unik.html'>SEMUA ANEH</a>

<li><a href=''>KUMPULAN CERITA</a>

</li></li></ul></li>

<li><a href='#'>KOTA SAMPIT</a>

<ul>

<li><a href='http://remajasampit.blogspot.com/2012/01/mengenal-sampit.html'>TENTANG SAMPIT</a>

<li><a href='http://remajasampit.blogspot.com/2012/01/galeri-kota-sampit.html'>GALERI SAMPIT</a>

<li><a href='http://remajasampit.blogspot.com/2012/03/galeri-foto-kota-sampit.html'>GALERI FOTO</a>

</li></li></li></ul></li>

<li><a href='http://remajasampit.blogspot.com/2012/01/daftar-tutorial-blog.html'>TUTORIAL BLOG</a></li>

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

9. Simpan Widget baru sobat ,,, CATATAN :: URL link di ganti dengan URL yang sobat inginkan .. dan nama Menu sobat ganti dengan nama yang sobat inginkan. OK sob.. selesai deh ..
Membuat Menu Navigasi Horizontal Drop Down di Blog

''SETIAP TEMPLATE BLOG MUNGKIN BERBEDA-BEDA DAN DAPAT MENGAKIBATKAN TAMPILAN MENU NAVIGASI DROP DOWN SEPERTI DI ATAS TIDAK SESUAI DENGAN GAMBAR DI ATAS''Membuat Menu Navigasi Horizontal Drop Down di Blog

3 Responses to "Membuat Menu Navigasi Horizontal Drop Down di Blog"

shore hardnessMarch 21, 2012 at 8:04 PM
mantap gan caranya sangat membantu sekali
UnknownAugust 26, 2012 at 9:33 PM
izin nyoba gan
inverter mitsubishiMarch 20, 2013 at 8:14 PM
makasi ya sob, nyoba dulu

Note: Only a member of this blog may post a comment.