Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header:
1. Seperti biasa sobat harus login dulu di akun blog sobat
2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan
3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan
4. Sobat cari kode ]]></b:skin> dan letakkan kode berikut tepat di atas kode ]]></b:skin>
Klik show untuk melihat
/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic{background:
url(http://2.bp.blogspot.com/-eVufkC686Cw/TwGo8YAlWwI/AAAAAAAAAYM/tWP7l3ENpjY/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/AVvXsEjkTdu_ptfvE6QI2MPSYweeoK7tsKF3vVHaawM6MMIazE4BkAJso0gMsaTZ_6pvaItFo3Lz9M_vXDsUWMTyXQoHsZO6txLGxxoFJ7UzQExAwSTTC9FTSQmn6IAIbwBdBy3nXJSAtUuldOc/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}
Selanjutnya sobat blogger cari kode berikut:
- <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>
Klik show untuk melihat
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj18_247SLDZhYKta7oyRQymFPYdT-aZhrQL3kLetG8Sfjg1glWvYplzzHAZRP9K9vFEoFISs6dawD3WGTBsc2rPjmFDIHM9849dTjyk9Cg1dSW53V3Csb2k_LlCf9trFBh-nV_QgcDTM/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://zuazz.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://zuazz.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/AVvXsEhFKMRLhAChpPUW5_2HdoFUovDLD969HuNsIC8bz4uNTxrQBKXv7SrI3o8zf0119Qc92qUNEVYLYXdTQQbae5uO_oIV86jnW3KtQV3caq3O8M9nNdEKt6LG8R45jZ7dTUp6w_7qYZmqwU4/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/AVvXsEiu-J4Q8g1xg-iiiEqtUtbZAineqLpXvFZeO-CQOU8JsWEL08CqegDrRm_GbsFBHNPxgvMK82VNYxioOT8pwevflloJjs39WKa9xGRnnreDGxDXdggP3DO-1wQzrFPtQQnZxJzCRwmNCls/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj18_247SLDZhYKta7oyRQymFPYdT-aZhrQL3kLetG8Sfjg1glWvYplzzHAZRP9K9vFEoFISs6dawD3WGTBsc2rPjmFDIHM9849dTjyk9Cg1dSW53V3Csb2k_LlCf9trFBh-nV_QgcDTM/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a
href='http://munsypedia.blogspot.com/'>Munsypedia</a></li>
<li><a href='#'>Hubungi Kami</a>
<ul>
<li><a
href='https://plus.google.com/106869168860336211678/about'>Google
+</a></li>
<li class='hr'/>
<li><a
href='http://www.facebook.com/pages/Sahabat-UN1X/470349262994047'>Contact on
Facebook</a></li>
<li class='hr'/>
<li><a
href='https://twitter.com/MunsyAfandi'>Contact on
Twitter</a></li>
</ul>
</li>
<li><a
href='http://beda-dunia.blogspot.com/'>Misteri Dunia</a></li>
<li><a href='http://boxriborn.blogspot.com/'>Boxriborn</a></li>
<li><a
href='https://twitter.com/azmiel_boy/'>Follow Me</a></li>
<li><a
href='http://padamaraa.blogspot.com/'>Padamara News</a></li>
<li><a
href='http://vhiblues.blogspot.com/'>VHIBLUES</a></li>
<li><a href='#'>Menu Spesial</a>
<ul>
<li><a
href='http://bozzkaf.blogspot.com/search/label/MISTERI'>Misteri</a></li>
<li class='hr'/>
<li><a
href='http://bozzkaf.blogspot.com/search/label/KOMPUTER'>Komputer</a></li>
<li class='hr'/>
<li><a
href='http://bozzkaf.blogspot.com/search/label/LEGENDA'>Legenda</a></li>
<li class='hr'/>
<li><a
href='http://bozzkaf.blogspot.com/search/label/TOKOH'>Tokoh</a></li>
<li class='hr'/>
<li><a
href='http://bozzkaf.blogspot.com/search/label/FAKTA%20UNIK'>Unic</a></li>
</ul></li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://zuazz.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://zuazz.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/AVvXsEhFKMRLhAChpPUW5_2HdoFUovDLD969HuNsIC8bz4uNTxrQBKXv7SrI3o8zf0119Qc92qUNEVYLYXdTQQbae5uO_oIV86jnW3KtQV3caq3O8M9nNdEKt6LG8R45jZ7dTUp6w_7qYZmqwU4/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/AVvXsEiu-J4Q8g1xg-iiiEqtUtbZAineqLpXvFZeO-CQOU8JsWEL08CqegDrRm_GbsFBHNPxgvMK82VNYxioOT8pwevflloJjs39WKa9xGRnnreDGxDXdggP3DO-1wQzrFPtQQnZxJzCRwmNCls/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>
Keterangan:
- Kode berwarna merah adalah Url tujuan, silakan sobat ganti dengan Url pada blog sobat
- Kode berwarna kuning adalah kalimat yang tampil pada menu dropdown, Silakan sobat sesuaikan.
Tidak ada komentar:
Posting Komentar