Cara Membuat Menu Bar Blog Dropdown

Hallo gw abis belajar gemana cara buat Menu Bar di Blog gw belajar dari Anak Gila Onlien, gak sulit kok cukup mudah asal teliti aja kalian pasti bisa. Sebelumnya nama gw SODIKIN anak Teknik Informatika, gw contohin menu bar yang gw buat di blog gw contohnya ceperti ini :

Coba tiga tabel aja dulu nanti sisanya loe tambahin sendiri-sendiri pasti yang belajar Pemrograman Web dan Pemrograman Internet pasti bisa lah.  Langsung aja ya langkah-langkahnya :

• Login pada blogger.
• masuk ke halaman Template.
• Edit Template HTML lalu download template lengkap.
• Klik centang pada Expand Template Widget.

Edit HTML 

Pilih Lanjutkan

Jangan Lupa Klik centang pada Expand Template Widget.

• Cari kode ]]></b:skin> (gunakan ctrl+f).
• Pasang kode di bawah ini tepat di atas kode ]]></b:skin>

#menubar{
border-bottom:4px solid #ff0000;

widht: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

}

• Selanjutnya cari kode <div id="content-wrapper">
• Pasang kode di bawah ini tepat di Aatas kode <div id="content-wrapper">

<div id='menubar'>

<ul>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='https://plus.google.com/108843950370140494085/'>About Me</a></li>

<li><a href='#'>Contact Me</a>

<ul>

<li><a href='https://plus.google.com/108843950370140494085/'>Google +</a></li>

<li><a href='https://www.facebook.com/sodikin.saputra'>Facebook</a></li>

<li><a href='http://twitter.com/SodikinBUL/'>Twitter</a></li>

<li><a href='http://www.yahoo.com/'>Yahoo!</a></li>

</ul></li>

</ul>

</div>

• Simpan Template dan lihat hasilnya

NB ; Selamat Mencoba