Cara Membuat Menu Drop Down di Blogspot

Selamat malam sobat, maaf saya dalam beberapa waktu ini jarang online & ga pernah posting lagi, kali ini saya akan bawa sebuah tutorialyang mungkin kalian butuhkan untuk blog kalian, sobat baikku.

Sekarang saya akan share tutorial Cara Membuat Menu Drop Down di Blogspot, berikut saya langsung kasih tahu caranya.

1. Masuk Blogger dengan akun blog tetangga (kidding)
2. Klik Template, Edit HTML, Lanjutkan
3. Ceklist Kotak di samping tulisan Expand Template Widget,lalu tekan F3
4. Cari kode ]]></b:skin> lalu paste-kan kode berikut di atasnya

#menubar{
border-bottom:4px solid #ff0000;
width:1025px;
height:32px;
background:#000000;
float:center;
margin-bottom:3px;
}
#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:8px 12px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
background: #ff0000;
color: #fff;
text-decoration:none;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #ff0000;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #000000;
color: #ffffff;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##ff0000;
}
#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
}

5. Jika sudah, sekarang cari kode <div id="content-wrapper"> dan paste-kan kode dibawah ini tepat diatasnya

<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'>Contact Me</a>
<ul>
<li><a href='https://www.facebook.com/endaalfaridzhxenophobie'>Facebook</a></li>
<li><a href='http://twitter.com/Enda_Xenophobie'>Twitter</a></li>
<li><a href='http://www.yahoo.com/'>Yahoo!</a></li>
</ul></li>
</ul>
</div>

Note : yang diberi warna merah silahkan diganti dengan link yang sobat inginkan & yang biru adalah nama link nya.

Jika tidak menemukan kode <div id="content-wrapper"> silahkan cari kode showaddelement yang pertama & cari kode style yang ke-2, letakkan script diatas tepat dibawah tulisan style yang ke-2 tadi.

6. Selesai.

Semoga postingan ini bisa membantu mempercantik blog kalian, terima kasih, selamat malam, salam blogger indonesia.

Tweet