Cara Membuat Menu Drop Down Di Blog ~ YAYASAN SIAKCOM

Sabtu, 13 Februari 2010

Cara Membuat Menu Drop Down Di Blog

Cara Membuat Menu Drop Down Di Blog -

Kali ini saya share Cara Membuat Menu Drop Down Di Blog. Menu drop down ini sangat cocok untuk web/blog yang bertema kesehatan dan lain-lain. Fitur-fitur yang ada dalam meni ini antara lain, efek animasi ketika drop down nya muncul, warna hijau yang mengkilau. Berikut ini adalah tampilan menu drop down di blog :

http://1.bp.blogspot.com/-rA645fiTscs/UGrqwGjX-AI/AAAAAAAAF6I/_2R8Fq1Guvk/s1600/Green+Drop+Down+Menu.png

Berikut Cara Membuat Menu Drop Down Di Blog :
1. Login ke akun blogger kamu.
2. Klik template >> Edit HTML.
3. Tekan CTRL + F.
4. Letakkan kode berikut ini tepat DIATAS kode ]]>

#blazerMenu,
#blazerMenu ul {
    list-style: none;
}
#blazerMenu {
width:980px;
    float: left;
}
#blazerMenu > li {
    float:left;
}
#blazerMenu li a {
display: block;

    padding:8px 16px 8px 16px;
    text-decoration: none;
}
#blazerMenu ul {
    position: absolute;
    display: none;
        z-index: 999;
}
#blazerMenu ul li a {
    width: 30px;
float:left;
}
#blazerMenu li:hover ul {
}
/* Main menu
------------------------------------------*/
#blazerMenu {
    font-family: Arial;
    font-size: 12px;
    background: #2f8be8;
margin:0 auto;padding:0 auto;
background: transparent;
padding-left:3px;
border-bottom:5px solid #008E00;
}
#blazerMenu > li > a {
    color: #333;
    font-weight: bold;
    font-size: 16px;
padding:8px 16px 8px 16px;
}
#blazerMenu li:hover {
    color: #333;
}
#blazerMenu a.arrow{background-image:url(https://lh5.googleusercontent.com/-WSS4CScLl3U/UGrIYZZZ4kI/AAAAAAAAF5k/ypr0GXc2CWI/s16/Actions-arrow-down-icon.png);background-repeat:no-repeat;background-position:right center;padding:8px 24px 8px 16px;}

/* Submenu
------------------------------------------*/
#blazerMenu ul {
    background: #00CC00;
padding:3px 0px 0px 0px;
}
#blazerMenu ul li a {
    color: #fff;
    font-weight: bold;
    font-size: 12px;
width:110px;
padding:6px 0px 6px 6px;
}
#blazerMenu ul li:hover a {
    background: #80FE80;
}

5. Letakkan kode berikut ini tepat diATAS kode

6. Klik "Simpan Template".
7. Masuk ke Tata letak >> Tambah Widget >> Html/JavaScript dan copy kode berikut ini pada kolom konten!.