Judul : Membuat Menu Horisontal Dropdown di Blogspot
link : Membuat Menu Horisontal Dropdown di Blogspot
Membuat Menu Horisontal Dropdown di Blogspot
Menu horisontal dropdown adalah menu yang berderet ke samping dan bisa mempunyai submenu di dalamnya. Menu seperti ini lazim ada di semua program aplikasi dan website. Untuk lebih jelas, kita lihat contoh gambar berikut ini :
Gambar di atas diambil dari situs apa, pasti anda tau kan? Ga perlu saya jelasin lagi ... yang penting anda sudah mengerti gambar tadi adalah salah satu contoh menu horisontal dropdown.
Tidak semua template memiliki pengaturan yang sama. Perbedaan ini terutama terjadi pada template bawaan blogspot atau yang dibuat dengan "Perancang Template" dengan template yang kita download dari web penyedia template gratis.
Menu horisontal dropdown di blogspot sebaiknya dibuat secara manual. Meskipun pada "Perancang Template" yang disediakan juga sudah memungkinkan untuk membuatnya, yaitu menggunakan fitur laman, tapi tetap saja harus disunting secara manual agar dapat menjadi menu horisontal dropdown, karena fitur laman sebetulnya lebih pas untuk membuat halaman statis. Karena itulah, agar menu ini dapat kita gunakan sesuai keinginan, lebih baik kita membuatnya secara manual dari awal. Tata cara membuat menu ini saya browsing kemudian saya lakukan pengujian di beberapa template sebelum akhirnya saya posting untuk berbagi pengalaman.
Supaya tidak terlalu panjang lebar (emang dari tadi udah kepanjangan ... hehehe), mari kita sama-sama buat menu horisontal dropdown.
1. Setelah login, pilih Edit HTML di Tata Letak/Rancangan (Layout).
2. Cari kode seperti berikut ]]></b:skin> menggunakan tombol Ctrl + F (atau F3) di keyboard.
3. Expand Template Widget tidak perlu dicentang.
4. Ada baiknya kita backup/restore template untuk mengantisipasi hasil edit kita gagal. Cara mem-backup template yaitu klik tulisan Download Template Lengkap. Hasil download dapat kita upload kembali jika terjadi kesalahan edit.
5. Ketik/copy kode di bawah ini tepat di atas kode ]]></b:skin> :
#subnavbar {
background: #00CC00;
width: 859px;
height: 30px;
color: #0033CC;
margin: 0;
padding: 0;
}
#subnav {
margin: 0;
padding: 0;
}
#subnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#subnav li {
list-style: none;
margin: 0;
padding: 0;
}
#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #0000CC;
display: block;
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
margin: 0 5px 0 0;
padding: 6px 13px;
}
#subnav li a:hover, #subnav li a:active {
background: #00FF00;
color: #FFFFFF;
display: block;
text-decoration: none;
margin: 0 5px 0 0;
padding: 6px 13px;
}
#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #00CC00;
width: 140px;
float: none;
margin: 0;
padding: 6px 10px;
border-bottom: 1px solid #FFFF00;
border-left: 1px solid #FFFF00;
border-right: 1px solid #FFFF00;
}
#subnav li li a:hover, #subnav li li a:active {
background: #00FF00;
margin: 0;
padding: 6px 10px;
}
#subnav li {
float: left;
padding: 0;
}
#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#subnav li ul a {
width: 140px;
}
#subnav li ul ul {
margin: -25px 0 0 161px;
}
#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul,
#subnav li.sfhover ul ul ul {
left: -999em;
}
#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul,
#subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
left: auto;
}
#subnav li:hover, #subnav li.sfhover {
position: static;
}
color: #FFFFFF;
display: block;
text-decoration: none;
margin: 0 5px 0 0;
padding: 6px 13px;
}
#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #00CC00;
width: 140px;
float: none;
margin: 0;
padding: 6px 10px;
border-bottom: 1px solid #FFFF00;
border-left: 1px solid #FFFF00;
border-right: 1px solid #FFFF00;
}
#subnav li li a:hover, #subnav li li a:active {
background: #00FF00;
margin: 0;
padding: 6px 10px;
}
#subnav li {
float: left;
padding: 0;
}
#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#subnav li ul a {
width: 140px;
}
#subnav li ul ul {
margin: -25px 0 0 161px;
}
#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul,
#subnav li.sfhover ul ul ul {
left: -999em;
}
#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul,
#subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
left: auto;
}
#subnav li:hover, #subnav li.sfhover {
position: static;
}
Catatan : Nilai-nilai yang diwarnai jingga dapat diubah sesuai kebutuhan.
6. Cari kode berikut :
<b:widget id='Header1' locked='true' title=’Blog Anda (Header)' type='Header'/>
</b:section>
Catatan :
Yang utama diperhatikan adalah kode yang diwarnai biru, yang berwarna hijau
sesuai dengan nama blog anda.
sesuai dengan nama blog anda.
Ketik/copy kode berikut, tepat di bawah kode </b:section> :
<div id='subnavbar'>
<ul id='subnav'>
<li>
<a href='http://arasadeta.blogspot.com'>Beranda</a>
</li>
<li>
<a href='http://arasadeta.blogspot.com/2011/04/loading.html'>DAFTAR ISI</a>
</li>
<li>
<a href='#'>Hiburan</a>
<ul>
<li>
<a href='#'>Film</a>
</li>
<li>
<a href='#'>Musik</a>
<ul>
<li>
<a href='#'>Highlight</a>
</li>
<li>
<a href='#'>Highlight</a>
</li>
<li>
<a href='#'>Komposer</a>
</li>
<li>
<li>
<a href='#'>Penyanyi</a>
</li>
<li>
<a href='#'>Lirik Lagu</a>
</li>
<li>
<a href='#'>Tangga Lagu</a>
</li>
<li>
<a href='#'>Pustaka Lagu</a>
</li>
</ul>
</li>
<li>
<a href='#'>Selebriti</a>
</li>
</ul>
</li>
<li>
<a href='#'>Olah raga</a>
<ul>
<li>
<a href='#'>Bulutangkis</a>
</li>
<li>
<a href='#'>Sepak bola</a>
</li>
<li>
<a href='#'>Tenis</a>
</li>
</ul>
</li>
<li>
<a href='#'>Ragam</a>
<ul>
<li>
<a href='#'>Keislaman</a>
</li>
<li>
<a href='#'>Kesehatan</a>
</li>
<li>
<a href='#'>Fenomena</a>
<ul>
<li>
<a href='#'>Alam</a>
</li>
<li>
<a href='#'>Manusia</a>
</li>
</ul>
</li>
<li>
<a href='#'>Peristiwa</a>
<ul>
<li>
<a href='#'>Dekade 2000-an</a>
</li>
<li>
<a href='#'>Dekade '90-an</a>
</li>
<li>
<a href='#'>Dekade '80-an</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>Komputer</a>
<ul>
<li>
<a href='#'>Hardware</a>
</li>
<li>
<a href='#'>Software</a>
</li>
</ul>
</li>
<li>
<a href='#'>Tutorial</a>
<ul>
<li>
<a href='#'>Blog</a>
<ul>
<li>
<a href='#'>Blog</a>
</li>
<li>
<a href='#'>Jejaring Sosial</a>
</li>
</ul>
</li>
<li>
<a href='#'>Jejaring Sosial</a>
</li>
</ul>
</li>
</ul>
</div>
7. Klik tombol “Simpan Template”, tapi kalau masih ragu, baiknya klik dulu
"Pratinjau" baru kemudian "Simpan Template" jika sudah yakin.
"Pratinjau" baru kemudian "Simpan Template" jika sudah yakin.
8. Tentunya akan tampak menu-menu seperti di blog saya, untuk itu anda harus
segera menyunting menu sesuai keinginan dan kebutuhan blog yang anda buat.
segera menyunting menu sesuai keinginan dan kebutuhan blog yang anda buat.
Demikianlah Artikel Membuat Menu Horisontal Dropdown di Blogspot
Sekianlah artikel Membuat Menu Horisontal Dropdown di Blogspot kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Membuat Menu Horisontal Dropdown di Blogspot dengan alamat link https://persibcirebons.blogspot.com/2011/07/membuat-menu-horisontal-dropdown-di.html
0 Response to "Membuat Menu Horisontal Dropdown di Blogspot"
Posting Komentar