Buat menu drop down
Berikut tutorialnya
Sebuah
menu drop down diperlukan ketika anda memiliki konten yang cukup banyak.
Ini dimaksudkan agar anda lebih mudah mengaturnya dan pengunjung
blog andapun lebih leluasa memanfaatkannya. Dengan menu navigasi yang teratur
dan cantik (drop down menu), akan membuat pengunjung blog menjadi lebih betah
berlama-lama di blog anda. Berikut langkah-langkah yang harus dilakukan untuk
membuat menu drop down:
1.
1. Menuju ke menu Blogger
> Tata letak > Add Gadget
2.
2. Pilih Widget HTML/JavaScript,
taruh widget tepat dibawah
<div id='mbtnavbar'>
<ul id='mbtnav'>
<li><a href='http://rysnawati3.blogspot.com/'>Home</a>
</li>
<li><a href=' http:// rysnawati3.blogspot.com/search/label/Biology
'>Biology</a>
</li>
<li> <a href=' http:// rysnawati3.blogspot.com/search/label/My%20Blog
'>Blog</a>
<ul>
<li><a
href=' http:// rysnawati3.blogspot.com/2012/11/tutorial-buat-blog.html
'>Tutorial Blog</a></li>
<li><a
href=' http://rysnawati3.blogspot.com/search/label/Widget%20Blog '>Widget
Blog</a></li>
<li><a href=' http:// rysnawati3.blogspot.com/search/label/Artikel%20Blog
'>Artikel About Blog</a></li>
</ul></li>
<li>
<a href=' http://
rysnawati3.blogspot.com/search/label/My%20Blog '>Contact Me</a>
<ul>
<li><a href='
http://www.facebook.com/putry.rixectly'>Facebook</a></li>
<li><a
href=’https://twitter.com/ry_putry'>Twitter</a></li>
<li><a
href=' https://mail.google.com/mail/?shva=1#inbox
'>Gmail</a></li>
</ul></li>
<li>
<a href=' #
'>Bahan Ajar TIK</a>
<ul>
<li><a href='
http://rysnawati3.blogspot.com/search/label/Corel%20Draw'>Corel
Draw</a>
<ul>
<li><a href='http://rysnawati3.blogspot.com/search/label/Materi%20Corel%20Draw
'>Materi</a></li>
<li><a href='
http://rysnawati3.blogspot.com/search/label/soal%20corel%20draw
'>Soal</a></li></ul>
<li><a href='
http://rysnawati3.blogspot.com/search/label/Microsoft%20Excel'>Microsoft
Excel</a>
<ul>
<li><a
href='http://rysnawati3.blogspot.com/search/label/materi%20excel'
>Materi</a></li>
<li><a href='
http://rysnawati3.blogspot.com/search/label/soal%20excel
'>Soal</a></li></ul>
<li><a href=''http://rysnawati3.blogspot.com/2012/11/materi-power-point_8117.html'>Microsoft
Power Point</a>
<ul>
<li><a
href='http://rysnawati3.blogspot.com/search/label/Materi%20%20Power%20Point'
>Materi</a></li>
<li><a href='
http://rysnawati3.blogspot.com/2012/11/soalpower-point.html
'>Soal</a></li></ul>
</li></li></li></ul></li>
</ul></div>
3.
3. Sekarang
menuju menu Design/tata letak pada dashboard blog anda dan klik > Edit
HTML
4.
4. Jangan lupa untuk
mem-Backup template anda dan cari kode berikut (gunakan CTRL+F),
]]></b:skin>
5. 5. Tepat diatas kode tersebut, paste kode
dibawah ini,
/*----- MBT Drop Down Menu ----*/
#mbtnavbar
{
background: #060505;
width: 960px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#mbtnav
{
margin: 0;
padding: 0;
}
#mbtnav
ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav
li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:35px;
}
#mbtnav
li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#mbtnav
li a:hover, #mbtnav li a:active {
background: #BF0100;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#mbtnav
li {
float: left;
padding: 0;
}
#mbtnav
li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbtnav
li ul a {
width: 140px;
}
#mbtnav
li ul ul {
margin: -25px 0 0 161px;
}
#mbtnav
li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav
li.sfhover ul ul ul {
left: -999em;
}
#mbtnav
li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav
li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnav
li:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav
li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #BF0100;
width: 120px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px
dotted #333;
}
#mbtnav
li li a:hover, #mbtnavli li a:active {
background: #060505;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
0 komentar:
Posting Komentar