Anda ingin membuat menu drop down seperti diatas didalam blog anda? caranya gampang ikuti saja langkah langkah dibawah ini, dan tutorial pemasangannya. lanjjuuutt.....
- Login dulu ke blog sobat
- Pilih template
- Klik lanjutkan dan centang expand widget
- Cari kode ]]</b:skin> untuk memudahkan mencari klik CTRL+F dan pastekan ]]</b:skin> di pojok kanan atas
/* Menu Horizontal Dropdown ------21go-blogs.blogspot.com---- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ6hda3fd3qwAQwyg78kaHVbUbhJg5t1tf5wuHnGtcmG2ioMHjnXOtoddqn23SahxFN1g1dHBpnKr2EUemrD4Ni6BESafGDHW1Lji6ZAfj7Lt5U1BJOiiPFveqaSAQKaGepfRGNlE37Dmh/s1600/navi.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/AVvXsEh_DlCX-S1QkZd6_CBLAh6flT2nCYxmmkd-0DrxjuEH2hpjLYxaI8oqoR27GbZ6EbkR3V4ZeQhgL98jHtu27G2fcAJUySlyLyu6g54JmRzKOgk815F8n6D1OJYyXQBC0Dcr4O_xg0_Bb4g/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}
- Cari kode <header> atau </header>
<div id='menuwrapperpic'><div id='menuwrapper'><ul id='menubar'><li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9bxJn-B1wj5kVVvmkX4UYbIGQLORknExrre-MfTe1_iJbP3_uWtoFmNbanQaYeA6UIn5u81-S7cfiBWYdYmv1OZkhfbYKZh9VtQmZv-gpDqrWC5bBN4Y2mGtMKP-K0nkeXZO5Mc_aPZU/s1600/home_white.png' style='padding:0px;'/> Home</a></li><li><a href='#' target='new'>Tentang Admin</a></li><li><a class='trigger'>Contact Us</a><ul><li><a class='trigger'>music</a><li class='hr'/><li><a href='#' target='new'>Artis</a></li><li><a href='#' target='new'>Music video</a></li><li><a href='#' target='new'>Lirik</a></li></li>
</ul></li><li><a href='http://21go-blogs.blogspot.com/search/label/berita%20terbaru' target='new'>Berita</a></li><li><a class='trigger'>Tips dan Trik</a><ul><li><a href='#'>Komputer</a></li><li class='hr'/><li><a href='#'>Blogspot</a></li><li class='hr'/><li><a href='#'>Internet</a></li><li class='hr'/></ul></li><li><a class='trigger'>Kategori</a><ul><li><a href='#'>TV Online</a></li><li class='hr'/><li><a href='http://21go-blogs.blogspot.com/'>internet</a></li><li class='hr'/><li><a href='http://21go-blogs.blogspot.com/2012/11/ekioskucom-jual-beli-online-aman.html'>kontes SEO</a></li><li class='hr'/><li><a href='#'>Game</a></li><li class='hr'/><li><a href='#'>Microsoft</a></li><li class='hr'/><li><a href='#'>Software APP</a></li><li class='hr'/><li><a href='#'>Software Program</a></li></ul></li></ul> <div class='menusearch'><div style='float:right;padding:8px 8px 0 0;'><form action='http://21go-blogs.blogspot.com//search' method='get' target=''><input name='sitesearch' style='display:none;' value='http://21go-blogs.blogspot.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/AVvXsEhTOF2QpS8qfHg1si-jXBYFlTeOU_ErkyYvKlCr1qaryD1e2ZMDgbNDbptkOJsxEFwjPemwPM3_GW6KPlt6ScCbD6QElTOCEmCOUrFkLX9UTpjj2kjPXUqu27dBOYfpiQczlHojhVeG9UY/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim04cswY6VFg-2IfP76qGBv9jbQ601r1wh75tbW-3NDEQ2K07xuSOymeR78y6EIKr9OfkDwenidle3yH9dG2bgU3OOjSC98wU5lnY_LQWDO21LwKa4EObDm20wNi_3kxnXmhcbembjY18/s1600/bg_search.gif' type='image' value='Search'/></form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>
- letakkan diatas kode <header> jika anda ingin menunya berada diatas header dan letakkan kode dibawah kode </header> jika anda ingin menempatkan menu dibawah header, jangan sampai terbalik.
- ganti tulisan berwarna hijau dengan teks yang akan anda tampilkan
- ganti tanda # dengan alamat url yang anda tuju.
- Jika anda ingin menambahkan menu tambahkan
<li><a class='trigger'>Kategori</a> <---- jika diklik akan drop down
<ul>
<li><a href='#'>TV Online</a></li> <-- jika diklik akan menuju url
<li class='hr'/> <-- garis pembatas
<li><a href='http://21go-blogs.blogspot.com/'>internet</a></li> <-- judul dengan target url
0 comments:
Post a Comment