Cara Menciptakan Dropdown Sajian (Horizontal)

cara menciptakan dropdown sajian (horizontal)? - Saat ini semakin banyak blogger pemula yang tertarik untuk mencar ilmu dasar-dasar instruksi untuk mengatur tampilan blognya. Kaprikornus kali ini saya hendak mengembangkan bagaimana cara menciptakan sajian horizontal. Menu ini dapat ditaruh di bawah header, di atas footer, atau di mana saja dalam posisi horizontal.

Lalu bagaimana cara menciptakan sajian dropdown horizontal ini? Untuk praktisnya ikuti mekanisme gampang berikut:

Login ke dalam akun blogger anda
Pilih blog yang akan dipasangi
Pilih Menu Template
Klik Tombol EDIT HTML. Setelah itu akan muncul jendela konfirmasi, silahkan klik LANJUTKAN
Carilah instruksi ]]></b:skin>
Copy instruksi di bawah ini dan paste sempurna di atas instruksi ]]></b:skin> tadi

#alie man Menu {

background: warna1;

width: 880px;

height: 35px;

font-size: 12px;

font-family: Arial, Tahoma, Verdana;

color: warna2;

font-weight: bold;

margin-bottom: 30px;

padding: 2px;

}

#alie manbox {

width: 875px;

float: left;

margin: 0;

padding: 0;

}

#punch {

margin: 0;

padding: 0;

}

#punch ul {

float: left;

list-style: none;

margin: 0;

padding: 0;

}

#punch li {

list-style: none;

margin: 0;

padding: 0;

}

#punch li a, #punch li a:link, #punch li a:visited {

color: warna2;

display: block;

font-size: 16px;

font-family: Georgia, Times New Roman;

font-weight: normal;

text-transform: lowercase;

margin: 0;

padding: 9px 15px 8px;

}

#punch li a:hover, #punch li a:active {

background: warna2;

color: warna1;

margin: 0;

padding: 9px 15px 8px;

text-decoration: none;

}

#punch li li a, #punch li li a:link, #punch li li a:visited {

background: warna1;

width: 150px;

color: warna2;

font-size: 14px;

font-family: Georgia, Times New Roman;

font-weight: normal;

text-transform: lowercase;

float: none;

margin: 0;

padding: 7px 10px;

border-bottom: 1px solid #FFF;

border-left: 1px solid #FFF;

border-right: 1px solid #FFF;

}

#punch li li a:hover, #punch li li a:active {

background: warna2;

color: warna1;

padding: 7px 10px;

}

#punch li {

float: left;

padding: 0;

}

#punch li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 170px;

margin: 0;

padding: 0;

}

#punch li ul a {

width: 140px;

}

#punch li ul ul {

margin: -32px 0 0 171px;

}

#punch li:hover ul ul, #punch li:hover ul ul ul, #punch li.sfhover ul ul, #punch li.sfhover ul ul ul {

left: -999em;

}

#punch li:hover ul, #punch li li:hover ul, #punch li li li:hover ul, #punch li.sfhover ul, #punch li li.sfhover ul, #punch li li li.sfhover ul {

left: auto;

}

#punch li:hover, #punch li.sfhover {

position: static;

}

Ganti instruksi warna1 dan warna2 dengan instruksi warna yang anda inginkan sebagai pola dapat mengikuti instruksi di bawah ini:

Menu Hitam

warna1 = #555555

warna2 = #FFFFFF

Menu Biru

warna1 = #66bbdd

warna2 = #004661

Menu Hijau

warna1 = #38761d

warna2 = #FFFFFF

Menu Abu-abu

warna1 = #d4d4d4

warna2 = #555555

Menu Kuning

warna1 = #ffd966

warna2 = #d4812a

Jika sudah mengganti semua instruksi warna di atas silahkan klik SIMPAN TEMPLATE
Sekarang masuk ke Menu TATA LETAK atau LAYOUT
Klik ADD A GADGET atau TAMBAH GADGET
Pilih HTML/JAVASCRIPT. Biarkan kolom judul nama gadget kosong, kemudian copy paste instruksi di bawah ini ke kolom HTML yang tersedia

<li>

<a href="#">Sample Page</a>

<ul>

<li>

<ul>

</ul>

</li>

</ul>

</li>

<li><a href="#">Sample Post</a></li>

</ul>

</div>

Edit semua nama sajian sesuai impian anda. Jangan lupa mengganti tanda # dengan alamat URL yang anda inginkan
Klik SIMPAN
Atur posisi gadget di daerah yang anda inginkan, kemudian klik tombol SIMPAN SETELAN di bab kanan atas layar.

Jika anda melaksanakan langkah-langkah di atas dengan benar, anda akan melihat sebuah horizontal dropdown sajian di daerah yang anda inginkan. Bentuknya kurang lebih menyerupai gambar di bawah ini.

Untuk Menambah Menu:

Untuk menambahkan sajian silahkan cari pada bab tamat ada instruksi menyerupai ini:

</ul>

Tepat di bab atas </ul> dapat disisipkan sajian baru, dan akan terlihat menyerupai di bawah ini:

</ul>

Jika sajian aksesori lebih dari satu akan terlihat menyerupai di bawah ini

</ul>

Jika salah satu sajian aksesori memiliki sub menu, maka perhatikan kode </li> sajian tersebut yang diturunkan untuk membuka ruang gres bagi sub sajian di dalam sajian tersebut

</li>

</ul>

Ok, silahkan divariasikan sendiri, untuk menambah dan mengurangi dropdown sajian horizontal di atas.