Memasang CSS Menu Drop Down Blogspot

Memasang CSS Menu Drop Down Blogspot
1. Login ke dalam akun blogger sobat.
2. Pilih menu "TEMPLATE".
3. Klik Tombol "EDIT HTML". Setelah itu akan muncul jendela konfirmasi, silahkan klik "LANJUTKAN".
4. Carilah kode "]]>". tkan "ctrl + F' untuk memudahkan pencarian.
5. Copy kode CSS di bawah ini dan paste tepat di atas kode "]]>"

#RickyMenu {
    background: warna1;
    width: 880px;
    height: 35px;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    color: warna2;
    font-weight: bold;
    margin-bottom: 30px;
    padding: 2px;
}

#Rickybox {
    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;
}

6. Ganti kode warna1 dan warna2 dengan kode warna yang anda inginkan sebagai contoh bisa mengikuti kode 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

7. Jika tahap 1-6 sudah selesai sobat klik "simpan template".

Sekarang tinggal memasang kode "html" di tata letak caranya sebagai berikut.
1. Klik "tata letak" atau "layout".
2. Klik "add a gadget" pilih "html/javascript".
3. Pada kolom "judul" isi kan sesuai keinginan sobat, copy syntac di bawah ini dan paste pada kolom "html".

Home
Sample Page


Sub Page #1

Sub Sub Page #1
Sub Sub Page #2
Sub Sub Page #3


Sub Page #2
Sub Page #3
Sub Page #4
Sub Page #5


Sample Post
Blog Page

jangan lupa untuk menggati tanda "#" dengan alamat postingan blog sobat Setelah selesai klik "simpan" reload blog sobat.

 *semoga dapat bermanfaat*