- Silahkan masuk ke dasbor blog anda.
- Klik panah kebawah seperti pada gambar yang diberi kotak merah :
- Kemudian Pilih >> Template
- Dilanjutkan dengan klik >> Edit HTML >> Proceed / lanjutkan
- Setelah masuk ke jendela Edit Html kemudian silahkan cari kode ]]></b:skin> dengan cara klik Ctrl + F pada keyboard Komputer anda kemudian masukkan kode tersebut.
- Setelah ketemu silahkan pasang kode berikut ini tepat diatas kode ]]></b:skin>
ul.dropmenu{
position: relative;
margin: 0px;
padding: 1px 0px 0px 0px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqsIxiyvGU6Jv_VXsp7e1k6z8Hxz12p0lnLXGNSOHwwznCKCek7sN9co57edc3npSNhVhXZXOrJcJ_XD2OUhL_8jY-RsXUDH-GJWd79xR3IbxhmFDMNc0_Iksymz37Fkzob3IO-moNGec/s1600/navigation.png) repeat-x scroll 0 0;
display:block;
height: 35px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
}
.dropmenu li{
position: relative;
list-style: none;
float: left;
margin: 0px;
padding: 0px;
}
.dropmenu li a{
height: 22px;
padding: 9px 30px 0px 15px;
display: block;
cursor: point;
border-right: solid 1px #4a779d;
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
}
.dropmenu li span{
display: block;
float: right;
height: 10px;
width: 10px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyNqSzuOn-SCO4VyEZDqHxzBvd5Wx8I4zmHStAqEWx4uZONG6BhHmYuX72fEHnQl9xXiZQHNucKhQktHWCDwJSYs4hNRR_K2FycXhlqZlZ7xyPYgtJRQk7Dy8ue5K7dBDuZFFaokiVOO8/s1600/arrow_up.png) repeat-x scroll 0 0;
position: absolute;
top: 12px;
right: 10px;
}
.dropmenu li a:hover span{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMhrpIQWsdKIoNNS8hAqOcrRBwgWcWTnnawmnT8uJI3BPQ7mvLgcVaV2z_xnzOZCwgw71ilyBWHQXFDg_4yKQdv_i_YKge1XNcadIIUD9hFzuWqEm-N_IZKilrvFTUj2-OEoNaZfgpCC4/s1600/arrow_hover.png) repeat-x scroll 0 0;
}
.dropmenu li:hover ul, .dropmenu li:hover div{
display: block;
}
.dropmenu ul{
position: absolute;
display: none;
width: 140px;
padding: 0px;
margin: 0px;
border-bottom: 1px solid #ccc;
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlN_WUJjAEz1_nV9chZAWuxhj_xPbuXLKEqmlJwd4v9ykqbNQ7Qsq2-isc_Dnap9_Gr_8pnOIBLhrJ5D7KUaq0hse2iR2qGtQvFRJjUEdQ9W01Z7lBaswve1ZXQ_0dWa760TOMOYHABPg/s1600/gradient.png) repeat-x scroll 0 0;
}
.dropmenu ul li{
border: 0;
float: none;
}
.dropmenu ul a {
border: 1px solid #ccc;
border-bottom: 0;
white-space: nowrap;
display:block;
color: #0657AD;
text-decoration: underline;
text-transform: none;
}
a.selected, a:hover{
color: #0657AD !important;
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlN_WUJjAEz1_nV9chZAWuxhj_xPbuXLKEqmlJwd4v9ykqbNQ7Qsq2-isc_Dnap9_Gr_8pnOIBLhrJ5D7KUaq0hse2iR2qGtQvFRJjUEdQ9W01Z7lBaswve1ZXQ_0dWa760TOMOYHABPg/s1600/gradient.png) repeat-x scroll 0 0;
}
a.selected span{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMhrpIQWsdKIoNNS8hAqOcrRBwgWcWTnnawmnT8uJI3BPQ7mvLgcVaV2z_xnzOZCwgw71ilyBWHQXFDg_4yKQdv_i_YKge1XNcadIIUD9hFzuWqEm-N_IZKilrvFTUj2-OEoNaZfgpCC4/s1600/arrow_hover.png) repeat-x scroll 0 0;
}
.dropmenu ul a:hover {
color:#F67A00 !important;
text-decoration: none;
background-color: #F0F0F0;
background-image: none;
}
.dropmenu div ul{
position: relative;
display: block;
}
.dropmenu li div{
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlN_WUJjAEz1_nV9chZAWuxhj_xPbuXLKEqmlJwd4v9ykqbNQ7Qsq2-isc_Dnap9_Gr_8pnOIBLhrJ5D7KUaq0hse2iR2qGtQvFRJjUEdQ9W01Z7lBaswve1ZXQ_0dWa760TOMOYHABPg/s1600/gradient.png) repeat-x scroll 0 0;
border: 1px solid #ccc;
padding: 5px;
display: none;
position: absolute;
}
.dropmenu li div ul{
border: none;
background: none;
position: relative !important;
}
.dropmenu li div a{
border: none;
border-bottom: 1px solid #ccc;
}
.dropmenu li div div{
display: block;
position: relative;
background: none;
border: none;
}
.dropmenu li div div a{
display: inline;
border: none;
color: #666;
text-decoration: underline;
padding: 0px;
margin: 0px;
text-transform: none;
}
.dropmenu li div div a:hover{
color: #000;
text-decoration: none;
}
ul.left{
float: left;
width: 145px;
}
ul.right{
float: right;
width: 145px;
}
.small{
color: #666;
font-size: 10px;
padding: 10px 5px 8px 5px !important;
display: block;
clear: both;
}
.products{
width: 300px;
padding: 15px !important;
}
.products ul{
width: 100%;
}
.products ul li{
border-bottom: 1px solid #ccc;
height: 40px;
padding: 10px 0px;
}
.products h2{
font-size: 16px;
padding: 2px 0px 3px 0px;
margin: 0px;
}
.products p{
color: #666;
font-size: 10px;
padding: 0px;
margin: 0px;
}
.products img{
float: left;
padding-right: 10px;
}
.products ul li a{
display: inline;
border: none;
color: #666;
text-decoration: underline;
padding: 0px;
margin: 0px;
text-transform: none;
}
.products ul li a:hover{
color: #000 !important;
text-decoration: none;
background: none !important;
}
.tutorials{
width: 300px;
}
input{
border:1px solid #4A779D;
padding: 3px 8px;
margin-bottom: 8px;
width: 164px;
}
label{
padding: 0px 0px 4px 0px;
display:block;
}
button{
background: #4A779D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqsIxiyvGU6Jv_VXsp7e1k6z8Hxz12p0lnLXGNSOHwwznCKCek7sN9co57edc3npSNhVhXZXOrJcJ_XD2OUhL_8jY-RsXUDH-GJWd79xR3IbxhmFDMNc0_Iksymz37Fkzob3IO-moNGec/s1600/navigation.png) repeat-x scroll 0 0;
color: #FFF;
border:1px solid #4A779D;
padding: 4px 10px;
width: 180px;
}
.emailupdatesform{margin: 10px 0 5px 5px; width: 180px; float: left;}
.emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 160px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: none; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}
- Setelah terpasang silahkan di save dulu
- Kemudian cari kembali kode </head> dengan menggunakan Ctrl + F seperti diatas.
- Setelah ketemu dilahkan pasang kode berikut ini tepat diatas kode </head> :
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery.js"></script>
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/dropdown.js"></script>
<script>
$(document).ready(function(){
$("#nav-one").dropmenu();
});
</script>
- Kemudian cari kode <div id='header-wrapper'> dengan menggunakan Ctrl + F, Update jika tidak menemukan kode diatas silahkan cari kode berikut <div class='header-outer'>.
- Pasang kode berikut tepat tiatas kode <div id='header-wrapper'> atau <div class='header-outer'> :
<ul id="nav-one" class="dropmenu">
<li>
<a href="#">Home</a> </li><li>
<a href="#">Forum</a><ul>
<li><a href="#">Support</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Examples</a></li>
<li><a href="#">Your work</a></li>
</ul>
</li>
<li>
<a href="#item3">Downloads</a><ul>
<li><a href="#">Tools</a></li>
<li><a href="#">Office</a></li>
<li><a href="#">Custom projects</a></li>
</ul>
</li>
<li>
<a href="#">Products</a>
<div class="products">
<ul>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAatzgPLe_bZhnAzwhSY7n_nfxJpkypHCKwx0y7NiKUirOVNgkQs0DU86nYfQxQt6bqXg_nQ-J9t5oy9FsRTEZ_pTM_mX1cbPPk6Iq1h6MBKYOqxfPh46ImwGdy_mFKdlxgi1Z69BBXKE/s1600/1.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Featured Box</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSwpAjqVEWDB1Zqxto_TqCWeLufDQ2fG1kzL5LUW5lDtpjwNVR3iupFK6JPo1aanSDYJ-9corAZc39kck3d5SxQcbDpGBc9I2fGGncrAc3-RCx-MkuqGuaoz6cmiW3iWqg3jt5l9gggKk/s1600/2.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Mod Rewriter</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGacF7Vs3hRL1dFFL7NwVevVs29HLkoWlnKulAE8dznT2YbXnDhSyW9iZjnAXtfZB4EfW3FLggyMPigu7PIxgf8S_CbxQvD3CAGZFtfPWMaS5i3eWCCtCIFFc9p9tgPVTdtOha9Ajk3yw/s1600/3.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Byte Scrambler</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGacF7Vs3hRL1dFFL7NwVevVs29HLkoWlnKulAE8dznT2YbXnDhSyW9iZjnAXtfZB4EfW3FLggyMPigu7PIxgf8S_CbxQvD3CAGZFtfPWMaS5i3eWCCtCIFFc9p9tgPVTdtOha9Ajk3yw/s1600/3.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Image Processor</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidWfChz7jkOkOPztImiFu-L8Vih1vfYSUTg8c_sPfNwWj6BtzLMrFMu_-T8vOaRDshPHa6sBySx-TXGno6eVkxlSIWYcjJ-M9bPU-20GBxNdty6HI0LCKyG70C9wQQI6VdtOUcTuOmCdU/s1600/5.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Registry Class</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMIIrubK9LNhlT_bPpnyZqn4viMVSottlHnQ5TC_rnea8nGkNqOSUH4D4wHbbHVf1VWkjVtFh3gUSHJr5eN3Zk_HjNcLk9ougwk74D2q7fQLYw8RbxCFR-NWxudgxAqLajNLxEiaelChk/s1600/6.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Data Validation</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv1ni_vvkB0TWre4c7wyNeii8x3b2oHz0OIZh2EhKHoaAdJZl89if1dAICSo2rQSoet6YL0Co2D1lMdOJsIpmq9LPPBIyThNVQiko7CHoIbfcCYjiNTFWSmN_aH8_LuKKN8-iSQ_27h8w/s1600/7.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Ajax Tables</h2><p><a href="#">More information about this product</a></p></li>
</ul>
<div class="small">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</div>
</div>
</li>
<li>
<a href="#">Tutorials</a>
<div class="tutorials">
<ul class="left">
<li><a href="#">Javascript</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">PHP</a></li>
</ul>
<ul class="right">
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">ASP.NET</a></li>
<li><a href="#">Actionscript</a></li>
</ul>
<div class="small">View <a href="#">all categories</a> or a <a href="#">list of the best tutorials</a>.</div>
</div>
</li>
<li>
<a href="#">Links</a> <ul>
<li><a href="#">Programming</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">My websites</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Cool stuff</a></li>
<li><a href="#">Sitebase</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
<li>
<a href="#">Subscribe Now</a>
<div class="emailsub">
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=NAMABLOGANDA', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" /><input value="tntbystc" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form></div></div>
</li>
</ul>
- Setelah langkah diatas selesai, anda bisa mengubah link dan nama menu pada kode berwarna merah diatas.
- Kemudian silahkan di save semua pengaturan anda.
Dikarenakan masih banyak sahabat Pemula atau biasa disebut Newbe yang masih belum memahami cara pasang Link URL Menunya supaya tertuju pada artikel yang diinginkan akhirnya saya tergugah untuk menjelaskan lebih detail di artikel waroenk blog yang lain. untuk lebih jelasnya silahkan Baca :
"Cara Memasukkan Link Pada Menu or Menu Drop Down"
semoga dengan penjelasan lebih rinci maka sahabat Newbe juga bisa memahami dan mempraktekkan dengan benar.
Demikianlah penjelasan saya tentang cara membuat menu dropdown versi ke-. Untuk Screnshootnya bisa lihat gambar dibawah ini :
21 Komentar
gan, mohon di kasih screenshotnya, biar lebih menarik...
BalasHapusOke Gan Makasih sarannya...
BalasHapusgan mohon info gimana caranya mengembalikan html ke kesemula jika terlanjur di edit dan sudah tersaimpan mohon infonya dan
BalasHapusJika mengembalikan ke semula setelah di edit dan anda tidak membackupnya dulu maka tidak bisa. cara mengatasinya adalah dengan menindih kembali dengan template yang baru atau dengan berjalan terbalik dari apa yang sudah sampean otak atik di template. Semoga berhasil gan... kalau masih belum bisa hubungi saya mas PM aja saya bantu.
HapusGan kalo menu sudah jadi lalu bagai mana cara menyambungkan linknya ke tempat yang kita tuju.. mohon infonya ga.. Thks...
BalasHapusCari Kode a href="#" kemudian tanda # ganti dengan link yang dituju
HapusGan kalo mau mindahin postingan lama ke laman baru gimana caranya?
BalasHapusmaksudnya postingan lama ke laman gimana mbak?tolong dikasih contohnya biar saya bisa jelaskan lebih rinci.terimakasih
HapusGini lho, misalkan aku buat laman baru judulnya "Ngampus" trus postingan aku yg berlabel "Ngampus" mau aku jadiin satu di laman itu bisa ngak?
HapusOke saya faham maksudnya sampean. jadi intinya menyatukan dalam satu kategori begitu kan?
HapusJdi perlu di pahami terlebih dahulu. laman dan label/kategori itu berbeda. jika laman digunakan untuk menempatkan postingan yang bermaksud tiak untuk dipublikasikan ke Search Engine, sedangkan label adalah mengumpulkan beberapa postingan/artikel setipe dalam satu kategori. jad pada dasarnya bisa mbak tapi menggunakan kategori/label, bukan menggunakan laman.
Gan saya pakai template Anime Naruto Uniqx itu udh ada menunya tapi kalo saya klik gk terjadi apa apa gan gimana cara menghidupkannya?
BalasHapusBantuannya yh gan.
Saya sudah lihat blog sampean. Pada Blog Sampean belum ada link yang ditujukan pada menu2 tersebut. untuk menyelesaikan silahkan masuk ke edit html, cari dengan Ctrl+F masukkan Nama "Menu" kemudian enter. nah ubah kata menu dan link yang belum terpasang. pada blog sampean ganti tanda # untuk link yang dituju.
HapusKalo Merubah Tulisan Menunya Bisa Gk Gan Misalnya Menu One Piece Jadi Menu Dragon City
BalasHapusSangat Bisa Gan... Ya tinggal Block Nama Menu One Piece kemudian ganti dengan Dragon City gitu aja mas... :D
HapusGan saya sudah berhasil ganti menu,kalau mau Artikelnya 2 Atau Lebih Gimana?
BalasHapusMaksudnya artikel 2 atau lebih gimana? kalau 1 menu hanya bisa di isi 1 link. kalau maksudnya sampean satu link tersebut menampilkan beberapa artikel menggunakan link pada label/kategori Contohnya : http://www.waroenkblog.com/search/label/Blogger
HapusCaranya jika ada label yang anda tampilkan di blog tinggal klik kanan kemudian copy linknya. kalau yang langsung formatnya : http://www.NamaBlog.com/search/label/Nama Label
agak rumit sih tapi saya coba dulu,deh gan
BalasHapusoke silahkan
HapusAlhamdulilah bisa gan, tapi sepertinya trik ini sudah dipasang on your own blog ya gan? Hehehe. okelah terima kasih.
BalasHapushehehe iya mas
Hapusmasbro... itu biar menunya ada di bawah judul blog gmn ya?
BalasHapusMohon untuk tidak menyematkan LINK HIDUP, Kalau sobat ingin mendapat kunjungan balik silahkan tinggalkan LINK Blognya Tapi jangan LINK HIDUP karena Komentarnya akan saya Hapus. Terimakasih