Cara Membuat Menu Horizontal Drop Down
Cara Membuat Menu Horizontal Drop Down
hay,.!! Welcome to Cheater Pandaan II
sekarang di sini saya gak bahas tentang cheat tapi saya ingin update tentang Cara Membuat Menu Horizontal Drop Down,.. nah,, para pemula blogger pasti ingin sekali memiliki menu yang bagus dan menarik,.!!
nah berikut contoh Menu nya,. :
nah di atas adalah contoh menunya,.!!
cara membuatnya,.. di sini,, heheh
1. Buka Blog kalian
2. Masuk Ke DASHBORE
3. Template dan pilih EditHTML dan klick Expand Template Widgate
4. tekan CTRL+F untuk mencari kede ini ]]></b:skin>
5. Setelah Ketemu,. letakkan Script berikut di atas kode ]]></b:skin>
Script:
/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdAYd4UMvV6x-6lWAKNo8_LlWudEMoAQCXMfjrGFAAtrBta23KdvZflsj3HYtiHadRTAsc41qGkaESpIKiZNGfw8Zx32-ExcFTQJlVh4mndNvGHPIyWaoJ5G66ib7mNpMBQjfDwX-za2U/s1600/nav.png) repeat-x;width:960px;margin:0 auto;padding:0 auto}
#menuwrapper{width:960px;height:30px;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;text-shadow: 0px 1px 1px #000;color:#f2f1f1;border-right:1px solid #666;padding:9px 10px 8px}
#menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrMx2Glc754pDFPrCZYCMCg0XQ1HhJffWhIA3lwCMGZW7pmF1OQCqA8JyFqIWOX796uukZrW0kkz-7JjSs7hqdPGuqFvHFM_AJ__JWln6lxN8HIdb6e5qJxVBu9iHA2Irr4sTaT2VIskQ/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:9px 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}
6. setelah selesai meng COPAS script ini Cari Kede </head>
7. biasanya terdapat dua kata </head> pilih kode yang kedua,.. kemudian Copy Paste script Berikut di bawah Kode </head>Script :
<div id=menuwrapperpic>
<div id=menuwrapper>
<ul id=menubar>
<li><a href=#>Home</a></li>
<li><a href=#>About Us</a></li>
<li><a class=trigger href=#>Contact Us</a>
<ul>
<li><a href=#>Goggle +</a></li>
<li class=hr/>
<li><a href=#>Contact on Facebook</a></li>
<li class=hr/>
<li><a href=#>Contact on Twitter</a></li>
</ul>
</li>
<li><a href=#>Sport</a></li>
<li><a href=#>Culture</a></li>
<li><a class=trigger href=#>Entertainment</a>
<ul>
<li><a href=#>Music</a></li>
<li class=hr/>
<li><a href=#>Movie</a></li>
<li class=hr/>
<li><a href=#>Television</a></li>
</ul>
</li>
<li><a href=#>Health</a></li>
<li><a class=trigger href=#>More</a>
<ul>
<li><a href=#>Themes</a></li>
<li class=hr/>
<li><a href=#>Tutorial</a></li>
<li class=hr/>
<li><a href=#>Resource</a></li>
<li class=hr/>
<li><a href=#>Advertise</a></li>
<li class=hr/>
<li><a href=#>Javascript</a></li>
</ul>
</li>
</ul>
<div class=menusearch>
<div style=float:right;padding:4px 8px 0 0;>
<form action=http://www.google.com/search method=get target=_blank>
<input name=sitesearch style=display:none; value=http://cheaterpandaan2.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:12px Arial;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIyWLlzKRa9esA109B7w7yytt4DNpuUQXFAqdJOG-bVNYEhgapX9_EmsY_er_NUcPnDefLoaQlJ2rkcdjAeJxqgUDAQ9bMahH-hWMhJWzX1-3rk1yeTsKAdZlvtAvSIU7EXh0pVBw08o/s1600/field-bg.gif) no-repeat; type=text value=Search on this site.../><input align=top id=search-btn src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmtLH9QgmBUjhDM-8XmULg-JhKmic9J832jqMNlQv-oragZPGREOr6tdxI8Yael0rPn9ZucaXLy8hs6q44A_5vtMBpZq7_aQ2IyeMyUMiifVZD5b_gsi3F_5Hoc6Gzi54qpVa4PS5jEvk/s1600/bg_search.gif type=image value=Search/>
</form>
</div>
</div>
<br class=clearit/>
</div>
<div style=clear:both;/>
</div>
8. Sebelum Menyimpan Script tadi,, pilih PRATINJAU terlebih dahulu apakah cript sudah benar-benar memang benar,, hehe
9. Setelah benar,, Klick SAVENote :
Warna Kuning = isikan dengan link yang anda inginkan
Warna Hijau = judul menu
Warna Biru = ganti dengan alamat blogger sobatDescription: Cara Membuat Menu Horizontal Drop Down
Rating: 4.5
Reviewer: ArisMyou
ItemReviewed: Cara Membuat Menu Horizontal Drop Down
Comments
Post a Comment