Membuat Menu Drop Down Di Blogspot
Banyak cara bagaimana membuat blog terlihat cantik dan salah satu caranya untuk membuat blog terlihat lebih menarik adalah dengan mendesai menu secara dinamis menggunakan menu drop down.
Untuk blog saya yang ini tidak didesain mengunakan menu dropdown namun jika teman-teman ingin mempelajari lebih jelas bisa lihat tutorial youtube yang sudah saya buat dengan judul Cara Membuat Menu Drop Down di BlogSpot. Untuk memperoleh tutorial menarik lainya jangan lupa SUBSCRIBE video youtube saya ya.
Menu drop down sendiri adalah menu yang menampilkan sederetan link yang dinamis kearah bawah adapun cara membuat menu drop down pada blogspot adalah dengan mengikuti langkah dibawah.
1. Masuk ke blogspot anda
2. Klik menu tata letak
3. Klik tambah gadget
Kemudian copy html di bawah
<div id='mbtnavbar'>
<ul id='mbtnav'>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>About</a>
</li>
<li>
<a href='#'>Contact</a>
</li>
<li>
<a href='#'>Sitemap</a>
<ul>
<li><a href='#'>Sub Page #1</a></li>
<li><a href='#'>Sub Page #2</a></li>
<li><a href='#'>Sub Page #3</a></li>
</ul>
</li>
</ul>
</div>
4 Save
5. Untuk Tanda # di ganti dengan link alamat artikel anda
6. Untuk menambah menu horizontal anda dapat mengcopy kode yang berada di dalam <li> </li>
contoh:
<li>
<a href='#'>Nama Menu</a>
</li>
7. Untuk menambah menu vertikal copy kode dibawah
contoh
<li>
<a href='#'>Sitemap</a>
<ul>
<li><a href='#'>Sub Page #1</a></li>
<li><a href='#'>Sub Page #2</a></li>
<li><a href='#'>Sub Page #3</a></li>
</ul>
</li>
8. kemudian masuk ke menu template > edit HTML
9. Cari kode ']]></b:skin>' dan masukan kode dibawah tepat diatas kode ']]></b:skin>'
#mbtnavbar {
background: #060505;
width: 960px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#mbtnav {
margin: 0;
padding: 0;
}
#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#mbtnav li a:hover, #mbtnav li a:active {
background: #BF0100;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#mbtnav li {
float: left;
padding: 0;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbtnav li ul a {
width: 140px;
}
#mbtnav li ul ul {
margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #BF0100;
width: 120px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#mbtnav li li a:hover, #mbtnavli li a:active {
background: #060505;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
selamat pagi, mas mau tanya knp ketika saya nambah menu tab koq munculnya dibawah bukan disamping?
ReplyDeleteThanks bro..
ReplyDeleteSaya langsung praktekin bisaaaaaaaaa.... uhuuuy
mas kq ga da sub menunya
ReplyDeletetakdir
DeleteTerima kasih ilmunya mas & share trus ya ilmunya. Biar tambah pahala
ReplyDeletekalau cara merubah warna nya bagaimana ya? klo kursor pake milih kan warnanya merah, biar ganti biru gimana mas?
ReplyDeletepake color a goblok
Deletesantai mas
Deleteinilah yang saya cari cari untuk membuat menu drodown, thanks tutorialnya gan :D
ReplyDeleteuntuk menambah menu horizontal dan vertikalnya di copy di menu HTML dimananya ya mas?
ReplyDeleteselamat malam, itu coddingan menu drop down berfungsi untuk yang sudah upgrade domain apa bisa dilakukan di domain gratisan (masih bawaan blogger
ReplyDelete)
Mas ini gimana caranya buat sidebar kok bertumpuk sama menu ya
ReplyDeleteSupaya tidak beerumpuk gimana?
ReplyDeleteThanks infonya, ijin praktek nanti di blog ane ndiri www.gratiskabeh.com biar keren hehe.
ReplyDeleteThanks infonya pak:)
ReplyDeletesetelah sekian banyak obrak-abrik tutorial orang akhirnya nemu yang mudah dan langsung bisa diaplikasikan.
saya izin pakai tutorialnya untuk blog saya ya. terima kasih
menu utamanya emang keluar tapi kok sub menu 1,2,3nya ga keluar? kenapa ya? ini buat tugas kuliah saya pak , tolong di balas pak karena saya belum ngerti terimakasih. check https://realmuham.blogspot.co.id/
ReplyDeletecara memperbesar font nya gmna mas?
ReplyDeleteohh iyaa , mksh mas tutorial nya :-)
ReplyDeletetutorialnya lengkap dan mudah dimengerti seperti pemula kyak saya, thanks ya dah berbagi ilmunya.
ReplyDeletematur suwun boss, dah share ilmunya. tambah manfaat tambah pahala.
ReplyDeleteAss. Wr Wb masbudicahyono saya sudah membuat menu dropdown sesuai panduan tapi hasilnya gak vertikal tapi kesamping seperti ini
ReplyDeletehttps://drive.google.com/file/d/1-wfL2v2YRAmZnp1Dhv3LLXeHp2embbj2/view?usp=sharing
dimana salahnya tolong dong ya
thanks from www.bangluq.com
ReplyDeletesipp
ReplyDeleteNice Info gan, thankyou
ReplyDeleteterima kasih sudah berbagi ilmunya, semoga pahala.
ReplyDeleteTutorial Joss :-)
ReplyDeleteThank's
Terimakasih, tp saya ada kendala untuk tampilan seluler menunya tidak keluar?
ReplyDeleteharus di kilk dulu mas baru keluar sub menunya
Delete:)
ReplyDeleteterima kasih mas, sangat bermanfaat
ReplyDeletetutorial nya sangat membantu, mampir juga dong sob ke www.20score.com
ReplyDeleteMas saya cari kode ']]>'di kode html nya kok gk ada ya mas
ReplyDeleteMohon bantuannya mas
ini sangat membantu terimakasih pak
ReplyDeleteSangat membantu
ReplyDeleteIzin Copas mas. Alhamdulillah berhasil. terima kasih banyak.
ReplyDeleteTrims sharingnya, mau coba bikin menu dropdown di blog Isiwebku
ReplyDeleteKok iklan Ind**t muncul terus ya nutupin blog.?, Apa brower saya yg ngaco.
Makasih infonya...... Semoga membantu.
ReplyDeletemas mau tanya setelah diubah kok versi mobil menu dropdown nya tidak kelihatan ya mohon dijawsab
ReplyDelete