Selamat datang kembali kawan blogger, banyak sekali yang mencari cara untuk memasang drop down menu di blog mereka, entah untuk keindahan atau apa, yang jelas setelah saya jalan kesana kesini banyak blogger yang mengatakan bahwa drop down menu juga memengaruhi seo blog kita, tapi untuk kebenarannya saya kurang paham, yang saya yakinkan kalau drop down menu digunakan untuk memudahkan pengunjung mengakses artikel kita, itu pasti.
Setelah sebelumnya saya memosting tentang cara memasang iklan disamping kanan judul blog, kali ini saya akan memosting tentang cara membuat dropdown menu sederhana.
Langsung saja ini dia tutorial cara memasang drop down menu di blog kita :
1. Buka blog anda di blogger.com
2. Pada drop down menu anda pilih Template
3. Kemudian buka Edit HTML
4. Gunakan tombol kombinasi Ctrl+F untuk mencari kode ]]></b:skin>
5. Copy kode dibawah ini dan letakkan tepat di atas kode ]]></b:skin>
#Menu {
background: #073763;
width: 940px;
height: 30px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #9fc5e8;
font-weight: bold;
margin-bottom: 10px;
padding: 2px;
}
#BoxMenu {
width: 930px;
float: left;
margin: 0;
padding: 0;
}
#punch {
margin: 0;
padding: 0;
}
#punch ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#punch li {
list-style: none;
margin: 0;
padding: 0;
}
#punch li a, #punch li a:link, #punch li a:visited {
color: #9fc5e8;
display: block;
font-size: 12px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: sentences case;
margin: 0;
padding: 8px 15px 8px;
}
#punch li a:hover, #punch li a:active {
background: #073763;
color: #ffffff;
margin: 0;
padding: 8px 15px 8px;
text-decoration: none;
}
#punch li li a, #punch li li a:link, #punch li li a:visited {
background: #3d85c6;
width: 150px;
color: #ffffff;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: sentences case;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#punch li li a:hover, #punch li li a:active {
background: #073763;
color: #9fc5e8;
padding: 7px 10px;
}
#punch li {
float: left;
padding: 0;
}
#punch li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#punch li ul a {
width: 140px;
}
#punch li ul ul {
margin: -32px 0 0 171px;
}
#punch li:hover ul ul, #punch li:hover ul ul ul, #punch li.sfhover ul ul, #punch li.sfhover ul ul ul {
left: -999em;
}
#punch li:hover ul, #punch li li:hover ul, #punch li li li:hover ul, #punch li.sfhover ul, #punch li li.sfhover ul, #punch li li li.sfhover ul {
left: auto;
}
#punch li:hover, #punch li.sfhover {
position: static;
6. Kemudian simpan setelan template anda
7. Back to blogger
8. Masuk ke menu Tata Letak
9. Add Gadget pilih HTML/Javascript
10. Copy kode dibawah ini, dan paste di Gadget yang akan anda buat
<div id="Menu">
<div id="BoxMenu">
<ul id="punch">
<li><a href="http://URL tujuan.com">Nama Menu 1</a></li>
<li>
<a href="http://URL tujuan.com">Nama Menu 2</a>
<ul><a href="http://URL tujuan.com">Nama Sub Menu 1</a></ul>
<ul><a href="http://URL tujuan.com">Nama Sub Menu 2</a></ul>
<ul><a href="http://URL tujuan.com">Nama Sub Menu 3</a></ul>
</li>
<li><a href="http://URL tujuan.com">Nama Menu 3</a></li>
<li><a href="http://URL tujuan.com">Nama Menu 4</a></li>
<li><a href="http://URL tujuan.com">Nama Menu 5</a></li>
</ul>
</div>
</div>
KETERANGAN :
a. URL tujuan, anda dapat mengisinya kemana link akan di alihkan, misal untuk about saya tuliskan http://kiosederhana.blogspot.com/p/about,
b. Untuk nama menu adalah nama yang akan muncul di halaman, sedangkan nama sub menu adalah nama yang akan muncul ketika kita arahkan pointer ke menu.
11. Maka lihat apa yang terjadi di blog anda
Selamat membaca artikel sederhana ini, terimakasih atas kunjunganya, semoga dapat bermanfaat bagi semua.
url yg diisikan pada sub menu apa?
ReplyDeleteDi isi link laman yg mau di pasang mas.
DeleteTerima kasih atas infonya, ya Gan...
ReplyDelete