Cara Membagi 1 Kolom Menjadi 2 Kolom

Saat jalan-jalan menyusuri ruang dunia maya saya mampir ke blognya kang boogle, yang membuat saya terusik dan tertarik dengan artikel ini merupakan salah satu cara mengefisiensikan sidebar.

Sobat nyoba bagaimana cara membagi 1 kolom menjadi 2 kolom, berikut caranya :

1. Loding ke blog sobat
2. Pilih Rancangan
3. Edit HTML
4. Expand Template Widget
5. Cari kode :

]]></b:skin>

6. Copy All kode di bawah ini, lalu simpan di atas kode No.5

/* 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;
}

7. Simpan

Masih dalam rancangan, selanjutnya klik tambah gadget pilih HTML/JavaScrupt. Copy paste kode berikut ini, lalu simpan.

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

Catatan :
Yang perlu sobat perhatikan adalah tulisan antara tag <li> dan </li>

<li><a href="#">List Item Satu</a></li>
<li class="catl_l2"><a href="#">List Item Dua</a></li>


 Semoga Bermanfaat..

Widget ini telah di uji di lab.idblogku, widget ini baca aturannya disini!

Post by idblogku