Dropdown Menu Pada Blog

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

http://eltelu.blogspot.com/2012/08/cara-menambahkan-sub-menu-pull-down.html

 

incoming tag search; dropdown pada blog; cara membuat menu dropdown; membuat menu cantik; membuat menu dropdown;