Sabtu, 15 Desember 2012

Membuat Menu Drop Down Dibawah dan Diatas Header

Diposting oleh dw kompyang di 00.15

Cara Mudah Membuat Menu Drop Down Dibawah dan Diatas Header


Kali ini saya akan berbagi ilmu pelajaran lagi kepada teman-teman sekalian
Dibawah ini contoh menu drop down nya
















Sekarang ayo teman-teman ikuti langkah demi langkah yang haru dilakukan dibawah ini:
  • Pertama teman login ke blogger
  • Selanjutnya pilih Rancangan/Template dan klik cadangkan/pulihkan kemudian unduh template, hal ini dimaksutkan untuk mengamankan template teman apabila nanti terjadi kesalahan pada saat meng-edit template.
  • Nah..setelah selesai unduh, barulah sekarang teman bisa pilih rancangan/template kembali kemudian klik edit html.
  • Untuk selanjutnya, centang Expand Template Widget, didalam edit html, coba teman cari code   ]]></b:skin> (untuk dropdown dibawah header) atau <b:skin><![CDATA[  (untuk dropdown diatas header), agar lebih cepat mencarinya, coba teman tekan ctrl+f kemudian paste-kan code diatas.
  • Jika sudah ketemu, sekarang saatnya teman copas code dibawah ini dan letakkan tepat diatas code        ]]></b:skin> (untuk dropdown dibawah header) atau  <b:skin><![CDATA[  (untuk dropdown diatas header)
Klik untuk melihat
#catmenucontainer{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9MUIMnzb-J8lTymkgY9ZYwlbnpQrOQVHfXFRzcPXdBeyhKJ_Kw3jhDhAndfGNE8tZm-qaZ7YxpcHmHI7oXnOHoEIthN1ar_ndkq-HyGz998DXZIQgdnwd3bPb8xz0llu6JtMdS7Uvv8kg/s1600/2.gif) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}
#catmenu{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0LX5uI_zl9hfL9-JGQA_qfI5B7XAE9U59gb4L0siJbW446QCcdJRBJ3auDMEu5-hpNAfmH2ZKVZ0gDhxm-PCN922btaC6My_tI2jAaNa8oSlM0-OCbEmZytjNWPCV7HjxjkTekWTKhgrF/) repeat-x;
height:33px;
}

#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}

#catmenu li a:hover, #catmenu li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBnrS_bMVOUP79djZ95CsFqo8O3IhL7an5jHrhO3wb2woVHad-Ui4eadY4gUVLtKvpjmMRkI-n8NEuebcdsOoIxtPdCNjyaiiJsPCAvadLACR_-bHxv-zLrFud4D3JghqqU7LQqpMim3wd/) repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}

#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;

}

#catmenu li li a:hover, #catmenu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBnrS_bMVOUP79djZ95CsFqo8O3IhL7an5jHrhO3wb2woVHad-Ui4eadY4gUVLtKvpjmMRkI-n8NEuebcdsOoIxtPdCNjyaiiJsPCAvadLACR_-bHxv-zLrFud4D3JghqqU7LQqpMim3wd/) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}

#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}

#catmenu li li {
}

#catmenu li ul a {
width: 140px;
}

#catmenu li ul a:hover, #catmenu li ul a:active {
}

#catmenu li ul ul {
margin: -34px 0 0 170px;
}

#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
left: -999em;
}

#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
left: auto;
}

#catmenu li:hover, #catmenu li.sfhover {
position: static;
}

  • Setelah selesai copas code diatas, sekarang masih di edit html, sekarang teman cari code  <div id='content-wrapper'>  (untuk dropdown dibawah header)  atau  <body>  untuk dropdown diatas header) dengan cara tekan ctrl+f dan copas code tadi.
  • Jika sudah ketemu copas code yang ada dibawah ini tepat dibawah code   <div id='content-wrapper'>  (untuk dropdown dibawah header)  atau  <body>  untuk dropdown diatas header). "ingat!!! setiap template berbeda-beda, jadi bila tidak ketemu, cari code yang mirip dengan code diatas"
<div id="catmenucontainer">
<div id="catmenu">

<ul>
<li><a href="http://link%20url%20teman/">Home</a></li>
<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-1</a>
<ul class="children">
<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-1-1</a></li>
<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-1-2</a></li>
<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-1-3</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-2</a>
<ul class="children">
<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-2-1</a></li>
<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-2-2</a></li>
<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-2-2</a></li>
<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-2-3</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-3</a>
<ul class="children">
<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-3-1</a></li>
<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-3-2</a></li>
<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-3-3</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-4</a></li>
<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-5</a>
<ul class="children">
<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-5-1</a></li>
<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-5-2</a></li>
<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-5-3</a></li>
<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-5-4</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-6</a>
<ul class="children">
<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-6-1</a></li>
<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-6-2</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-7</a></li>
<li><a href="http://www.blogger.com/Your-Link-Here" title="Link-Title">Link-Name-8</a></li>
</ul>

<div style="float: right; margin-right: 20px;">
<a href="http://freedom-mediafire.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmBDutO80lS4Gh_UvwOj6YbugBwsSh1dYA_yZR97MBm8nVpNlXvulm85dOEvaMV9OIEP4r4vatZ1GE6WLkGDpxMKii5ldkV_M4LImkD3dHC0ptc-_UQo2CbSOR_wOjJi8hFI65pTcRVQ3v/s320/favicon+32x32.ico" /></a></div>

</div>
</div>

<div class="clear">
  • Selanjutnya simpan templatenya dan lihat hasilnya.
Label: | 0 komentar

0 komentar:

Langganan: Posting Komentar (Atom)
Blogger Template by Clairvo