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/AVvXsEgsnoUU3S5HI7rL2zKTOYHFrOYGj5xQ8tzu59HHPgi-LUZJN_S2TBKJZmdR-UaHHDM8bmI8dawicjgBgPPqTEs29awoCv2XzECRUUpTDCVva4a3QHvCAqf98TBH1bcuGRIJ0xhC533k25U/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/AVvXsEjeZ5Jm8IWvMs0oKPf7-FsAKNOXOyRlxOMjqttMmvBLXqc7vMMwyBm2liTIXrPOFWCvcZBcQdLx-tPoWIoOxgOOy5Lb_UbR4N_GNtLpcdHr28UKpP0on_R6nSIM6j3RIAheG1rSMSfK66s/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/AVvXsEhU0T8BOgLnoxPOrXxMme6wNvu-V80CVjqiWjm1JUinPjYuTN7963dNbeN9LRmAYtvxcsvH_nCGNO5csIUI4zeQT98whhsm88Rqr1fHM5MEGe6Tfi7J6v3gCTpA3zIpoEk8QK9gO54t-q8/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/AVvXsEh9Rt5YPkMrt_sO_IGHL2hQ9t3xFBdBkwo7Xjs4iMZGFyAh9Q2vdZ0Iis3yVRbNSLyZcljvpx1zuskgeaAtl1Amm1rys3x7CH03HSGLmPDCDHm_sbYeOZpI4-qAf2of2RZM1llnc7MSdVk/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 SAVE
Note :
Warna Kuning = isikan dengan link yang anda inginkan
Warna Hijau = judul menu
Warna Biru = ganti dengan alamat blogger sobat
Description: Cara Membuat Menu Horizontal Drop Down
Rating: 4.5
Reviewer: ArisMyou
ItemReviewed: Cara Membuat Menu Horizontal Drop Down
Cara Membuat Menu Horizontal Drop Down
+gAMEPLAY.png)
0 komentar:
Post a Comment