Cara
Membuat Menu Dropdown pada Blog
Sahabat Pendidikan, Pasti di antara kita ada yang pernah mengunjungi
beberapa blog dan melihat tampilan menu pada blog yang dropdown seperti gambar
di bawah ini.
Waw keren juga tampilannya. Saya sempat terpikir bagaimana cara membuat
tampilan menu seperti itu. Penasaran juga sih, lalu akhirnya saya putuskan
untuk membuat menu yang seperti itu juga.
Saya pun mencoba beberapa alternatif. Mulai dari edit template, edit
java script sampai stress juga. Lalu saya putuskan untuk bertanya sama om saya
di internet. Om google gitu loh. Setelah googling ke kiri dan ke kanan gak
ketemu juga caranya. Jadi penasaran deh. Sempat ada sih yang ketemu tapi karena
petunjuk yang diberikan salah jadinya tidak berhasil. Menyerah bukan pilihan
saya. Coba lagi sampai ketemu dan akhirnya saya ketemu di eltelu.blogspot.com walaupun awalnya sempat gagal tetapi dicoba
lagi dan akhirnya berhasil. Sekarang saya ingin berbagi caranya dengan dengan
Sahabat Pendidikan. Cek it out.
Dropdown menu digunakan untuk menghemat tampilan menu pada blog. Selain
itu, dapat digunakan untuk mengelompokkan menu dalam satu kategori yang
hasilnya dapat mempercantik tampilan menu pada blog itu sendiri. Walaupun cara
untuk membuat tampilan menu ini terbilang susah bagi blogger pemula tetapi
bukan hal yang tidak mungkin untuk dilakukan. Dengan sedikit bertanya dan
berusaha akan berhasil dlakukan. Berikut cara yang bisa dilakukan.
1.
Buka www.blogger.com,
buka akun blogger sahabat lalu
langsung menuju dashboard blog
sahabat. Bagi yang belum punya blog daftar dulu dong;
2.
Pilih menu Laman, pilih tab “Tab Atas” lalu klik pilihan
“Tab Atas” kemudian “Simpan Setelan”, perhatikan gambar di bawah;
3.
Pilih menu Template,
klik “Edit HTML” tunggu hingga
muncul “Template > Edit HTML”
klik lanjutkan;
Tunggu beberapa saat hingga muncul
4.
Centang “expand
template widget” lalu tunggu beberapa saat;
5.
Tekan “Ctrl+F” untuk mencari ]]></b:skin>. Setelah
ketemu copy dan pastekan script berikut di baris atasnya:
.tabs-inner .widget li ul {
z-index: 100; position: absolute;
left: -999em; height: auto; margin: 0; padding: 0;
border: 1px solid #999999;
}
.tabs-inner
.widget
li ul, .tabs-inner .widget li ul a,
.tabs-inner
.widget
li ul li:first-child a {
-moz-border-radius: 0px; -webkit-border-radius: 0px;
-goog-ms-border-radius: 0px; border-radius: 0px;
}
.tabs-inner
.widget
li:hover ul, .tabs-inner .widget li.sfhover ul {
left: auto;
}
.tabs-inner
.widget
li li a:hover, .tabs-inner .widget li li a:active {
color: #ffffff; background: rgb(51, 102, 153);
}
.tabs-inner
.widget
li ul a {
display: block; padding-left: 1.25em; padding-right: 1.25em;
margin-left: 0px; margin-right: 0px; border: none;
color: #000000; background: rgb(243, 244, 246);
}
.tabs-inner
.widget
li ul, .tabs-inner .widget li ul a {
width: 220px;
}
Pastekan di sini!
6.
Berikutnya cari script
"<li><a
expr:href='data:link.href'><data:link.title/></a></li> "
tetapi jangan diedit. Kemudian lihat script </b:loop> dua baris di bawahnya.
7.
Kemudian pastekan script berikut di bawahnya!
<li><a
href='#'>Sains</a>
<ul>
<li><a
href='URL'>Manusia</a></li>
<li><a
href='URL'>Flora</a></li>
<li><a
href='URL'>Fauna</a></li>
</ul>
</li>
Untuk mudahnya lihat gambar
8.
Terakhir klik “Simpan Template”
Selesai. Sekarang lihat blog Sahabat.
Ada beberapa penjelasan yang bisa sahabat perhatikan:
1.
Pada script pertama 1px solid #99999 digunakan untuk
mengatur setelan garis,
2.
Pada script pertama color: #000000; background:
rgb(243, 244, 246); digunakan untuk warna default teks dan background,
3.
Pada script pertama color: #ffffff; background :
rgb(51, 102, 153); digunakan untuk mengatur warna teks dan background ketika
disorot,
4.
Pada script pertama Width: 220px; digunakan untuk
mengatur lebar sub menu,
5.
Pada script kedua ganti “Sains” dengan nama menu yang
sahabat inginkan,
6.
Pada script kedua ganti “manusia” atau “flora” atau “fauna”
dengan submenu yang sahabat inginkan.
Semoga artikel ini bisa membantu sahabat pendidikan dalam menambah
wawasan untuk berkreasi dalam dunia blog.
Salam Persahabatan.
Referensi bacaan (bukan Hacep=Hasil Copy Edit Paste):
incoming tag search; dropdown pada
blog; cara membuat menu dropdown; membuat menu cantik; membuat menu dropdown;
