Cara Membuat Navigasi Menu Responsive (Mobile Friendly) di blog blogspot. Menu ramah mobile akan disukasi Algoritma Google Mobilegeddon dan user. Demo menu responsive ini bisa dilihat di blog ini. Kode-kodenya juga diambil dari template blog ini.
Tahapan Membuat Navigasi Menu Responsive
Berikut ini cara membuatnya:
1. Template > Edit HTML
2. Copas kode berikut ini di atas kode ]]</b:skin>
/*-----Responsive Down Menu ----*/
body {
margin: 0px;
}
#menu{background: #484848;color: #F2F2F2;height: 35px;border-bottom: 2px solid #DDD;}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:40px;width:1024px}
#menu li{float:left;display:inline;position:relative;font:bold 1em Arial;text-shadow: 1px 2px 4px #838383;}
#menu a{display: block;line-height: 35px;padding: 0 14px;text-decoration: none;color: #FFF;}
#menu li a:hover{color: #E4E4E4;-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;background: #5FC6EB;}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus{height: auto;overflow: hidden;width: 170px;background: #50B7DC;position: absolute;z-index: 99;display: none;}
#menu ul.menus li{display: block;width: 100%;font:normal 1em Arial;text-transform: none;text-shadow: none;border-bottom: 1px dotted #31AFDB;}
#menu ul.menus a{color: #FFF;line-height: 35px;}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{background: #5FC6EB;color: #FFF;-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;}
@media screen and (max-width: 800px){
#menu{position:relative}
#menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menu ul.menus{width:100%;position:static;padding-left:20px}
#menu li{display:block;float:none;width:auto; font:normal 1em Arial;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}
}
3. Copas kode berikut ini di bawah <body> atau di bawah <div id='header'>
<nav id='menu'>
<input type='checkbox'/>
<label>≡<span>Navigasi Menu</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>Kategori 1</a></li>
<li><a href='#'>Kategori 2</a></li>
<li><a href='#'>Kategori 3</a></li>
<li><a href='#'>Kategori 4</a></li>
<li><a href='#'>Drop Down Menu <font size='1'>▼</font></a>
<ul class='menus'>
<li><a href='#'>Drop 1</a></li>
<li><a href='#'>Drop 2</a></li>
<li><a href='#'>Drop 3</a></li>
</ul>
</li>
<li><a href='http://contohblognih.blogspot.com' target='_blank'>Links</a></li>
</ul>
</nav>
4. Save KPK!!!
Mestinya Navigasi Menu Responsive alias Mobile Friendly sudah muncul di blog Anda. Demikian Cara Membuat Navigasi Menu Ramah Mobile untuk Blogspot.*
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon