Cara Membuat Menu Dropdown di Blog

Artikel hari ini, saya akan membahas tentang pembuatan menu dropdown seo friendly. Untuk mempersingkat waktu pembahasan silahkan kalian perhatikan langkah-langkah dibawah ini :

1. Pilih Template > Edit HTML

2. Kode HTML di pasang di bawah kode <header> :
   

 <div id='topnav-outside'>
<div id='topnav-intside'>
<div class='bofollowbutton-nav'>
<a href='https://www.facebook.com/' target='_blank'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_HDnCRLuBxNmElQREheCforY8DTmxwTLBFOaxCEMI2OCdb4qQFRAsI5S4Jwz7ATsou01mHv_db-zG85M1xjBFn_gmfECJ-S8y6sUnnX__EcEWdoJqXTwctBFONDkbnX1XqCDWQkcxT7nc/s1600/facebook_bo.png'/>
</a>    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp    <a href='https://twitter.com/' target='_blank'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1oX-zRhMBcWDZ22ZX3pUH2y1Iega1Q4GE5YaSzzUt5VCpKrdMxSJJdI_SV0joYYYB4nSAZ4UT7_lkJE1VqP_04kZrSf1W6_AeddG8djOv2LMybiMYCQtB6VjZfUYmwR26M_qoAntrS0MY/s1600/twitter_bo.png'/>
</a>    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp    <a href='https://plus.google.com/' target='_blank'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEili-7oy3WJdDplfCCkT9-spy4E6f-4p_mXYLu0gu66FmMAAMm_lTBfRYE8uJkg8QS-osw7WtR99i0l0AgHPTBuzp17LNwD39DGBZsqzkXVvWSMy28RZIPpZmX3wAUYwT3bIpw0kVaj1WGO/s1600/gplus_bo.png'/>
</a>
</div>
<div id='bonav' role='navigation'>
<a href='#bonav' title='Show navigation'>
&#9776; Show Menu
</a>
<a href='#' title='Hide navigation'>
&#9776; Hide Menu
</a>
<ul>
<li class='home-icon'>
<a href='/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkt_EUo_SvxyOCbWbHu9ZAHX03CnQKMZaLREjKKFwgF8PhB65P7bZM21OtWZsekasOlhSChp7I0h07wpyC17XZkvysFKaAT9W_4lSz8-zorJfUEaWCWoyKqxzGvB_evVNWL70o8CI9Mcru/s1600/blog-ornate-home-icon.png' style='height:20px;width:20px;margin:14px 0 0 0;'/></a>
</li>
<li class='has-child'><a aria-haspopup='true' href='#'>Menu Item 1</a>
<ul>
<li><a href='#'>Sub Menu Item 1</a></li>
<li><a href='#'>Sub Menu Item 1.1</a></li>
</ul>
</li>
<li class='has-child'><a aria-haspopup='true' href='#'>Menu Item 2</a>
<ul>
<li><a href='#'>Sub Menu Item 2</a></li>
<li><a href='#'>Sub Menu Item 2.2</a></li>
<li><a href='#'>Sub Menu Item 2.3</a></li>
</ul>
</li>
<li class='has-child'><a aria-haspopup='true' href='#'>Menu Item 3</a>
<ul>
<li><a href='#'>Sub Menu Item 3</a></li>
</ul>
</li>
<li><a href='#'>Menu Item 4</a></li>
<li><a href='#'>Menu Item 5</a></li>
</ul>
</div>
</div>
</div> 

3. Kode CSS dipasang di atas kode ]]></b:skin> :

 #topnav-outside {background:#fff;width:100%;min-height:30px;margin:0 auto;padding:0;-moz-box-shadow: 0 8px 6px -6px #ccc;-webkit-box-shadow: 0 8px 6px -6px #ccc;box-shadow: 0 8px 6px -6px #ccc;}
#topnav-intside {max-width:1120px;min-height:30px;margin:0 auto;padding:0;}
.bofollowbutton-nav{float:right;margin:0;padding:8px 5px 0 5px;overflow:hidden;clear:both;}
.status-msg-wrap{display:none;}
#bonav li.has-child {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9p5pSFuFHxDUdMcqq-wW5bEdNls_sRhBFswUs4qNHY6ei9iXpyh9b5f0CCWlWfXIdf_4rBbBxiD7c6c6p2L9-1775s1yW-nmKfwe_yjkrLd7cryBkRO5d-XdxI8jgwhxlliVGyZhXwgQ9/s1600/bo_arrow_dropdown.gif);background-repeat: no-repeat;background-position: 95% 50%;}
#bonav{max-width:950px;text-transform:uppercase;}
#bonav > a{display: none;}
#bonav li{list-style-type: none;position: relative;}
#bonav li a{display: block;color: #4285f4;text-decoration:none;}
#bonav li a:active{background-color: #c00 !important;}
#bonav span:after{height: 0;width: 0;border: 0.313em solid transparent;border-bottom: none;border-top-color: #efa585;content: '';display: inline-block;vertical-align: middle;position: relative;right: -0.313em;}
#bonav > ul{background-color: #fff;height: 3.75em;margin:0;padding:0;}
#bonav > ul > li{width: 15%;height: 100%;float: left;}
#bonav > ul > li.home-icon{max-width:120px;}
#bonav > ul > li > a{font-family:'Oswald', sans-serif;height: 100%;text-align: center;font-size: 1.0em;line-height: 3.7em;-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;}
#bonav > ul > li:not( :last-child ) > a{border-right: 1px solid #f4f4f4;}
#bonav > ul > li:hover > a,#bonav > ul:not( :hover ) > li.active > a{color: #333;}
#bonav li ul{background-color: #f9f9f9;position: absolute;display: none;top: 100%;margin:0;padding:0;}
#bonav li:hover ul{display: block;left: 0;right: 0;}
#bonav li:not( :first-child ):hover ul{//left: -1px;}
#bonav li ul a{font-family:'Oswald', sans-serif;font-size: 1.0em;border-top: 1px solid #f4f4f4;padding: 1.0em;-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;}
#bonav li ul li a:hover,#bonav li ul:not( :hover ) li.active a{background-color: #333;}
@media only screen and ( max-width: 60em )
#bonav{font-size: 75%;position: relative;top: auto;left: auto;}
#bonav > a{font-size: 1.25em;text-decoration: none;color: #fff;background: #3d5c99;text-align: center;padding: 15px 0;display: none;text-align:center;overflow:hidden;}
#bonav > a:after{top: 60%;}
#bonav:not( :target ) > a:first-of-type,#bonav:target > a:last-of-type{display: block;}
#bonav > ul{height: auto;display: none;position: absolute;left: 0;right: 0;}
#bonav:target > ul{display: block;}
#bonav > ul > li{width: 100%;float: none;}
#bonav > ul > li > a{height: auto;text-align: left;padding: 0 0.833em;}
#bonav > ul > li:not( :last-child ) > a{border-right: none;border-bottom: 1px solid #f4f4f4;}
#bonav li ul{position: static;padding: 1.25em;padding-top: 0;}
#bonav li ul{background-color: #f8f8f8;}
#bonav > ul{background-color: #f8f8f8;}
#bonav li ul a{border-top: 1px solid #f1f1f1;}
#bonav > ul > li > a{border-top: 1px solid #f1f1f1;}
} 

Sekian terima kasih telah mengunjungi blodroi. Semoga bermanfaat..