Cara Membuat Menu Dropdown Di Bog

Pada kali ini saya akan membahas tentang Cara Membuat Menu Dropdown Di Blog.

Cara Membuat Menu Bar Dropdown CSS Pada Blog :

1. Buka Blogger Home kalian.
2. Kemudian pilih Template » Edit HTML.
3. Lalu Cari Kode <b:skin><![CDATA[/*
4. Kemudian Copy Kode dibawah ini dan Paste di BAWAH 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. Kemudian Copy Kode HTML dibawah Kode <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 href='#'>Disclaimer</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://vipergoy.blogspot.com/'>ViperGoy Blog</a></li> </ul> </nav>

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

6. Kemudian Save / Simpan.


source : http://vipergoy.blogspot.com/2013/12/cara-membuat-menu-dropdown-di-blog.html