Cara Membuat Menu Dropdown Responsive Di Blogger
Cara Membuat Menu Dropdown Keren di Blog - Pada malam saya sharee lagi menu yang paling keren Dropdown Keren di Blog ,dengan bebrapah psotinagn yang saya buat sama Cara Membuat Menu Dropdown Keren di Blog , tapi dengan kode Css Html ini saya baru saja bikin di bootraap jadi menu ini sudah Soe jadi kamu jangan kawatir pasti suka ,kran menu ini hampir mirip yang saya gunakan pada blog ini tunggu apa lagi sekrang kita langsung saja pakai dan terapkan blog kalian.
Demkianlah pada postingan Cara Membuat Menu Dropdown Keren di Blog jika kamu suka kamu bisa like dan shree pada teman-teman blogger ,jika kamu masih bingung cara menerapkan nya kamu bisa comen saja di bawah kran menu ini baru saya buat, mungkin cukup sampai di sini saja pada psotinagn Cara Membuat Menu Dropdown Keren di Blog postingan ini bisa bermanpaat bagi anda wasalam.
DEMO
Tidak usah ragu lagi kita langsung saja kita mulay tutorialnya di bawah ini.
Langkah Pertama
1. Login Blogger
2. Kamu pilih menu Template>>Edit Html>>CTRL+F
3 Kemudian kamu cari kode ]]></b:skin> jika sudah ketemu copy kode di bawah ini di atas kode ]]></b:skin> ini .
/* Navigation4. Kemudian kamu cari lagi kode yang bernama </header> jika sudah ketemu kamu ambil kode di bawah kemudian kamu terapkan di atas atau di bawah kode </header> tersebut.
----------------------------------------------- */
#nav{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoMTZwPauVBReVeCyxKq0B2mYFYD1YONzcvCW15aq0YqHUDsGjoOyFv_jdTJpkge3GbaEUrXCVCm5bIsd8DORZb0dC029SpYHNznxwGWGwht3r5stKmbMP0lg_WcP1R-pkLL7S_-rqjIk/s1600/main-menu-bg.png);background-repeat:repeat-x;height:57px;border-bottom:5px solid #09970F;padding-left:10px}
#nav ul{height:52px;margin:0;padding:0}
#nav li{position:relative;display:inline-block;float:left;border:1px solid #222;border-width:0 0 0 1px;height:47px;margin-top:5px}
#nav li a{display:block;line-height:45px;height:45px;text-decoration:none;color:#D5D5D5;padding:0 15px;text-shadow:0 1px 1px black;border-left:1px solid #383838}
#nav li:last-child a{border-right:0 none}
#nav li a:hover{color:#fff}
#nav ul.submenu li{float:none;width:100%;margin:0;border-bottom:1px solid #222;border-top:1px solid #383838;border-left:0 none;height:30px}
#nav ul.submenu{display:none;padding:0;position:absolute;top:42px;width:180px;z-index:99;float:left;background:#2D2D2D!important;-webkit-box-shadow:0 3px 4px 1px rgba(0,0,0,0.2);box-shadow:0 3px 4px 1px rgba(0,0,0,0.2);-webkit-border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:3px;-moz-border-bottom-right-radius:3px;-moz-border-bottom-left-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;height:auto}
#nav ul.submenu.hidden{display:block;-khtml-opacity:0;-moz-opacity:0;opacity:0;visibility:hidden;-webkit-transition:all 0.5s ease 0s;-o-transition:all 0.5s ease 0s;transition:all 0.5s ease 0s;-moz-transition:all 0.5s ease 0s}
#nav li:hover ul.submenu.hidden{-khtml-opacity:1;-moz-opacity:1;opacity:1;visibility:visible}
#nav ul.submenu li:first-child{border-top:0 none}
#nav ul.submenu a{height:30px;line-height:1em;padding:7px 10px}
#nav ul.submenu a:hover{padding-left:15px}
#nav li.mhome{border:0;margin-top:0;height:52px}
#nav li.mhome a{height:52px;border-left:0 none;text-indent:-9999px;width:55px;background-color:#09970F;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRN4t-cCNlmRXV5RpgkSKRmk1LD8AcNHxTkFuZj3TrM3n3iF_Jip30o4qvH87pjJqinK_NEQWNngGIb6dvzb4Ys72OeX-ob7O94scQOlcmy2YKPUzlElwLEB6kZ-9rpOfMhz7Vs3pGJqA/s1600/home+(1).png');background-repeat:no-repeat;background-position:50% 9px}
#menuatas{color:#474747;background:#F1F1F1;padding:3px 0;border-bottom:1px solid #CCC}
#menuatas a:hover{text-decoration:none}
#ktuskrg{display:inline-block;height:18px;float:left;line-height:18px;padding:0 10px;border-right:1px solid #ACACAC}
#navtop{display:inline-block;margin-left:5px}
#navtop ul,#navtop li{padding:0;margin:0;list-style:none}
#navtop li{float:left;height:18px;position:relative}
#navtop li a{height:18px;padding:0 10px;line-height:18px;display:block}
#navtop li.dgnsubtop{padding-right:10px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiYwf-q5g38Ajp2fES3V2uh-Lxh73jhX1s93vhbdQb7GbVW6sfD8eM2Zu5Dyc4ZqUvUa7IXrd-cVh-9OhTKE9YG_D345Djhp6uOqPowuKPZGD6tM1QgxY0QnkBMWg9AmCTP8s7VKKGSLI/s7/downarrow-dark.png);background-repeat:no-repeat;background-position:90% 50%}
#navtop ul.sub-menu-top{display:none;position:absolute;width:140px;background:#F1F1F1;top:23px;-webkit-box-shadow:0 3px 4px 1px rgba(0,0,0,0.2);-moz-box-shadow:0 3px 4px 1px rgba(0,0,0,0.2);box-shadow:0 3px 4px 1px rgba(0,0,0,0.2);z-index:2}
<nav id="nav">5. Berikutnya Coba Save dan buka New Tab baru maka menu yang kamu pasang akan tanpil pada blog anda,hanya itu saja yang saya bisa sampaikan ke pada kalin semoga menu yang saya kasih ke pada anda semoga blog anda akan menjadi lebih keren Dan Soe .
<ul id="menuhlng1">
<li class="mhome"><a href="http://tutorialcid.blogspot.co.id/">Home</a></li>
<li><a href="#">Contact US</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">DMCA</a></li>
<li><a href="#">About US</a></li>
<li><a href="#">Game's Requests</a></li>
<li><a href="#">How To Download</a></li>
</ul>
</nav>
Demkianlah pada postingan Cara Membuat Menu Dropdown Keren di Blog jika kamu suka kamu bisa like dan shree pada teman-teman blogger ,jika kamu masih bingung cara menerapkan nya kamu bisa comen saja di bawah kran menu ini baru saya buat, mungkin cukup sampai di sini saja pada psotinagn Cara Membuat Menu Dropdown Keren di Blog postingan ini bisa bermanpaat bagi anda wasalam.