Menu Dropdown Keren Mirip Template Fast Magazine + Search

Membuat Menu Dropdown Keren Mirip Template Fast Magazine, Meskipun udah Banyak Yang share menu Dropdown Keren yang lainnya Tapi ane tetep share aja deh Nih Menu Dropdown Mirip Template Yang Mantep Yang Udah Terkenal Se Antero Blogger :D

Menu Dropdown Keren Ini Mirip Banget Sama Menu navigasi Template Fast Magazine Mas Sugeng. .
Penampakannya Seperti Dibawah Ini :

Jika Anda Tertarik Langsung Ke Step Nya Aja..

1.Masuk Ke Akun Blogger Sobat.> Pilih Menu Template Dan Edit HTML

2.Cari Kode ]]></b:skin> Dan Copast Code Berikut. Simpat Tepat Di Atas Kode ]]></b:skin>

/* Menu Navigasi Ridwan Hex Blog*/ #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;}

Lihat Kode Paling Atas Dibawah  /*  Menu Navigasi Ridwan Hex Blog  */
Ada Code #navigation { height:38px;width:990px; Ganti  Kode Berwarna Merah Sesuai Lebar Template Sobat, Bila Terlalu Panjang Tinggal Ganti Saja 990 Menjadi Berapalah Lebih Kecil

3.Jika Pada Template Anda Sudah Ada Menu Navigasi Nya Anda Tinggal Ganti Saja Code 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

• Copy kode di bawah ini dan letakkan tepat di atas kode <header> atau di bawah kode</header>

<nav><ul id='navigation'><li class='current'><a class='home' href='/' title='Home'>Home</a></li><li><a href='#' title='Menu 1'>Menu 1</a><div class='sub-nav-wrapper'><ul class='sub-nav'><li><a href='#' title='Sub Menu 1'>Sub Menu 1</a></li><li><a href='#' title='Sub Menu 2'>Sub Menu 2</a></li><li><a href='#' title='Sub Menu 3'>Sub Menu 3</a></li></ul></div></li><li><a href='#' title='Menu 2'>Menu 2</a></li><li><a href='#' title='Menu 3'>Menu 3</a></li><li> <a href='#' title='Menu 4'>Menu 4</a><div class='sub-nav-wrapper'><ul class='sub-nav'><li><a href='#' title='Sub Menu 1'>Sub Menu 1</a></li><li><a href='#' title='Sub Menu 2'>Sub Menu 2</a></li><li><a href='#' title='Sub Menu 3'>Sub Menu 3</a></li><li><a href='#' title='Sub Menu 4'>Sub Menu 4</a></li></ul></div></li><li><a href='/Error404' title='Error'>Error</a></li><li class='search'><form action='/search' id='search' method='get'><input name='q' placeholder='Cari Apa Gan...' size='45' type='text'/><input id='search-button' type='submit' value=''/></form></li></ul></nav>

4.Ganti # , Menu , Dan Sub Menu .Sesuai Keinginan Anda.

5.Simpan Template Sobat...

Bila Masih Belum Mengerti Tinggalkan Komentar Dibawah.

Sekian Arikel Saya Tentang Menu Dropdown Keren Mirip Template Fast Magazine + Search mirip Mas-Sugeng.Semoga Bermanfaat ..