Cara Buat Menu Dropdown Mirip Template Fastest Magz

Cara Buat Menu Dropdown Mirip Template Fastest Magz

Menu Dropdown ala Fastest Magz - Menu dropdown merupakan elemen penting bagi sebuah blog. Kebanyakan para Blogger memasang menu dropdown dengan tujuan untuk memudahkan pengunjung untuk menjelajahi isi blog. Pada postingan ini Saya akan berbagi Cara Pasang Menu Dropdown ala Template Fastest Magz. Oke langsung aja pada topik utamanya berikut cara memasang menu dropdown mirip template Fastest Magz.

1. Masuk pada akun Blogger Anda. Kemudian pilih menu Template > Edit HTML.
2. Setelah itu cari kode ]]></b:skin> (Klik CTRL+F untuk mempermudah pencarian).
3. Kemudian Copy kode dibawah ini dan Paste-kan tepat diatas kode tadi.
   
   /* Menu Dropdown by Media Refrensi*/ #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: Ubah lebar menu dropdown sesuai lebar template Anda. Untuk mengubah cari kode width:990px;position:relative dan ganti 990px sesuai lebar template Anda.
4. Selanjutnya Copy kode dibawah ini dan Paste-kan diatas kode </head>
   
   <!-- navigation start --> <nav> <ul id='navigation'> <li class='current'> <a class='home' href='/'>Home</a> </li> <li> <a href='http://media-refrensi.blogspot.com/p/sitemap.html'>Sitemap</a> </li> <li> <a href='#'>Tips</a> <div class='sub-nav-wrapper'> <ul class='sub-nav'> <li><a href='http://media-refrensi.blogspot.com/search/label/Blogging'>Blogging</a></li> <li><a href='http://media-refrensi.blogspot.com/search/label/Internet'>Internet</a></li> </ul> </div> </li> <li> <a href='http://media-refrensi.blogspot.com/search/label/Bisnis%20Online'>Bisnis Online</a> </li> <li> <a href='http://media-refrensi.blogspot.com/search/label/Android'>Android</a> </li> <li> <a href='#'>Idhostinger</a> </li> <li> <a href='http://fastestmagz.blogspot.com/p/testing-statis-page.html'>Statis</a> </li> <li> <a href='http://new-moviesant.blogspot.com'>Moviesant</a> </li> <li class='search'> <form action='/search' id='search' method='get'> <input name='q' placeholder='Search...' size='40' type='text'/><input id='search-button' type='submit' value=''/></form> </li> </ul> </nav> </b:if> <!-- navigation end -->
5. Dan yang terakhir simpan template Anda dan lihat Hasilnya.

Silahkan ganti menu dan url menu sesuai keinginan Anda. Mudah-mudahan artikel Cara Buat Menu Dropdown Mirip Template Fastest Magz bermanfaat bagi Anda. Jika Anda masih bingung atau mengalami kesulitan saat pengeditan HTML silahkan tanyakan dengan cara meninggalkan komentar pada kolom komentar yang telah disediakan. Terima Kasih.

Share this post