Membagi satu list style ke dalam dua kolom.
Trik list menjadi dua kolom ini sebenarnya sangat berguna sekali terutama bagi yang mempunyai sidebar cukup lebar antara 260 px atas. Setidaknya dengan cara itu bisa memangfaat space atau ruang yang sangat lebar tersebut.
Untuk peng-aplikasiannya sangat mudah pertama cari dulu tag ini.
]]></b:skin>
Kemudian Simpan kode ini di atasnya.
/* Kode Css List Two Kolom
------------------------------------------------------------------------------------------*/
#catl {
padding :5px 10px;
width : 91%;
background-color : #ffffdd;
border : 1px solid #ccc;
margin : auto;
}
#catl h3 {
display : block; color : #669900; padding-bottom : 5px;
margin-bottom : 5px; border-bottom : 1px solid #666;font-size:14px; }
/* style all the list items here */
#catl ul li {
height : 1em;
list-style-type : none;
color : #333;
padding : 0.3em 0 0.4em 0.25em;
font-size : 0.9em;
border-bottom : 1px solid #ccc;
text-indent:0px;
}
/* every second list item is positioned outward and moved up equal to LI height to even them */
#catl ul li.catl_l2 {
margin-left : 50%;
margin-top : -1.8em;
padding : 0.3em 0 0.4em 0.5em;
border : 0;
}
/* Every other two list items are styled with a background for usability and style */
.catl_alt {
background-color : #fffffc;
}
/* ini merupakan code hacking css untuk Ie 6*/
* html #catl ul li.catl_l2 {
margin-top : -2.3em;
}
Setelah itu simpan perubahan. kemudian tambahkan sebuah widget atau gadget Html/javascript. dan masukan kode Html ini.
<div id="catl">
<h3>Satu List Dua Kolom</h3>
<ul>
<li><a href="#">List Item Satu</a></li>
<li class="catl_l2"><a href="#">List Item Dua</a></li>
<li class="catl_alt">List Item Tiga</li>
<li class="catl_l2">List Item Empat</li>
<li>List Item Lima</li>
<li class="catl_l2">List Item Enam</li>
<li class="catl_alt">List Item Tujuh</li>
<li class="catl_l2">List Item Delapan</li>
</ul>
</div>
Yang perlu di ganti adalah tulisan antara tag <li> dan </li>.
Jika ingin membuat linklist menjadi seperti ini.
<li><a href="http://alamat url/" Nama List </a></li>
jika ingin membuat list berupa link gambar seperti ini.
<li><a href="http://alamat url/"><img src="alamat gambar></a></li>
* Note :
a. Atur tulisan list-nya jangan terlalu panjang
b Jika ingin mengunkana gambar atur nilai tinggi dan lebarnya, kira-kira 75px X 10px.
* Note :
a. Atur tulisan list-nya jangan terlalu panjang
b Jika ingin mengunkana gambar atur nilai tinggi dan lebarnya, kira-kira 75px X 10px.
0 komentar:
Post a Comment
saran, komentar dan kritikan anda sangat berharga buat saya, terima kasih.