Rollover Horizontal List

Jika pada Rollover List, kode css membentuk sebuah daftar secara vertical, melalui horizontal rollover list ini dapat dibuat sebuah gabungan list dalam bentuk horizontal dan vertical.

Kode CSS :

ul.GRhorzlist{
        margin:0;
        padding:0;
        white-space:nowrap;
        list-style-type:none;
}
ul.GRhorzlist li{
        display:inline;
        list-style-type:none;
        padding:5px 6px 5px 0 !important;
        background:#900;
}
ul.GRhorzlist li:hover{
        background:#222;
}
ul.GRhorzlist a,ul.GRhorzlist a:link,ul.GRhorzlist a:visited{
        background:url(https://lh4.googleusercontent.com/-u0XPRqFBfNU/T1uNTOOsV-I/AAAAAAAAAVQ/t1rX8b1tAwU/s128/gubhugreyot-bullet.png) no-repeat;
        background-position:0 3px;
  background-size:12px 12px;
        padding:0 0 0 12px;
        font-size:12px;
        font-family:Arial;
        font-weight:bold;
        color:#eee;
        text-decoration:none;
}
ul.GRhorzlist a:hover{
        color:#FF0;
        background:transparent;
}

Kode CSS :

<ul id="GRhorzlist">
<li id="active"><a href="URL-List_Item-1" id="current  ">List_Item-1</a></li>
<li><a href="URL-List_Item-2">List_Item-2</a></li>
<li><a href="URL-List_Item-3">List_Item-3</a></li>
<p><li><a href="URL-List_Item-4">List_Item-4</a></li>
<li><a href="URL-List_Item-5">List_Item-5</a></li>
<li><a href="URL-List_Item-6">List_Item-6</a></li></p>
<p><li><a href="URL-List_Item-7">List_Item-7</a></li>
<li><a href="URL-List_Item-8">List_Item-8</a></li>
<li><a href="URL-List_Item-9">List_Item-9</a></li></p>
</ul>

Cara Membuat Horizontal Rollover List

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
     Lakukan Backup Template sebagai langkah preventif sebelum melakukan berbagai perubahan kode html baik berupa penambahan ataupun pengurangan kode css, javascript dan xHTML.
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy kode CSS dan letakkan di atas ]]></b:skin>
7. Klik "Simpan Template (Save Template)".
8. Gunakan xHTML di box posting atau "Add a Gadget".
9. Selesai! Buka blog dan lihat hasilnya!

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

Update » Rebo   WAGE,Maret,20,2012

» Happy Blogging - gubhugreyot «