Selamat .... sobat Grind.. hehe.. selamat apa coba? ya bisa selamat pagi, siang, sore, malam. hehe.. Sekarang waktu apa ya? . haha gag nyambung ea,...
Template default bawaan blogger biasanya minim sekali dengan widget-widget termasuk menu navigasi. Terkecuali jika kita mendownload sendiri template dari blog lain. Menu navigasi penting artinya untuk meningkatkan kunjungan ke blog kita, walaupun masih ada cara lain seperti menambahkan label, recent posts, related posts ataupun popular posts di blog kita. Menu navigasi biasanya terdiri dua macam; vertikal dan horisontal. Menu navigasi Vertikal atau menu navigasi lurus ke atas biasanya diletakkan di sidebar, sedangkan menu navigasi horisontal kita letakkan di atas judul posting atau di bawah header/judul blog.
Menu drop down dapat kita pasang di atas maupun di bawah nama blog, dengan memasang menu semacam ini tampilan blog kita semakin tampak bagus dan pastinya akan mempermudah pengunjung untuk mencari apa yang dibutuhkan dari blog kita.
Sebelumnya backup template milik sobat duyu ea... . .
1. Login ke blogger (yang diperbarui bahasa Indonesia)
2. Masuk ke template - edit html - centang pada expand template widget
3. Cari kode ini ]]></b:skin> (gunakan ctrl+F untuk search biar cepat hehe :D) lalu tepat diatasnya letakkan kode Dibawah ini
#NavbarMenu {background: #555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80OFP21A2oPmFEOQTY0rMYOO6pfZ948d3NTk5Jnaha9B5OjSclOexflTCPt16oqXcg5pa9VnKe3zJSyz0rkwZ8PqFUusKikG2FM06HRvmlpCkEnxbtepFd1qmP-WlonPvZj-QFQ3Tri4/s400/navbar11.png);width: 960px;height: 35px;font-size: 12px;font-family: arial, Verdana;color: #FFF;font-weight: bold;margin: 0;padding: 0;}#NavbarMenuleft {width: 710px;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 {color: #FFF;display: block;font-size: 14px;font-weight:bold;font-family: sans-serif, Verdana;font-weight: bold;text-transform: none;margin: 0;padding: 9px 15px 8px;}#nav li a:hover, #nav li a:active {background: #555;color: #FFF;margin: 0;padding: 9px 15px 8px;text-decoration: none;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}#nav li li a, #nav li li a:link, #nav li li a:visited {background: #555;width: 200px;color: #FFF;font-size: 14px;font-family: "ms sans serif", Verdana;font-weight: normal;text-transform: none;float: none;margin: 0;padding: 7px 10px;border-bottom: 1px dotted #7F7F7F;border-left: 1px solid #7F7F7F;border-right: 1px solid #7F7F7F;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}#nav li li a:hover, #nav li li a:active {background: #777;color: #FFF;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;}
4. Selanjutnya cari kode ini <div id='header-wrapper'> lalu tepat dibawahnya pastekan kode Dibawah ini
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='http//kaliwirogrind.blogspot.com'>Home</a></li>
<li><a href='http//kaliwirogrind.blogspot.com'>profil</a></li>
<li><a href='http//kaliwirogrind.blogspot.com'>Blogging</a></li>
<li><a href='http//kaliwirogrind.blogspot.com'>Menu turun »</a>
<ul>
<li><a href='http//kaliwirogrind.blogspot.com'>Menu turun 1</a></li>
<li><a href='http//kaliwirogrind.blogspot.com'>Menu turun 2</a></li>
<li><a href='http//kaliwirogrind.blogspot.com'>Menu turun 3</a></li>
<li><a href='http//kaliwirogrind.blogspot.com'>Menu turun 4</a></li>
<li><a href='http//kaliwirogrind.blogspot.com'>Menu turun 5</a></li>
</ul></li>
<li><a href='http//kaliwirogrind.blogspot.com'>Contact us</a></li>
</ul>
</div>
</div>
Untuk link warna merah rubahlah dengan link anda, untuk warna Biru rubahlah untuk nama menu yang anda inginkan.
5. Sebelum Simpan. Sebaiknya sobat klik Pratinjau dulu, setelah sobat mantab dengan hasilnya baru sobat Simpan,....
Oke,... Dengan begitu Selesai Sudah Tahap-tahapnya,...
dan selamat mencoba.... semoga berhasillll,.....
Sala\m/ Sukses !!!!!!!!!!
