September 28, 2013

cara membuat Menu Drop Down di Blogspot

kali ini bagi bagi data akan berbagi tips bagaimana cara membuat menu dropdown dengan benar memang sih trik ini dapat dari teman lewat chattingan Facebook, apakah salah kalau saya berbagi?

apa sih menu drop down  itu? menu drop semacam dengan laman dan bisa disebut multi laman karna bisa memasukkan laman satu ke laman lain

inilah langkah - langkahnya
1. login ke blogger.com 
2. pilih template
3. klik edit html
4. cari kode ini ]]></b:skin>
5. copy kode dibah ini :

{
height:33px;
width:1000px;
margin:0 auto;
background:url(http://1.bp.blogspot.com/.../HLNb-3kfkec/s1600/2.gif) rep
eat-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(http://4.bp.blogspot.com/.../zxCSk-6MwLI/catmenu.jpg) 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(http://3.bp.blogspot.com/.../6D7APyygWZA/catmenuhov.jpg) 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(http://3.bp.blogspot.com/.../6D7APyygWZA/catmenuhov.jpg) 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 dicopy lalu paste kan kode tersebut diatas kode ]]></b:skin>


6. lalu copy kode dibawah ini

<div id='catmenucontainer'>
<div id='catmenu'>

<ul>
<li><a href='http://NAMA LINK BLOG ANDA/'>Home</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-4</a></li>
</ul>

</div>
</div>

<div class='clear'/>


7. lalu cari kode ini <div class='header-outer'> bila ingin di header (kepala) atau kode ini <div class='tabs-outer'> bila ingin ditabs (atas post) dan pasang diatasnya
8. ganti http://NAMA LINK BLOG ANDA/ dengan link blog kalian
9. ganti Your-Link-Here dengan link blog yang kalian inginkan
10. ganti Link-Name-1 dan seterusnya dengan judul yang kalian mau
11. kode title='Link-Title' berguna sebagai penjelasan saja jadi boleh dihapus
12. bila semua sudah selesai dilaksanakan kalian sudah berhasil membuat menu drop down dan bisa kalian cek di blog

sekian postingan artikel dari bagi bagi data semoga bermanfaat :)    

8 comments:

Admin said...

http://pusat-sekolah.blogspot.com/

Zainal Ma'ruf said...

! Lapor !

Kunjungan + Komentar SUKSES

http://1x-knight1.blogspot.com/

Pekalongan Sketchers said...

Blogwalking

Reza Putra Andana said...

Wow bagus sekali artikel agan..

comment balik gan :) blogwalking/silahturahmi
http://www.rez4rt.blogspot.com

Ficri Pebriyana said...

Mantap sob, kapan-kapan saya coba...
thanks...

tempatnya download software, game and windows gratis said...

mksih infonya gan bgus baget

Samzz Dwdu said...

ini artikel yang banyak dicari para blogger, mantap..

seomob said...

mantap!!!

Twitter