Cara Membuat Menu Bar Dropdown

WN Update. | Cara Membuat Menu Bar Dropdown + Search Engine

Oke, kali ini WN Update akan coba kasih tutorial tentang Cara Membuat Menu Bar Dropdown + Search Engine di blogger. Menu Bar sangatlah penting bagi sebuah blog, karena akan mempermudah pengunjung mencari sesuatu yang mereka cari sesuai dengan kategori.Selain itu, pastinya pembuatan menu bar juga akan  menambah SEO blog kita. Oke, tak usah berlama2, inilah tutorial Cara Membuat Menu Bar Dropdown + Search Engine.             

1.Masuk ke blogger.com lalu login menggunakan akun google sobat
2. Masuk pada halaman Template
3. Klik Edit HTML kemudian Lanjutkan
4. Pertama , cari kode ]]></b:skin> (gunakan ctrl+f untuk memudahkan pencarian)
5. Jika sudah ketemu, pasang kode di bawah ini di atas kode ]]></b:skin>

#menubar{ width:920px; height:38px; background:#de360f; border-radius:2px; float:center; margin:0px auto; } #menubar-left{ float:left; width:720px; padding:0 0 2px 2px; } #menubar-right{ float:right; width:170px; padding-top:8px; padding-right:18px } #menubar ul{ float:left; margin:0; padding:0; } #menubar li{ float:left; list-style:none; margin:0; padding:0; } #menubar li a, #menubar li a:link{ float:left; padding:12px 10px; color:#fff; position:relative; font-weight:bold !important; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:12px; } #menubar li a:hover, #menubar li a:active, #menubar .current_page_item a { text-decoration:none; background:#F0512D; } #menubar li li a, #menubar li li a:link, #menubar li li a:visited{ font-size: 12px; background: #de360f; color: #fff; text-decoration:none; width: 150px; padding: 0px 10px; line-height:35px; } #menubar li li a:hover, #menubar li li a:active { background: #F0512D; } #menubar li ul{ z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin-top:37px; border:1px solid #de360f; border-radius:0px 0px 8px 8px; } #menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{ left:auto } #menubar li:hover, #menubar li.sfhover{ position:static } #search{ border:1px solid #F0512D; height:20px; width:180px; background:#f6f4f4; } #search input{ color:#777; border:none; } #s-m{ font-size:11px; width:180px; padding-left:4px; padding-top:5px; margin:0; } #search-t #search{ background-color:#FFFFFF; border:1px solid #F0512D; border-radius:4px 4px 4px 4px; -moz-border-radius:4px 4px 4px 4px; -khtml-border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px; } #search-t #s-m{ width:155px; padding-top:3px; }

6.Masuk ke tata letak -> tambahkan gadget ( saran: diatas posting blog) - > HTML / Java Script

7.  Lalu pasang kode di bawah ini, di atas "Posting Blog" pada tata letak

<div id='menubar'> <div id='menubar-left'> <ul> <li><a expr:href='data:blog.homepageUrl'>Home</a></li> <li><a href='http://wn-update.blogspot.com/'>Edit me 1</a></li> <li><a href='http://wn-update.blogspot.com/'>Edit me 2</a></li> <li><a href='http://wn-update.blogspot.com/'>Edit me 3</a> <ul> <li><a href='http://wn-update.blogspot.com/'>Sub menu 1</a></li> <li><a href='http://wn-update.blogspot.com/'>Sub menu 2</a></li> </ul> </li> <li><a href='http://wn-update.blogspot.com/'>Edit me 4</a></li> <li><a href='http://wn-update.blogspot.com/'>Edit me 5</a></li> </ul> </div> <div id='menubar-right'> <div id='search-t'> <div id='search'> <form action='/search' method='search' target='_blank'> <input class='keyword' id='s-m' name='q' onblur='if (this.value == "") {this.value = "Cari artikel disini..";}' onfocus='if (this.value == "Cari artikel disini..") {this.value = ""}' type='text' value='Cari artikel disini..'/> <input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8cu9sZadqbrlftDR6j7zNMphuL2tDSpmw_pZLRNc4KLAAmaX27dWSFmPIYCh5IvHhhwgTzf-uPhtUwXGa4381ZX8DgTGpxX9CqIlyTpTxF_vD5jRw35rrlszePeppsCJtiyxkwk1ZvDk/s200/search-c.png' style='border: 0pt none ;vertical-align: top; padding-top:4px; padding-right:3px;' type='image'/> </form> </div> </div> </div> </div>

8. Simpan Template dan lihat hasilnya 
Keterangan: 
- Ganti tulisan yang berwarna Merah dengan url link menubar yang diinginkan, misal: link postingan, link   kategori, link halaman statis atau lainnya
-Ganti tulisan berwarna Biru (Edit me / Submenu) dengan tulisan judul menubar tersebut, seperti: About, Contact, Guest book atau lainnya
-Untuk mengubah panjang menubar bisa sobat ganti tulisan 920px menjadi sesuai dengan keinginan sobat
-Untuk mengganti warna menubar, coba cari kode background:#de360f; . Ganti kode yang berwarna orange dengan kode warna yang diinginkan.
-Nah, jika sobat ingin menambah item menubar (list), sobat hanya tinggal Copykode yang bergaris bawah, dan Paste di bawah kode yang bergaris bawah tersebut.

Semoga informasi ini bermanfaat, dan jangan lupa kasih +1 dan like fanspage fb WN Update.
Baca Juga : Cara Membuat Artikel Terkait

Written by: Wahyudi Nugroho

WN UPDATE, Updated at: 05:43

Tweet

Ayo Share di :

Facebook Google+ Twitter Digg

Ditulis Oleh : Unknown | WN Update

Terima Kasih Sudah Membaca Artikel Cara Membuat Menu Bar Dropdown. Jangan lupa klik +1 dan like artikel ini, dan Sobat juga diperbolehkan mengcopy-paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://wn-update.blogspot.com/2013/05/cara-membuat-menu-bar-dropdown.html" target="_blank">Cara Membuat Menu Bar Dropdown</a>

Pasang Widget Ini