cara membuat Menu drop down blogponsel

Assalamualaikun wr wb..


Di kesempatan kali ini saya akan memberikan tutorial yang berbedza karna tutorial ini saya buatuntuk sahabat saya yang ngeblog di blogponsel ...

cara membuat menu dropdown versi blogponsel gimana caranya yuk langsung simak sajah ngga usah lama lama, pertama kalian harus keadaan login terlebih dahulu di blog ponsel kalian lalu kalian masuk ke Dasbor lalu pilih template dan pilih sunting css


Setelah itu kalian copas css yang ada di bawah ini lalu masukan di bagian css paling bawah .biar nanti tidak membentur dengan kode yang lain

body{font-family:"Roboto",sans-serif!important;font-size: 100%;margin:0px;padding:0px;}
/*Navmenu*/
#navcontainer ul {list-style-type:none;margin:0;padding:0;position: fixed;}
#navcontainer li {display:inline-block;float: left;text-transform:uppercase;}
#navcontainer li a {padding:15px 10px;min-width:100px;height: 49px;text-align: center;line-height: 49px;color: #fff;background: #2f3036;text-decoration: none;}
#navcontainer li:hover a {background: #FE9800;}
#navcontainer li:hover ul a {background: #f3f3f3;color: #2f3036;height: 40px;line-height: 40px;}
#navcontainer li:hover ul a:hover {background: #FE9800;color: #fff;}
#navcontainer li ul {display: none;}
#navcontainer li ul li {display: block;float: none;}
#navcontainer li ul li a {width: auto;min-width: 100px;padding: 0 20px;text-align:left;}
#navcontainer ul li a:hover + .hidden, .hidden:hover {display: block;}

.show-menu {text-decoration: none;color: #fff;background: #FE9800;text-align: left;padding: 10px 5px;display: none; }
#navcontainer input[type=checkbox]{display: none;}
#navcontainer input[type=checkbox]:checked ~ #menus {display: block;}
#navcontainer .fa-2 {font-size: 2em;}

#navcontainer .fa-2 {
   margin-right: 0.07142857em;
   margin-left:0.6em;
}
/*end-navmenu*/

/*css-styles-responsive*/
@media screen and (max-width:1180px){
   body,#navcontainer,div.span-14,div.span-24{width:100%!important;min-width:100%!important;}
}
@media screen and (max-width:980px){
    #navcontainer li a {min-width:80px;}
}
@media screen and (max-width:768px){
    #navcontainer ul {position: static;display: none;}
    #navcontainer li {border-bottom: 1px solid #4d4d4d;}
    #navcontainer ul li, #navcontainer li a {width: 100%;}
    #navcontainer li a{display:block;height:auto;line-height:normal;}
    #navcontainer li a {text-align:left;}
    .show-menu {display:block!important;line-height:30px;}
    .show-menu:hover {cursor:pointer;}
    label {margin:0!important;}
}
/*end-responsive*/ 

Setelah itu klik simpan lalu kembali dengan menekan tombol kembali
tahap selanjutnya kalian masuk lagi di sunting template




kalian pilih bagian header biar nanti kalian ga salah memasang soalnya saya pernah sekali salah memasukan code html .akibatnya template error

lalu masukan code html di bawah ini terserah di bagian bawah apa atas yang penting masih di dalam kolom header

<div id="navcontainer">
<label class="show-menu" for="show-menu"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/1200px-Hamburger_icon.svg.png" width="25px" height="1px" alt="nama" /></label>
<input autocomplete="off" id="show-menu" role="button" type="checkbox">
<ul id="menus">
<li><a href="http://xixi.blogponsel.net" title="home">Home</a></li>
<li><a href="http://webcensar.com" title="pemrograman-web">Pemrograman web</a></li>
<li><a href="http://webcensar.com" title="framework">Framework</a></li>
<li><a href="http://webcensar.com" title="teknologi-informasi">Teknologi Informasi</a></li>
<li><a href="http://webcensar.com" title="belajar-seo">Belajar seo</a></li>
<li><a href="http://webcensar.com" title="tips">Tips</a></li>
</ul>
<div style="clear:both;"></div>
</div>

keterangan!!! 

Kalian bisa modifikasi code di atas sesuai kehendak kalian jika kalian tidak bisa copas kode di atas kalian cantumkan komentar di bawah biar nanti saya kirim file via driv DEMO

Jika kalian mau yang tidak ribet cara yang kedua DISINI

Baca juga