PUSTAKA ILMU: Cara Membuat Menu Dropdown Keren + Kotak Pencarian

Menu Dropdown Keren Mirip Template Fast Magazine - Dari dulu saya ingin sekali membuat menu dropdown keren ini dan setelah saya muter-muter di google akhirnya nemu juga hehehehe, dan sekarang saya akan shareCara Membuat Menu Dropdown Keren Mirip Template Fast Magazine ini disini. Langsung aja deh buat anda yang mau membuat menu dropdown mirip template fast magazine ini di blog anda, anda bisa ikuti step by step caranya dibawah.

Cara Membuat Menu Dropdown Keren Mirip Template Fast Magazine:
1. Masuk ke akun Blogger anda
2. Masuk ke Template >> Edit HTML
3. Cari kode ]]></b:skin>
4. Letakkan kode berikut tepat diatas kode ]]></b:skin>

/* Menu Navigasi wahidlovers.blogspot.com*/

#navigation{height:38px;width:990px;position:relative;background-color:#393939;box-shadow:0 2px 6px 0 #ccc;-moz-box-shadow:0 2px 6px 0 #ccc;margin:0 auto 0;padding:0 18px 0 18px;border-bottom:3px solid #426DEC;}#navigation li{position:relative;line-height:38px;float:left;list-style:none;display:inline-block;padding:0 0 0 0;margin:0 0 0 0;}#navigation li a{padding:0 18px;color:#eee;display:block;font-family:'Oswald',Arial,Helvetica,sans-serif;letter-spacing:0.5;font-size:14px;font-weight:500;text-align:left;text-shadow:1px 1px 0 #222;}#navigation li a.home{background-position:16px -54px;width:46px;padding:0 0;background-color:#426DEC;text-indent:-9999px;overflow:hidden;}#navigation li a{border-left:1px solid #222;border-right:1px solid #444;}#navigation li:hover a{background-color:#426DEC;color:#fff;}#navigation li .sub-nav-wrapper{display:block;position:absolute;z-index:30;margin-left:0px;}#navigation li .sub-nav-wrapper .sub-nav{width:150px;margin:4px 0 0 0;padding:0 0 0 0;background:#fff;border-top:1px solid #fff;box-shadow:0 1px 2px rgba(0,0,0,0.35);}#navigation li:hover .sub-nav-wrapper{display:block;}#navigation li .sub-nav-wrapper .sub-nav li{list-style:none;float:none !important;line-height:26px;display:block;margin:0 0 0 0;padding:0;text-align:left;border-bottom:1px solid #d7d7d7;}#navigation li .sub-nav-wrapper .sub-nav li:first-child{}#navigation li .sub-nav-wrapper .sub-nav li:last-child{border:none;}#navigation li .sub-nav-wrapper .sub-nav li a{border:none !important;background:transparent !important;display:block;padding:0 20px;font-size:12px;font-weight:small;color:#4b4b4b !important;text-shadow:none;box-shadow:inset 0 0 2px rgba(255,255,255,1.0);-moz-box-shadow:inset 0 0 2px rgba(255,255,255,1.0);-webkit-box-shadow:inset 0 0 2px rgba(255,255,255,1.0);}#navigation li .sub-nav-wrapper .sub-nav li:hover{background:#eaeaea;border-bottom:1px solid #ccc;}#navigation li .sub-nav-wrapper{pointer-events:none;opacity:0;filter:alpha(opacity=0);top:0;transition:all 0.35s ease-in-out;-moz-transition:all 0.35s ease-in-out;-webkit-transition:all 0.35s ease-in-out;}#navigation li:hover .sub-nav-wrapper{pointer-events:auto;opacity:1;filter:alpha(opacity=100);top:30px;}

#navigation #search{font-family:'Oswald',Arial,Helvetica,sans-serif;float:right;margin:5px 0 5px 10px;}#navigation li.search{float:right;line-height:normal;}#navigation #search input[type="text"]{height:28px;line-height:28px;background-color:#5b5b5b;background-position:188px -245px;border:0 none;font-size:10px;font-weight:515;text-shadow:1px 1px 0 #222;color:#fff;width:57px;padding:0 15px;-webkit-transition:all 0.7s ease 0 s;-moz-transition:all 0.7s ease 0s;-o-transition: all 0.7s ease 0s;transition:all 0.7s ease 0s;box-shadow: inset 2px 2px 0 #4f4f4f;}#navigation #search input#search-button{height:28px;width:30px;background-color:#4b4b4b;background-position:8px -246px;border:none;float:right;cursor:pointer;}#navigation #search input[type="text"]:focus{background-color:#fff;text-shadow:none !important;outline:none;width:155px;color:#555;box-shadow: inset 2px 2px 0 #eee;}#navigation #search input#search-button,.post-info-icon,.home,.back-to-top{background-image:url("http://3.bp.blogspot.com/-60fYApN0j2M/Ub8uXOv4rNI/AAAAAAAACBs/6PDa4uu3cHk/s1600/csg-51bf2d6764c79.png");background-repeat:no-repeat;}

Keterangan: Ganti kode yang berwarna biru dan sesuaikan dengan lebar blog anda.

5. Jika pada template anda sudah ada menu navigasi-nya anda tinggal ganti saja kode menu navigasi anda dengan kode berikut ini, atau cari kode.

<header> : untuk menempatkan menu di atas nama blog
</header> : untuk menempatkan menu di bawah nama blog

Letakkan kode dibawah ini di atas kode <header> atau dibawah kode </header>

<nav>

</li>

<li>

</ul>

</div>

</li>

<li>

</ul>

</div>

</li>

<li><a href='/Error404' title='Error'>Error</a></li>

</li>

</ul>

</nav>

Keterangan: Ganti #, dan Sub Menu sesuai keinginan anda.
Terakhir Simpan Template anda, dan lihat hasilnya.
Semoga bermanfaat.

تب دون

Cara Membuat Menu Dropdown Keren + Kotak Pencarian