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>
- Login ke Blogger.
- Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
- Tuliskan Password.
- Klik "Sign in"
- Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
Klik "Rancangan (Design)". - Kembali halaman baru akan terbuka, klik "Edit HTML".
- 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.
- Cari kode ]]></b:skin> pada "Box Edit Template".
- Copy kode CSS dan letakkan di atas ]]></b:skin>
- Klik "Simpan Template (Save Template)".
- Gunakan xHTML di box posting atau "Add a Gadget".
- 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 �
