Drop Down Menu Blogger

Sebelum lanjut, silahkan test “Bar Navigasi” di atas!  Mau coba? Silahkan jalankan langkah – langkah berikut : 

1. Login ke blogger – Layout – Edit HTML
2. Sebaiknya Backup terlebih dahulu template anda, siapa tahu terjadi hal yang tidak diinginkan.
3. Cari kode ]]></b:skin>
4. Copy code berikut tepat di atas kode tersebut.

/* ----- NAVBAR MENU ----- */
#NavbarMenu {

width: 980px;
height: 35px;
background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUH-aRfr-cPZI7Fo72Um2MSjq8NhyphenhyphencqXPZmqPPEDK22OOCgNec5uIdivLtS6mNms2xLH4Cba9UQoFF52NQuZv9jMb_NLLdzjQZvi5Ebx-seU8v013aF4AW-YNIg9hpq714KeG2evhJ0NOe/s800/navbar.gif) repeat-x top;
color: #3D81EE
margin: 0 auto 0;
padding: 0;
font: bold 11px Arial, Tahoma, Verdana;
border-top: 1px solid #AFAFAF;
border-bottom: 1px solid #FFFFFF;
}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #3D81EE;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 15px Georgia, Times New Roman;
}
#nav li a:hover, #nav li a:active {
background:#99C9FF;
color: #3D81EE;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #3D81EE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUH-aRfr-cPZI7Fo72Um2MSjq8NhyphenhyphencqXPZmqPPEDK22OOCgNec5uIdivLtS6mNms2xLH4Cba9UQoFF52NQuZv9jMb_NLLdzjQZvi5Ebx-seU8v013aF4AW-YNIg9hpq714KeG2evhJ0NOe/s800/navbar.gif) repeat-x top;
width: 150px;
color: #000;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #99C9FF;
border-left: 1px solid #99C9FF;
border-right: 1px solid #99C9FF;
font: normal 14px Georgia, Times New Roman;
}

#nav li li a:hover, #nav li li a:active {
background: #99C9FF;
color: #3D81EE;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

5. Cari kode seperti di bawah ini atau  yang menyerupai…

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>
</b:section>
</div>

Jika pada template anda sudah terdapat bar navigasi, penambahan kode berikut ini akan membuat bar navigasi anda menjadi dobel. Selain mengapusnya, paling gampang adalah dengan mengalihkan referensi file CSS bar navigasi yang lama menjadi seperti ini : <div id=''>. Otomatis bar navigasi yang lama akan hilang.

6. Copy kode di berikut ini tepat di bawah kode di atas (no. 5)

Silahkan ganti text warna merah dengan URL link yang anda pasang dan text warna kuning ganti dengan judul link.

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href=‘http:/URL link.com’>Test</a></li>
<li><a href=‘http:/URL link.com’>Test</a>
<ul>
<li><a href=‘http:/URL link.com’>Test</a></li>
<li><a href=‘http:/URL link.com’>Test</a></li>
<li><a href=‘http:/URL link.com’>Test</a></li>
<li><a href=‘http:/URL link.com’>Test</a></li>
<li><a href='#'>Internet</a>
<ul>
<li><a href=‘http:/URL link.com’>Test</a></li>
<li><a href=‘http:/URL link.com’>Test</a></li>
<li><a href=‘http:/URL link.com’>Test</a></li>
</ul>
</li>
<li><a href=‘http:/URL link.com’>Test</a></li>
<li><a href=‘http:/URL link.com’>Test</a></li>
</ul>
</li>
<li><a href=‘http:/URL link.com’>Test</a>
<ul>
<li><a href=‘http:/URL link.com’>Test</a></li>
<li><a href=‘http:/URL link.com’>Test</a></li>
</ul>
</li>
<li><a href=‘http:/URL link.com’>Test</a></li>
</ul>
</div>

</div> <!-- end navbar -->




Terima kasih telah berkunjung. Info: Daftar Satellite dan Channel bisa di lihat disini Update harga Receiver dan lainnya bisa dicek disini

Terkait...

On Facebook