Membuat menu di blogspot responsive

. Mungkin pengunjung sedang mencari sebuah posting tentang:
- Membuat menu di blogspot
- Membuat menu responsive di blogspot
- Cara membuat menu di blogspot dengan mudah
- atau yang lainnya
Yang jelas pada posting ini kita akanmembahas tentang cara membuat menu di blogspot, dimana menu tersebut bisa menyesuaikan saat pengunjung membuka blog kita menggunakan hp, tablet, smartphone.

Navigation menu di blogspot saat dibuka dengan hp

Navigation menu di blogspot di buka dengan komputer

Gambar tersebut adalah contoh Navigation menu bar responsive
Untuk cara membuat Membuat menu di blogspot seperti pada gambar diatas, adalah :
- Pastikan telah login ke blogger.com
- Buka Template > Edit html
- Cari

]]></b:skin>

- Tambahkan kode ini diatasnya :

/*Menu Mulai*/
#menu{
color: #fff;background: #999999;height: 30px;
text-transform: uppercase;
font-size: 95%;
}
#menu ul.menus{
background: #999999;
height: auto;
overflow: hidden;
position: absolute;
z-index: 99;
display: none;
}
#menu a{color: #FFF;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNApa5PD-I8UmYlOcAwGsNfqdQI6TU1vFGA0zQa5MCNj2NtGc9L2-wVbtzvWpkvH8EmKNBeyf2Ehhne8a6zIB5V2cIrhencyLvqEPUVKJmC7trf8JAUwTzccaU9LbnvMpFZ36VqvcRjbE/s1600/10.png) no-repeat right;display: block;
line-height: 30px;
padding: 0 10px;
text-decoration: none;}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:30px;}
#menu li{float: left;
display: inline;
position: relative;
font: bold 0.9em Arial;
}
#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: 31px;
line-height: 31px;
text-align: center;}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus li{
display: block;
width: 100%;
font:normal 0.8em Arial;
text-transform: none;
text-shadow: none;
border-bottom: 1px dashed #31AFDB;
}
#menu ul.menus a{
color: #FFF;
line-height: 35px;
}
#menu li a:hover{
background: #808080;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
#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:#999999;position:absolute;top:100%;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 0.8em 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}
}
/*Menu Telas*/

- Lanjutkan dengan mencari kode

<div class='region-inner main-inner'>

- Tambahkan kode berikut diatasnya :

<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>Menu</span></label>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://caraeditblogger.blogspot.co.id/' rel='nofollow' title='ikhsanudin'>Daftar Isi</a></li>
<li><a href='http://caraeditblogger.blogspot.co.id/' rel='nofollow' title='ikhsanudin.com'>Disclaimer</a></li>
<li><a href='http://caraeditblogger.blogspot.co.id/' rel='nofollow' title='ikhsanudin blog'>About</a></li>
<li><a href='http://caraeditblogger.blogspot.co.id/' rel='nofollow' title='Disclaimer cara edit blog'>privacy policy</a></li>
<li><a href='http://caraeditblogger.blogspot.co.id/' rel='nofollow' title='kontak ikhsanudin'>Contact Us</a></li>
</ul>
</nav>

- Simpan template, dan lihat hasilnya
- Semoga berhasil