Home
10/19/2013 07:00:00 AM
Unknown
Halo Sobat Blogger.. Pasti udah pada tahu kan apa itu Menu Drop Down? Yang belum tahu liat aja gambar dia atas, hehe..
Sebelumnya saya udah pernah posting Cara Membuat Menu Drop Down Tanpa Edit HTML, tapi kali ini saya posting tentang Cara Membuat Menu Drop Down Menggunakan Kode HTML. Pengen tahu caranya? Lets cekidot!!
Step 1: Masuk ke akun Blogger kamu.
Step 2: Pilih "Template" lalu "Edit HTML" (Jangan lupa pilih "Cadangkan/Pulihkan" untuk mendapatkan HTML kamu sebelum diedit)
Step 3: Cari kode ]]></b:skin>
Step 4: Copy-paste kode di bawah ini dan letakkan di atas kode ]]></b:skin>
/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic{background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibJO1fxG3CSueA6CJT4yfHa7iZ9ld5s-AKOdsG-5e5LyyTsjg3dA0W8oJCz0wSTz2m6_hpjnZdgUspa8lU1gcKsUgjsyP_nkkWu6pxSHzshGgdGAozMD3rOANFWtrcyqZmo1gNdRbQ1X8/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicKrmdqFIfslALjre4Zv-to8oVItpQK7sJcJ6KZ6mZEvivVjO6nNMIxXnNO8cRNmDVtwt3XJerZJ80fKLjOms3aFj7jLokXvkvPSP1CCSM8VPZKJj9LMLN4tct0vqV-BTgd3c4vfyMXVg/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}
Step 5: Cari kode:
- <head> : untuk menempatkan menu di atas nama blog
- </head> : untuk menempatkan menu di bawah nama blog
- <head> : untuk menempatkan menu di atas nama blog
- </head> : untuk menempatkan menu di bawah nama blog
Step 6: Copy-paste kode di bawah ini dan letakkan tepat di atas kode <head> atau di bawah kode </head>.
*NB* Jika sebelumnya template kamu udah ada menunya, kamu bisa langsung menghapusnya dan menggantinya dengan kode di bawah ini tepat dimana kode menu template kamu sebelumnya. Hal ini sama dengan yang pernah saya alami.
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrvYLc_ieorR5WZQdB8_iUXY38vSgIJUpgrsHf73d03SDNCZ8s4fYGzIjQ8Lm9dKb5y71fD2BpOfFEBQncDNPMYrQYfn9MDt1FOhT7aej6DSEmw1bosMLul6kNpjg8VQApzwZNFsK9kho/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a href='http://agopoenya.blogspot.com/2012/08/daftar-isi-blog-agopoenya.html'>Index Blog</a></li>
<li><a class='trigger'>Download</a>
<ul>
<li><a href='http://agopoenya.blogspot.com/search/label/Antivirus'>Antivirus</a></li>
<li class='hr'/>
<li><a href='http://agopoenya.blogspot.com/search/label/Game'>Game</a></li>
<li class='hr'/>
<li><a href='http://agopoenya.blogspot.com/search/label/Software'>Software</a></li>
<li class='hr'/>
<li><a href='http://agopoenya.blogspot.com/search/label/MP3'>MP3</a></li>
</ul>
</li>
<li><a class='trigger'>Tools</a>
<ul>
<li><a href='http://agopoenya.blogspot.com/2012/08/converter-kode-html_4.html'>HTML Encoder</a></li>
<li class='hr'/>
<li><a href='http://agopoenya.blogspot.com/2012/08/hex-color-code-generator.html'>Kode Warna Generator</a></li>
<li class='hr'/>
<li><a href='http://agopoenya.blogspot.com/2012/08/cara-membuat-kotak-scroll-di-postingan.html'>Kotak Scroll</a></li>
<li class='hr'/>
<li><a href='http://agopoenya.blogspot.com/2012/08/cara-membuat-text-area-di-blog.html'>Text Area v.01</a></li>
<li class='hr'/>
<li><a href='http://agopoenya.blogspot.com/2012/08/cara-membuat-text-area-berwarna-v01.html'>Text Area v.02</a></li>
<li class='hr'/>
<li><a href='http://agopoenya.blogspot.com/2012/08/cara-membuat-text-area-di-blog-v03.html'>Text Area v.03</a></li>
<li class='hr'/>
<li><a href='http://agopoenya.blogspot.com/2012/11/macam-macam-teks-area.html'>Text Area v.04</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://agopoenya.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://agopoenya.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_LxmzeOaUBFIL05GSOd_MMhyphenhyphenH9ls8tNR6YH537ulbq9-6TBfCtuF1emnJUaz-1LNhBmq1DS1NyzIyGirG-h7uQNwqoZZkJ25mgrb2KQG2tz2p0Zz_lkQHiHvgWqEjmkucQn21C8vfUxk/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9I9AAamg1Pzd9u3rt_S80N2ppR7mThhOsyeY2vLp1TtD1G_5wjcvZ5c2gL6-eDAXIZ-wwDua7omAU3weu_q9H4UXduC0IPKsiWsGRw-pda1e1BbVALS8NBliC0TvOvT3F29OxzIKlYvw/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrvYLc_ieorR5WZQdB8_iUXY38vSgIJUpgrsHf73d03SDNCZ8s4fYGzIjQ8Lm9dKb5y71fD2BpOfFEBQncDNPMYrQYfn9MDt1FOhT7aej6DSEmw1bosMLul6kNpjg8VQApzwZNFsK9kho/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a href='http://agopoenya.blogspot.com/2012/08/daftar-isi-blog-agopoenya.html'>Index Blog</a></li>
<li><a class='trigger'>Download</a>
<ul>
<li><a href='http://agopoenya.blogspot.com/search/label/Antivirus'>Antivirus</a></li>
<li class='hr'/>
<li><a href='http://agopoenya.blogspot.com/search/label/Game'>Game</a></li>
<li class='hr'/>
<li><a href='http://agopoenya.blogspot.com/search/label/Software'>Software</a></li>
<li class='hr'/>
<li><a href='http://agopoenya.blogspot.com/search/label/MP3'>MP3</a></li>
</ul>
</li>
<li><a class='trigger'>Tools</a>
<ul>
<li><a href='http://agopoenya.blogspot.com/2012/08/converter-kode-html_4.html'>HTML Encoder</a></li>
<li class='hr'/>
<li><a href='http://agopoenya.blogspot.com/2012/08/hex-color-code-generator.html'>Kode Warna Generator</a></li>
<li class='hr'/>
<li><a href='http://agopoenya.blogspot.com/2012/08/cara-membuat-kotak-scroll-di-postingan.html'>Kotak Scroll</a></li>
<li class='hr'/>
<li><a href='http://agopoenya.blogspot.com/2012/08/cara-membuat-text-area-di-blog.html'>Text Area v.01</a></li>
<li class='hr'/>
<li><a href='http://agopoenya.blogspot.com/2012/08/cara-membuat-text-area-berwarna-v01.html'>Text Area v.02</a></li>
<li class='hr'/>
<li><a href='http://agopoenya.blogspot.com/2012/08/cara-membuat-text-area-di-blog-v03.html'>Text Area v.03</a></li>
<li class='hr'/>
<li><a href='http://agopoenya.blogspot.com/2012/11/macam-macam-teks-area.html'>Text Area v.04</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://agopoenya.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://agopoenya.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_LxmzeOaUBFIL05GSOd_MMhyphenhyphenH9ls8tNR6YH537ulbq9-6TBfCtuF1emnJUaz-1LNhBmq1DS1NyzIyGirG-h7uQNwqoZZkJ25mgrb2KQG2tz2p0Zz_lkQHiHvgWqEjmkucQn21C8vfUxk/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9I9AAamg1Pzd9u3rt_S80N2ppR7mThhOsyeY2vLp1TtD1G_5wjcvZ5c2gL6-eDAXIZ-wwDua7omAU3weu_q9H4UXduC0IPKsiWsGRw-pda1e1BbVALS8NBliC0TvOvT3F29OxzIKlYvw/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>
Keterangan:
- Kode berwarna merah adalah Url tujuan, silakan sobat ganti dengan Url pada blog sobat.
- Kode berwarna biru adalah kalimat yang tampil pada menu dropdown, Silakan sobat sesuaikan.
Step 7: SAVE
Selamat mencoba!! ^__^
Posted in: Tutorial Blog
0 Blogger