Cara membuat Rolling drop down pada header blog itu mudah loh sob, paling susahnya cari kode-kode gitu,,,,
tapi don't worry sob, kali ini saya akan share cara membuat rolling drop down di header blog. tentu dengan dibuatnya rolling drop down ini blog sobat akan terlihat lebih cantik dan menarik, dan itu bisa membuat Mbah Google tertarik dan menempatkan blog anda di urutan pertama...! (amien)
lalu pengunjung blog sobat jadi rame deh...........
Nah langsung saja ini adalah langkah-langkah membuat rolling drop down-nya :
1. Login ke blog sobat.
2. Setelah itu masuk ke templete klik edit HTMl, setelah itu akan muncul tab peringantan, klik saja lanjutkan.
3. Jangan lupa centang "Expand Template Widget" ini dilakuakan untuk menghindari kesalahan.
4. Cari kode
]]></b:skin> dan copy paste kan kode di bawah ini tepat di atas kode ]]></b:skin>
(agar prkaktis mencari kode ]]></b:skin> tekan tombol ctrl+f pada keyword lalu masukan kode ]]></b:skin>-nya)
kode :
/* 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(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/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}
5. Selanjutnya sobat Cari Kode di bawah ini (agar praktis tekan tombol ctrl+f di keyword lalu masukan
kode yg ada di bawah)
<header> = untuk meletakan rolling drop down di bawah nama blog sobat, atau
</header> = untuk meletakan rolling drop down di bawah nama blog sobat.
6. Setelah kodenya ketemu masukan kode di bawah ini tepat di atas kode
<header> atau tepat di bawah
kode
</header> terserah mau pilih yang mana.
kode :
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0'
src='http://1.bp.blogspot.com/-Yx-NuFKviSQ/TwETaPMdmfI/AAAAAAAAATs/fLZvwofZ8N0/s1600/home_white.png'
style='padding:0px;'/>
Home</a></li>
<li><a href='http://www.blogger.com/profile/06961337061354681028' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='
https://plus.google.com/u/0/106997202037581570725' target='new'>
Goggle +</a></li>
<li class='hr'/>
<li><a href='
http://twitter.com/den_zuaz' target='new'>
Contact on Twitter</a></li>
<li><a href='
http://www.myspace.com/denzuaz' target='new'>
Contact on Myspace</a></li>
<li><a href='
http://www.facebook.com/zuazTama' target='new'>
Zuaz'Z on Facebook</a></li>
</ul>
</li>
<li><a href='
http://zuazz.blogspot.com' target='new'>
Zuaz'Z Creator</a></li>
<li><a class='trigger'>
Tips dan Trik</a>
<ul>
<li><a href='
http://zuazz.blogspot.com/search/label/tips%20dan%20trik%20komputer'>
Komputer</a></li>
<li class='hr'/>
<li><a href='
http://zuazz.blogspot.com/search/label/tips%20dan%20trik%20blog'>
Blogspot</a></li>
<li class='hr'/>
<li><a href='
http://zuazz.blogspot.com/search/label/facebook'>
Facebook</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>
Kategori</a>
<ul>
<li><a href='
http://zuazz.blogspot.com/2012/01/tv-online.html'>
TV Online</a></li>
<li class='hr'/>
<li><a href='
http://zuazz.blogspot.com/search/label/computer'>
Komputer</a></li>
<li class='hr'/>
<li><a href='
http://zuazz.blogspot.com/search/label/desain%20grafis'>
Desain Grafis</a></li>
<li class='hr'/>
<li><a href='
http://zuazz.blogspot.com/search/label/game'>
Game</a></li>
<li class='hr'/>
<li><a href='
http://zuazz.blogspot.com/search/label/microsoft'>
Microsoft</a></li>
<li class='hr'/>
<li><a href='
http://zuazz.blogspot.com/search/label/software%20aplikasi'>
Software APP</a></li>
<li class='hr'/>
<li><a href='
http://zuazz.blogspot.com/search/label/software%20program'>
Software Program</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(http://1.bp.blogspot.com/-kmhya2YU7jE/Tv9JVye66xI/AAAAAAAAAP8/S0ZeuQ910Ow/s1600/field-bg.gif)
no-repeat;' type='text' value='Cari disini ya sob...'/><input
align='top' id='search-btn'
src='http://4.bp.blogspot.com/-b9FTjjXAbp4/TwEo-YIwe-I/AAAAAAAAAU4/Du-VmpE9hPE/s1600/bg_search.gif'
type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>
7. Ganti tulisan yang berwarna
merah dengan alamat blog sobat.
Ganti tulisan yang berwarna
kuning dengan kata-kata yang sobat Mau tampilkan di menu rolling drop
down-nya ...
kalau suadah berhasil akan menjadi seperti ini :
 |
| Add caption |
Demikian postingan saya kali ini semoga bermanfaat bagi sobat blogger semua,,,,,,,,,,,,
dan saya ucapkan selamat mencoba and good luck.....
