Cara Membuat Menu Drop Dow Pada Blog-Menu Navigasi Drop Down biasanya terletak di atas Header atau di Bawah Header Blog. Sebelum lebih jauh membahas bersama cara menerapkan di blog alangkah bijaknya sedikit mengenal apa itu Menu Navigasi Drop Down?
Menu navigasi drop down adalah menu horizontal dalam suatu blog yang biasanya terletak di bagian bawah header atau atas header dan apabila kursor mouse di arahkan kepada tab menu tersebut akan muncul sub-sub menu yang mengarah kebawah.
Untuk lebih jelasnya bisa kita lihat pada contoh screnshoot berikut ini.
 |
| Menu Navigasi Drop Down Hitam Keren |
Kira-kira seperti gambar tersebut yang akan kita bahas pada kesempatan kali ini.
CARA MEMBUAT MENU DROP DOWN PADA BLOG
Sebelum menamabhkan menu navigasi ini alangkah baiknya anda backup template terlebih dahulu untuk menghindari apabil aterjadi kesalahan.
2. Lanjut pada Tempalte >> Edit HTML.
3. Cari Kode ]]></b:skin> (Untuk mempermudah pencarian gunakan Ctrl+F).
4. Letakkan kode di bawah ini tepat diatas kode ]]></b:skin>
Keterangan/* Menu Horizontal Dropdown*/#menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc4e-JtWmZxq8AzWMu3_Y-nAZi_77cDddZAbbHAwR6qlIPEmxyH9LETBQNbLcocPxDjTB6t8sXcgNBGFI7EemCQqoes5oGaycraWpEblWlHS9L-z7eq1HDvrsLYO9kOs49HD3hmwkFrQ4/s1600/menubar.png)repeat-x;width:960px;margin:0 auto;padding:0 auto}#menuwrapper{width:960px;height:35px;margin:0 auto}.menusearch{width:300px;float:right;margin:0 auto;padding:0 auto}.clearit{clear:both;height:0;line-height:0.0;font-size:0}#menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}#menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px}#menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDn3HbgtOxHfT2y7JDkKh0bQqWd6Mzl9sZQ7lGlnW8dG5lmLvEeJD-HYy2jKDhyphenhyphenDrW4w6olAbFXVVcnFYzRdAR5so7-f6zySWERSIoNJ5tApXT9BwBvM839AN9nw1aRjekSKCdib71NnU/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px}#menubar li{float:left;position:static;width:auto}#menubar li ul,#menubar ul li{width:170px}#menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}#menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A}#menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}#menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0}#menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
- 960px adalah lebar Menu Navigasi DropDown silahkan bisa di sesuaikan dengan lebar template yang anda gunakan.
- 300px adalah lebar dari kotak search.
5. Langkah berikutnya anda cari Kode <header> atau </header> pada template anda.
- Jika Anda akan memasang menu navigasi drop down di atas header maka letakana kode di bawah ini tepat diatas <header>
- Jika anda akan memasang menu navigasi dropdow di bawah header silahkan bisa letakan kode di bawah ini tepat diatas </header>
Keterangan<div id='menuwrapperpic'><div id='menuwrapper'><ul id='menubar'><li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC5aWhWne06qYscLHXH4FZtndc33vTJMBIMZ0W350Ix4glK47kZf_ojjwOb0gAg_Z6KkNt4GfrvQ2clunbkpL62naYJJCjuFj24_9XBtuo1CkSMVo4NB86XLJSV8qI2Tjx9IpTbyiICHE/s1600/home_white.png' style='padding:0px;'/> Home</a></li><li><a href='#'>Menu 1</a></li><li><a class='#r'>Menu 2</a><ul><li><a href='#'>Menu 3</a></li><li class='hr'/><li><a href='#'> Sub Menu 1</a></li><li><a href='#'> Sub Menu 2</a></li><li><a href='#'> Sub Menu 3</a></li></ul></li><li><a href='#'> Menu 4</a></li><li><a class='#'>Menu 5</a><ul><li><a href='#'>Sub Menu 1</a></li><li class='hr'/><li><a href='#'>Sub Menu 2</a></li><li class='hr'/><li><a href='#'>Sub Menu 3</a></li><li class='hr'/></ul></li><li><a class='trigger'>Menu 5</a><ul><li><a href='#'>Sub Menu 1</a></li><li class='hr'/><li><a href='#'>Sub Menu 2</a></li><li class='hr'/><li><a href='#'>Sub Menu 3</a></li><li class='hr'/><li><a href='#'>Sub Menu 4</a></li><li class='hr'/><li><a href='#'>Sub Menu 5</a></li><li class='hr'/><li><a href='#'>Sub Menu 6</a></li><li class='hr'/><li><a href='#'>Sub Menu 7</a></li></ul></li></ul> <div class='menusearch'><div style='float:right;padding:8px 8px 0 0;'><form action='http://www.jagadrochain.com/search' method='get' target=''><input name='sitesearch' style='display:none;' value='http://www.jagadrochain.com'/><input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7I_d2ICiXKyJHjYy5Cq0qgO-WXIvK2dlZOegDMR__TWiYm4wecWlq3jw5vZNRwqchYIAJx3AgaVQEWqraaisN2fiBmsa89lADu2CLuL4WFcfTR5qcQ_dGM3WF5jcuKyLPbSUHGcxZmq8/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini broo......'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmqzABrElP5O2db5S9gsGq_K4ZNfUxGKiij0I70b_FeQuVuB4wyWRyiP74B0VnQEr2b1W5vnw_mz4BTf9maD3eQTYOVI3l1umERy51poASw81IC0TOmXhPgwuvArfy4iiiBkCCj1MDqSo/s1600/bg_search.gif' type='image' value='Search'/></form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>
- http://www.jagadrochain.com Silahkan anda ganti dengan Alamat Blog Sobat.
- Cari disini broo...... Silahkan bisa di ganti sesuai dengan kreasi sobat.
Baca Juga Cara Membuat Recent Post Per Label Dengan Scroll Bar
Kurang lebih demikian Cara Membuat Menu Drop Down Pada Blog semoga bermanfaat, teruslah berkarya semoga Allah SWT senantiasa selalu membimbing serta memberikan Ridho dan Petunjuknya. Sukses buat Anda Sukses buat kita semua.
