Cara Membuat dan Memasang Menu Dropdown di Blog Blogger - Hai sobat blog Suka Suka Seo, masih berjumpa lagi dengan saya +sukasuka seo alias Nur Muhammad Wahyudi atau bisa juga dipanggil Yudi. Pengenalan seperti ini sebenarnya sudah pernah saya tulis di halaman about me, hanya saja jarang dibuka sama pengunjung. Sudah dulu basa - basi ini dan akan saya lanjutkan ke topik pembuatan menu dropdownya. Sebenarnya fungsi menu dropdown terhadap blog sangatlah simpel dan sederhana, yaitu memudahkan pengunjung untuk mencari topik yang sesuai keinginannya.
Selain itu, Fungsi dari menu dropdown adalah untuk mengurangi penggunaan banyaknya menu navigasi laman dan label terhadap besar ukuran suatu blog. Untuk itu, saya akan membantu anda sebisa mungkin agar anda dapat mendapatkan yang anda inginkan. Yuk ikuti langkah langkahnya di bawah ini
- 1. Login Ke Blogger
- 2. Pilih Blog yang akan Diberi Menu Dropdown
- 3. Masuk Ke Menu Template dan Tekan Edit HTML
- 4. Copy Kode dibawah ini Tepat diatas ]]></b:skin>
/* Menu Navigasi Suka Suka Seo*/tulisan yang saya beri tanda merah adalah besar menu dropdown
#navigation{height:38px;width:1300px;position:relative;background-color:#000000;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;}
- 5. Copy Kode di Bawah ini untuk Meletakan Meletakan Menu Dropdown,
- Letakan di atas <header> untuk memberikan menu dropdown di atas judul blog
- Letakan di bawah </header> untuk memberikan menu dropdown di bawah judul blog
<nav>
<ul id='navigation'>
<li class='current'><a class='home' href='/' title='Home'>Home</a></li>
<li><a href='menu 1' title='nama menu 1'>Judul Menu 1</a></li>
<div class='sub-nav-wrapper'>
<ul class='sub-nav'>
<li><a href='Submenu 1' title='nama submenu 1'>Judul Submenu</a></li>
<li><a href='Submenu 2' title='nama submenu 2'>Judul Submenu</a></li>
<li><a href='Submenu 3' title='nama submenu 3'>Judul Submenu</a></li>
<li><a href='Submenu 4' title='nama submenu 4'>Judul Submenu</a></li>
<li><a href='menu 2' title='nama menu 2'>Judul Menu 2</a></li>
<li><a href='menu 3' title='nama menu 3'>Judul Menu 3</a></li>
<li><a href='menu 4' title='nama menu 4'>Judul Menu 4</a></li>
<li><a href='menu 5' title='nama menu 5'>Judul Menu 5</a></li>
<li class='search'>
<form action='/search' id='search' method='get'>
<input name='q' placeholder='Search...' size='45' type='text'/><input id='search-button' type='submit' value=''/> </form>
</li>
</ul>
</nav>
- Tulisan yang bewarna Merah, Ganti dengan alamat Label atau Halaman
- Tulisan yang bewarna Jingga, Ganti dengan Judul label atau Halaman
- 6. Simpan Template dan Lihat Hasilnya
Untuk contoh hasilnya, bisa anda lihat di menu atas blog Suka Suka Seo. Apabila anda mengalami masalah dalam memasang menu navigasi dropdown, bisa hubungi saya lewat kolom komentar di bawah. Demikian postingan Cara Membuat dan Memasang Menu Dropdown di Blog Blogger, saya harap postingan ini berguna dan bermanfaat bagi anda. Jika anda ada saran atau kritikan mohon ditulis di kolom komentar. Apabila anda menyukai postingan ini dan blog Suka Suka Seo, saya harap anda mau Join This Site, ikuti Google+ saya dan Like fanspage Facebook Suka Suka Seo
