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://nagadygta26.blogspot.com/'>Home</a>
</li>
<li>
<a href='
http://nagadygta26.blogspot.com/search/label/Biology '>Biology</a>
</li>
<li>
<a href='
http://nagadygta26.blogspot.com/search/label/My%20Blog '>Blog</a>
<ul>
<li><a href='
http://nagadygta26.blogspot.com/2012/11/tutorial-buat-blog.html '>Tutorial
Blog</a></li>
<li><a href='
http://nagadygta26.blogspot.com/search/label/Widget%20Blog '>Widget
Blog</a></li>
<li><a href='
http://nagadygta26.blogspot.com/search/label/Artikel%20Blog '>Artikel About
Blog</a></li>
</ul></li>
<li>
<a href='
http://nagadygta26.blogspot.com/search/label/My%20Blog '>Contact
Me</a>
<ul>
<li><a href=' http://www.facebook.com/fandydorksinaga'>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://nagadygta26.blogspot.com/search/label/Corel%20Draw'>Corel
Draw</a>
<ul>
<li><a
href='http://nagadygta26.blogspot.com/search/label/Materi%20Corel%20Draw'>Materi</a></li>
<li><a href='
http://nagadygta26.blogspot.com/search/label/soal%20corel%20draw'>Soal</a></li></ul>
<li><a href='
http://nagadygta26.blogspot.com/search/label/Microsoft%20Excel'>Microsoft
Excel</a>
<ul>
<li><a
href='http://nagadygta26.blogspot.com/search/label/materi%20microsoft%20excel'>Materi</a></li>
<li><a href='
http://nagadygta26.blogspot.com/search/label/soal%20microsoft%20excel'>Soal</a></li></ul>
<li><a href='
http://nagadygta26.blogspot.com/search/label/Microsoft%20Power%20Point'>Microsoft
Power Point</a>
<ul>
<li><a href='
http://nagadygta26.blogspot.com/search/label/Materi%20Power%20Point'>Materi</a></li>
<li><a href='
http://nagadygta26.blogspot.com/search/label/soal%20power%20point'>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),
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
hy...ini adalah tulisan pertama saya... terima kasih telah mengunjungi blok saya.