إنضم لنا

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

Seorang Penulis Asal Tegal jawa tengah 


PENTING !!!
Untuk pertanyaan di luar topik silahkan Gunakan Komentar Facebook atau Google+ sengaja Kami sediakan Untuk komentar random Dan untuk pertanyaan seputar article gunakan komentar disqus Terimakasih...

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments:

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Detail