Animated CSS Vertical Menu

Sebuah permainan background membuat menu vertical ini bagai sebuah menu beranimasi. Hanya segelintir kode css tanpa sedikitpun javascript tidak mengurangi gaya dan penampilannya. Kelebihan penggunaan kode css secara murni akan membuat beban blog tidak menjadi begitu bertambah, apalagi background image yang kita gunakan juga sudah didesain dengan bentuk dan ukuran teramat kecil. Bisa dikatakan bahwa vertical css menu ini hanya mengandalkan kelengkapan penggunaan kode saja. Bagaimana wujud menu cantik ini? Silahkan sampeyan coba saja dan silahkan gunakan jika cukup menarik untuk digabungkan sebagai pelengkap blog. Bentuk CSS Vertical menu seperti gambar di bawah ini :

Arahkan cursor di atas gambar untuk melihat tampilan Vertical Menu dalam ukuran besar!

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

1. Login to Blogger (Login ke Blogger) : Tuliskan User Name (Nama Pengguna) atau Email Address kemudian tuliskan juga Password (Sandi) baru lanjutkan KLIK "Login".
2. Dasboard (Dasbor) : Setelah masuk di halaman "Dasboard" KLIK "Design (Rancangan)".
3. Design (Rancangan) : KLIK link "Edit HTML".
4. 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".
5. Tetap di Edit HTML : Cari kode ]]></b:skin>, 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;
        }
]]></b:skin>



6. 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

<div id="bgsGR_VMenu">
<ul>
        <li><a href="http://gubhugreyot.blogdetik.com" title="Title-1">Tutorial Blogger</a></li>
        <li><a href="http://gubhugreyot.blogspot.com" title="Link 2">Panduan Blogger</a></li>
        <li><a href="http://bloggerstuars.blogspot.com" title="Link 3">Tips-Triks Blogger</a></li>
        <li><a href="Link-4" title="Link Title-4">Javascript-JQuery</a></li>
        <li><a href="Link-5" title="Link Title-5">Blog-Email-Adobe</a></li> 
</ul>
</div>

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.
Apabila ingin download CSS yang telah terupload di file hosting silahkan KLIK link Download di bawah ini.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «