Jumat, 26 April 2013

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/AVvXsEgMdirBsxUNuV8tliyTPW7o9ngMdNXbNECLF9ZnOXRnMPl8HXYakoLI2kMrUNL8YC2Gubh7FZjFy0UsgdyiukTt6I8X2YqNS0W-R3HoXdS5NMFfwqbSkU81xG5QAsM5edi9Ow4EAnPzKOk/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(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/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==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:12px Arial;color:#666; background:url(http://1.bp.blogspot.com/-kmhya2YU7jE/Tv9JVye66xI/AAAAAAAAAP8/S0ZeuQ910Ow/s1600/field-bg.gif) no-repeat;' type='text' value='Search on this site...'/><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> 
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





Langsung saja tanpa basa basi, kali ini saya akan membuat artikel dengan judul :
" Cara Membuat Dan Memasang Text Berjalan Berwarna Warni "

Silahkan Ikuti Langkah-langkah berikut :
1. Silahkan login akun Blog anda.
2. Pilih menu Rancangan dan Pilih Elemen Laman
3. Setelah itu pilih Tambah Gadget ( tempatkan widget dimana tulisan akan disimpan )
4. Kemudian Tambahkan HTML/JavaScript
5. Dan Copy dan kode di bawah ini :

<div><script src="http://www.widgeo.net/message.php?msg=wizyuloverz&adult=0&cat=internet&big=&cl=rainbow"></script><br>
<noscript><a href="http://www.widgeo.net">widgets</a></noscript>
<a href="http://www.widgeo.net"><img alt="widgets" border="0" src="http://www.widgeo.net/img/logopm.png"></a></div>

6. Setelah Di Copy, Silahkan Ganti Tulisan Berwarna Kuning Dengan " Nama yang Anda Inginkan "
7. Kemudian Klik Simpan Dan Lihat Hasilnya
8. Apabila Ingin Lebih Berkreasi Silahkan Kunjungi Situs Resminya

Tidak ada komentar:

Posting Komentar