Tutorial blog - Membuat Menu Bar Dropdown pada Blog

Kali ini ayas akan menjelaskan tentang cara membuat menu bar dropdown dengan efek css pada blog sobat-sobat semua. tanpa basa basi lagi kita lanjut aja yok, cekidot!!!


cara membuat menu bar dropdown dengan css

1. buka blogger "Home" kalian
2. masuk ke menu "Template" Lalu pilih "Edit HTML"
3. tekan "ctrl+f" lalu ketikkan "skin"
3. tekan "enter" sampai ketemu kode <b:skin><![CDATA[/
4. Paste kode css dibawah ini dibawah kode <b:skin><![CDATA[/ 

#menu{background:#444;border:1px solid #222;color:#fff;height:42px;font-family:'Oswald', Arial, sans-serif;width:970px;margin:0 auto;} #menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none} #menu ul{height:42px;width:980px} #menu li{float:left;display:inline;position:relative;font:bold 14px Arial;text-transform:uppercase;font-weight:normal} #menu a{display:block;line-height:42px;padding:0 14px;text-decoration:none;color:#fff;font-family:'Oswald', Arial, sans-serif;text-shadow: 0 -1px 0 #222;} #menu li a{border-right:1px solid #222;} #menu li a:hover {color:#fff;background-color:#222;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;transition: all 0.3s ease-in;} #menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer} #menu label{font-size:20px;display:none;width:35px;height:20px;line-height:20px;text-align:center;color:#fff} #menu label span{font:normal 14px Oswald;position:absolute;left:35px;} #menu ul.menus{height:auto;overflow:hidden;width:180px;background:#444;border-top:1px solid #222;border-left:1px solid #000;border-bottom:1px solid #000;position:absolute;z-index:99;display:none;left:-1px;} #menu ul.menus li{display:block;width:100%;font-size:13px;text-transform:none;text-shadow:none} #menu ul.menus a{color:#fff;text-transform:uppercase} #menu li:hover ul.menus{display:block} #menu a.dropdown{padding:0 27px 0 14px} #menu a.dropdown::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#f0f0f0 transparent transparent transparent;position:absolute;top:16px;right:9px} #menu ul.menus a:hover{background:#222;color:#fff}

5. cari kode <div id='header-wrapper'> dengan fungsi "CTRL+F" lalu search "div id"
6. paste kode dibawah ini dibawah  <div id='header-wrapper'>

<nav id='menu'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Sitemap</a></li>
<li><a class='dropdown'>Contact</a>
<ul class='menus'>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Pinterest</a></li>
</ul>
</li>
<li><a href='http://Bonexberdasi.blogspot.com/'>Bonekberdasi Blog</a></li>
</ul>
</nav>

NB:
Untuk Membuat Menu Baru :
<li><a href='URL-HALAMAN'>TEXT</a></li>

Untuk Membuat Menu Dropdown :
<ul class='menus'>
<li><a href='URL-HALAMAN'>TEXT</a></li>
<li><a href='URL-HALAMAN'>TEXT</a></li>
</ul>
</li>

7. Kemudian klik "Save / Simpan".

Semoga bermanfaat yaaa :)