Animated CSS Vertical Menu

Kode CSS "Animated CSS Vertical Menu"



#bgsGR_VMenu {
width: 200px;
margin:15px 5px;
}
#bgsGR_VMenu ul{
background:#777;
padding:3px;
list-style:none;
}
#bgsGR_VMenu li{
background: url(http://h1.ripway.com/gubhugreyot/VerticalCSSMenu/bg_li.gif) center center repeat-x;
list-style:none;
margin:0;
padding:0;
}
#bgsGR_VMenu li a {
height: 27px;
height:27px;
text-decoration: none;
color:#CCCCCC;
font-family:Arial narrow;
font-size:14px;
font-weight:700;
text-shadow:2px 2px 2px #000;
}
#bgsGR_VMenu li a:link, #bgsGR_VMenu li a:visited {
background:url(http://h1.ripway.com/gubhugreyot/VerticalCSSMenu/span.png) left top no-repeat;
background-position:0px 4px;
color:#fff;
display: block;
padding: 8px 0 0 30px;
}
#bgsGR_VMenu li:hover{
background: url(http://h1.ripway.com/gubhugreyot/VerticalCSSMenu/bg1.png) center center repeat-x;
}
#bgsGR_VMenu li a:hover {
color: #66CCFF;
background: url(http://h1.ripway.com/gubhugreyot/VerticalCSSMenu/span.gif) left center no-repeat;
background-position:0px 4px;
padding: 8px 0 0 40px;
border-right:4px solid red;
}


Cara Menggunakan Animated CSS Vertical Menu

# Login to Blogger (Login ke Blogger) : Tuliskan User Name (Nama Pengguna) atau Email Address kemudian tuliskan juga Password (Sandi) baru lanjutkan KLIK "Login".
# Dasboard (Dasbor) : Setelah masuk di halaman "Dasboard" KLIK "Design (Rancangan)".
# Design (Rancangan) : KLIK link "Edit HTML".
# Back-Up Template (Amankan Template) : Lakukan backup template terlebih dahulu dengan cara :
- KLIK "Download Full Template (Download Template Lengkap)"
- Simpan file Template di "Folder PC".
# Tetap di Edit HTML : Cari kode ]]>, kemudian copy dan paste kode css di atas kode tersebut.
Posisi kode akan seperti ini :

#bgsGR_VMenu {
width: 200px;
margin:15px 5px;
}
.....
..... dst
#bgsGR_VMenu li a:hover {
color: #66CCFF;
background: url(http://h1.ripway.com/gubhugreyot/VerticalCSSMenu/span.gif) left center no-repeat;
background-position:0px 4px;
padding: 8px 0 0 40px;border-right:4px solid red;
}

]]>

# SAVE Template (Simpan Template) : KLIK "SAVE Template (Simpan Template)", kemudian lanjutkan dengan memasang kode HTML Animated CSS Vertical Menu.


Kode HTML Animated CSS Vertical Menu

• Tutorial Blogger
• Panduan Blogger
• Tips-Triks Blogger
• Javascript-JQuery
• Blog-Email-Adobe

1. Saat ini sampeyan ada di halaman "Edit HTML". KLIK link "Page Elements (Elemen Laman)".
2. Cari box dengan garis terputus-putus yang bertuliskan "Add Gadget (Tambah Gadget)". KLIK tepat di "Tambah Gadget".
3. Setelah beberapa saat terbuka sebuah window baru. KLIK HTML/Javascript", kemudian copy-paste kode HTML di box yang tersedia.
4. KLIK "SAVE (Simpan) dan buka hasilnya dengan membuka blog.

Catatan/Keterangan :

1. Ganti Setiap Link dan Link Title dengan apa yang hendak ditampilkan melalui vertical menu.
2. Untuk merubah lebar vertical menu perkecil atau perbesar nilai width:200px; pada syntax :

#bgsGR_VMenu {
width: 200px;
margin:15px 5px;
}





3. Untuk membuat template terlihat tidak berjejalan dengan kode css dan javascript, sampeyan bisa upload kode cssnya terlebih dahulu di CSS hosting yang ada.
4. Tambahkan link dan Link title jika menu yang akan ditampilkan lebih dari 5.