Membuat tampilan menu pilihan kebawah secara otomatis (Menu Dropdown)

Menu dropdown merupakan menu yang memiliki beberapa pilihan tersembunyi dan jika menu utama disentuh dengan kunsor maka akan menampilkan beberapa pilihan dibawahnya. Sebagai contoh bisa anda lihat dengan klik disini dan coba anda arahkan kunsor anda ke beberapa menu pilihan diatasnya.
Gimana, apakah anda tertarik untuk memasangnya di blog anda?
Jika iya, maka anda bisa melanjutkan pembacaan tutorial ini sampai selesai.
Anda sudah siap? Yang pastinya sudah siap donk, heheheee...!
Oke, lanjutkan lagi bacanya ya!
Ikuti langkah-langkah berikut ini.

1.        Pastikan anda sudah login ke blogger, jika belum maka klik saja disini.
2.        Pilih rancangan pada template blog yang anda inginkan.
3.        Pilih edit HTML
4.        Beri tanda centang pada kotak disamping tulisan “Expand Template Widget”

5.        Jika sudah, maka cari kode </head>
6.   Jika anda sudah menemukannya, maka tulis atau copy pastekan kode berikut ini tepat diatas kode pada langkah ke 5.

<style type='text/css'>
#catmenucontainer{
height:29px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin_oX6q_Gzj8p1CmxT1XkGlKSYq3-dMFjzBost0F5nC5zOV5d6pQioGJI8F9CVGcFN_5lgZa42oqqrhOBN4NbR1qlX63zpzIir733X1S5Jg0XP8JDH54iUECoORxhqb2qqDPF-dEc2KLUq/) repeat-x;
display:block;
padding:0px 0 0px 0px;
font: 14px &quot;Century gothic&quot;,verdana, Arial, sans-serif;
font-weight:normal;
border-top:1px solid #686D6F;
}

#catmenu ,#catmenu ul {
margin: 0px 5px;
padding: 0px;
list-style: none;
height:29px;
}

#catmenu  a {
color: #999;
display: block;
font-weight: normal;
padding: 4px 10px 6px 10px;
}

#catmenu  a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ2Gbz60Jl0zigBv7VzxsnTiPdWjmax0eUUNBFeZUNB9Hw4G7PQMp_hE1u0NETMtc6GN8mE5aoh1WRvcYrrXhiB2Mo1eKvdf5bqYpOHaRdgHxlF-ao7_kRQFLvEKQmGGLkH216DWGlIlYb/) repeat-x;
color: #fff;
display: block;
text-decoration: none;
}

#catmenu  li {
float: left;
margin: 0px;
padding: 0px;
}

#catmenu  li li {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 130px;
}

#catmenu  li li a, #catmenu  li li a:link, #catmenu  li li a:visited {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin_oX6q_Gzj8p1CmxT1XkGlKSYq3-dMFjzBost0F5nC5zOV5d6pQioGJI8F9CVGcFN_5lgZa42oqqrhOBN4NbR1qlX63zpzIir733X1S5Jg0XP8JDH54iUECoORxhqb2qqDPF-dEc2KLUq/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#E8EBEE;
border-bottom:1px solid #2C3133;
}

#catmenu  li li a:hover, #catmenu  li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ2Gbz60Jl0zigBv7VzxsnTiPdWjmax0eUUNBFeZUNB9Hw4G7PQMp_hE1u0NETMtc6GN8mE5aoh1WRvcYrrXhiB2Mo1eKvdf5bqYpOHaRdgHxlF-ao7_kRQFLvEKQmGGLkH216DWGlIlYb/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;
border-bottom:1px solid #2C3133;
}

#catmenu  li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}

#catmenu  li:hover ul {
left: auto;
display: block;
}

#catmenu  li:hover ul, #catmenu li.sfhover ul {
left: auto;
}
</style>

7.        Klik “simpan template”
8.        Jika sudah tersimpan, maka kita menuju “elemen laman”
9.        Klik salah satu “tambah gadget” dimanapun yang anda suka

10.    Setelah itu akan muncul beberapa pilihan gadget, tetapi yang harus anda pilih adalah HTML/JavaScript

11.    Copy paste atau tulis kode berikut ini kedalam gadget yang anda pilih pada langkah 10

<div id='catmenucontainer'>
<div id='catmenu'>
<ul>

<li><a href='LINK 1.0'>MENU 1</a></li>

<li><a href='LINK 2.0'>MENU 2</a>
<ul class='children'>
<li><a href='LINK 2.1'>pilihan 1 menu 2</a></li>
<li><a href='LINK 2.2'>pilihan 2 menu 2</a></li>
<li><a href='LINK 2.3'>pilihan 3 menu 2</a></li>
</ul>
</li>

<li><a href='LINK 3.0'>MENU 3</a>
<ul class='children'>
<li><a href='LINK 3.1'>pilihan 1 menu 3</a></li>
<li><a href='LINK 3.2'>pilihan 2 menu 3</a></li>
<li><a href='LINK 3.3'>pilihan 3 menu 3</a></li>
<li><a href='LINK 3.4'>pilihan 4 menu 3</a></li>
</ul>
</li>

<li><a href='LINK 4.0'>MENU 4</a>
<ul class='children'>
<li><a href='LINK 4.1'>pilihan 1 menu 4</a></li>
</ul>
</li>

<li><a href='LINK 5.0'>MENU 5</a></li>

</ul>
</div>
</div>

Keterangan :
·           LINK_ : ganti dengan link pilihan anda, jika tidak, maka harus diganti dengan tanda # (pagar),
contoh :  
<a href='#'>
·           MENU_ : ganti dengan nama menu pilihan anda
·           Pilihan_ menu_ : ganti dengan nama pilihan yang sembunyi pada menu utama.
·           Jika anda ingin menampilkan link pada halaman browser baru, maka tambah kode target=’_blank’
contoh :
<a href='http://namabloganda.blogspot.com/' target=’_blank’>

12.    Jika semua proses sudah selesai, maka langsung saja klik “simpan”.
13.    Lihat hasilnya dengan klik “lihat blog”
14.    Selesai

Tambahan :
Jika anda tidak suka dengan tampilan gambar latar belakang menunya, maka anda bisa mengubahnya dengan mengganti url pada langkah 6 berikut ini dengan url gambar sesuai keinginan anda, tetapi dengan syarat gambar harus berukuran lebar 7 piksel dan panjang 29 piksel.
a.         Tampilan dasar
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin_oX6q_Gzj8p1CmxT1XkGlKSYq3-dMFjzBost0F5nC5zOV5d6pQioGJI8F9CVGcFN_5lgZa42oqqrhOBN4NbR1qlX63zpzIir733X1S5Jg0XP8JDH54iUECoORxhqb2qqDPF-dEc2KLUq/
b.        Tampilan ketika kunsor diatas menu pilihan
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ2Gbz60Jl0zigBv7VzxsnTiPdWjmax0eUUNBFeZUNB9Hw4G7PQMp_hE1u0NETMtc6GN8mE5aoh1WRvcYrrXhiB2Mo1eKvdf5bqYpOHaRdgHxlF-ao7_kRQFLvEKQmGGLkH216DWGlIlYb/

Mungkin hanya itu saja yang bisa saya sampaikan, jika ada yang belum jelas atau kurang dimengerti bisa anda tanyakan langsung pada kotak komentar dibawah ini. Semoga bermanfaat dan terima kasih sudah berkunjung.

Tidak ada komentar:

Posting Komentar

Pages

Diterbitkan Oleh Angah Azhari