MataUang Kuno

Minggu yang lalu, seseorang bertanya kepada saya tentang cara membuat dropdown menu navigasi dengan sub menu seperti pada blog ini. Untuk membuat dropdown menu navigasi dengan sub menu pada template Anda tidak terlalu sulit, tetapi karena setiap template berbeda, apakah itu adalah ukuran dari template, teknik Widget menempatkan, atau apa pun, Anda akan memerlukan sedikit penyesuaian pada kode atau script diberikan. Untuk membuatnya mudah, saya menggunakan kode sumber saya sendiri dalam tutorial ini. Anda hanya perlu mengikuti uraian di bawah ini dan membuat penyesuaian sedikit:

1. Login ke blogger dengan ID anda
2. Klik Layout
3. Klik Edit HTML
4. Sebelum mengedit template Anda, saya sarankan untuk men-download terlebih dahulu untuk mengantisipasi jika Anda membuat kesalahan ketika mengedit kode template Anda.
5....Cari Skrip :]]></b:skin> dan tambahkan kode Css. Anda mungkin harus menyesuaikan lebar, warna, dan gambar url dengan Anda, karena karakter setiap template berbeda.

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

width: 980px;
height: 35px;
background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYBkJzQ0xIS6gZjGxPdR_TqVD-OEzAzRz2tdMV27i7NHWBntASfnoykQ6jDsAMeO_I-rai5nC_s3IzHCYtRGj7ovbZ7Spks70BKOSGzwPYCvzbAqkTewR14U5Fq7TnN5syGgME3l3aQcEa/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/AVvXsEjYBkJzQ0xIS6gZjGxPdR_TqVD-OEzAzRz2tdMV27i7NHWBntASfnoykQ6jDsAMeO_I-rai5nC_s3IzHCYtRGj7ovbZ7Spks70BKOSGzwPYCvzbAqkTewR14U5Fq7TnN5syGgME3l3aQcEa/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;
}

6. Setelah itu, cari kode ini :

<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>

Dan menambahkan kode di bawah ini setelah kode di atas:
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href=''>Home</a></li>
<li><a href=''>News</a></li>
<li><a href=''>Software</a>
<ul>
<li><a href=''>Antivirus</a></li>
<li><a href=''>Audio and Video</a></li>
<li><a href=''>Desktop Enhancements</a></li>
<li><a href=''>Graphic and Web Design</a></li>
<li><a href=''>Internet</a>
<ul>
<li><a href=''>Dial-Up n Connectivity</a></li>
<li><a href=''>Security and Spyware</a></li>
<li><a href=''>Utilities</a></li>
</ul>
</li>
<li><a href=''>System Tools</a></li>
<li><a href=''>Others</a></li>
</ul>
</li>
<li><a href=''>Template</a>
<ul>
<li><a href=''>New Blogger Template</a></li>
<li><a href=''>Classic Blogger Template</a></li>
</ul>
</li>
<li><a href=''>Tips and Trick</a></li>
</ul>
</div>
</div>
<!-- end navbar -->

7. Klik Preview and Save Template apabila denda kerjanya. Itu saja.

Jangan lupa untuk mengubah nama dan link Anda dalam codes. Saya harap Anda menu akan seperti ini. Jika Anda memiliki pertanyaan tentang hal itu, hanya meninggalkan komentar di bawah ini.