Membuat element widget terlihat Multi kolom

Sebenarnya sudah lama entri ini saya simpan di draft namun terjangkit rasa ragu untuk menerbitkannya, salah satu penyebabnya adalah karena bingung untuk memberi judul yang tepat untuk entri ini, Tapi setelah hampir satu bulan ahirnya saya Publish juga dengan harapan 'Mudah-mudahan bermanfaat' buat sobat kolom ponsel. Entri ini sendiri adalah salah satu alternatif saja terutama buat Blogger yang menggunakan ponsel seperti saya contohnya yang merasa kesulitan untuk menambahkan/menyisipkan kode HTML ke dalam template, hal ini di sebabkan belum adanya aplikasi ponsel yang berfungsi dengan baik untuk melakukannya.

Sebelum sobat melanjutkan membaca postingan ini, coba alihkan sejenak perhatian sobat pada Daftar Panduan membuat blog menggunakan ponsel dan ke dua Banner yang berada di bawah header.
Bagaimana, Apakah menurut sobat tampak terdiri dari tiga kolom element widget ?, Bila itu sobat anggap ya dan menarik untuk dicoba, silakan sobat terus membaca entri ini sampai selesai.

Untuk menerapkan cara seperti contoh diatas, ada tiga macam kode yang kita butuhkan diantaranya :

<style> .list { 
  border-bottom:1px solid #bbb;
  line-height:1.5em;
  padding:3px;
}
</style>
<div style="overflow:auto;
  padding:7px 5px;
  margin:0; width:300px; 
  height:248px;
  background:transparent;
border:1px solid #666;">
<div class="list">
<font color="000000">Panduan membuat Blog dengan Ponsel :</font>
</div>
<ul type="square">
<div class="list">
<li><a href="http://
rudimarfai.blogspot.com/2009/08/sekilas-tentang-blog.html" <font color="006400">Sekilas info tentang Webblog</font></a></li>
</div>
<div class="list">
<li><a href="http://
rudimarfai.blogspot.com/2009/08/cara-membuat-email-di-gmail.html" <font color="006400">Buat account email di Gmail</font></a>
</li>
</div>
<div class="list">
<li><a href="http://rudimarfai.blogspot.com/2009/06/membuat-blog-menggunakan-ponsel.html" <font color="006400">Cara singkat membuat Blog</font></a></li></div>
  </ul>
</div>

Kode diatas adalah kode yang saya gunakan untuk membuat Daftar judul entri yang bertema Panduan membuat blog menggunakan ponsel. Gantilah judul dan alamat link yang akan di tampilkan.

<div style="overflow:hidden;
  padding-bottom:5px;  
  margin:0;
  width:960px;
  height:282px;
  background:#000 url(http://i42.tinypic.com/1yko.jpg) repeat-x; border:0px;">
</div>

Kode yang ke dua untuk menempatkan banner sekaligus untuk memberi background utama serta membuka dan menutup keseluruhan kode di dalamnya. Ganti alamat IMG untuk background atau ganti dengan kode warna, sehingga dapat sesuai dengan template sobat.

<table width="950"><tr><td align="left">kode link sebelah kiri (daftar link)
</td>
<td align="center">
kode baner tengah (AwSurveys)
 </td>
<td align="right">
kode banner kanan (Ziddu)
  </td>
 </tr>
</table>

Yang terahir adalah table, yang saya fungsikan untuk mengatur penempatan posisi dari Daftar link dan banner.

Untuk membuat satu element terlihat menjadi tiga kolom seperti contoh diatas, maka kita harus menggabungkan ketiga kode tersebut, kurang lebih akan menjadi seperti ini :

<div style="overflow:hidden;
  padding-bottom:5px;
  margin:0; width:960px;  
  height:282px;
  background: url(http://i42.tinypic.com/1yko.jpg) repeat-x; border:0px;">
<table width="950"><tr><td align="left"> 
<style> .list { 
  border-bottom:1px solid #bbb;
  line-height:1.5em;
  padding:3px;
}
</style>
<div style="overflow:auto;
  padding:7px 5px;
  margin:0;
  width:300px;
  height:248px;
  background:transparent;
border:1px solid #666;">
<div class="list">
<font color="000000">Panduan membuat Blog dengan Ponsel :</font>
</div>
<ul type="square">
<div class="list">
<li><a href="http://
rudimarfai.blogspot.com/2009/08/sekilas-tentang-blog.html"><font color="006400">Sekilas info tentang Webblog</font></a></li>
</div>
<div class="list">
<li><a href="http://
rudimarfai.blogspot.com/2009/08/cara-membuat-email-di-gmail.html"><font color="006400">Buat account email di Gmail</font></a>
</li>
</div>
<div class="list">
<li><a href="http://rudimarfai.blogspot.com/2009/06/membuat-blog-menggunakan-ponsel.html"><font color="006400">Cara singkat membuat Blog</font></a></div></ul></div>

</td><td align="center">
<div style="overflow:hidden;
  padding-top:30px;
  padding-left:30px;
  margin:0 0 0 30px;
  width:285px;
  height:250px;
  background:transparent;">
<div align="left">
<a href="http://www.AWSurveys.com/HomeMain.cfm?RefID=tihang"><img src="http://i49.tinypic.com/5dqfpe.jpg" width="250" height="200" alt="banner_Awsurveys" /></a></div></div>
</td><td align="right">
<div style="overflow:hidden;
  padding-top:30px; 
  margin:0;
  width:285px;
  height:250px;
  background:transparent;">
<div align="left"><a href='http://www.ziddu.com/register.php?referralid=(y]nf~39pnb' target="_blank"><img src="http://i49.tinypic.com/dvr4hf.jpg" width="250" height="200" alt="Banner ziddu" /></a></div></div></td></tr></table></div>

contoh kode dari template kakhai (template saya) yang mempunyai lebar 960pixel.

Code lengkapnya

Silahkan Copy kode di bawah ini :
<div style="overflow:hidden; padding-bottom:5px; margin:0; width:960px; height:282px; background: url(http://i42.tinypic.com/1yko.jpg) repeat-x;"><table width="950"><tr><td align="left"> <style> .list { border-bottom:1px solid #bbb; line-height:1.5em; padding:3px; } </style><div style="overflow:auto; padding:7px 5px; margin:0; width:300px; height:248px; background:transparent; border:1px solid #666;"> <div class="list"> <font color="000000">Panduan membuat Blog dengan Ponsel :</font></div><ul type="square"><div class="list"> <li><a href="http://rudimarfai.blogspot.com/2009/08/sekilas-tentang-blog.html"><font color="006400">Sekilas info tentang Webblog</font></a></li></div> <div class="list"><li><a href="http://rudimarfai.blogspot.com/2009/08/cara-membuat-email-di-gmail.html"><font color="006400">Buat account email di Gmail</font></a></li></div><div class="list"> <li><a href="http://rudimarfai.blogspot.com/2009/06/membuat-blog-menggunakan-ponsel.html"><font color="006400">Cara singkat membuat Blog</font></a></div></ul></div></td><td align="center"><div style="overflow:hidden; padding-top:30px; padding-left:30px; margin:0 0 0 30px; width:285px; height:250px; background:transparent;"><div align="left"><a href="http://www.AWSurveys.com/HomeMain.cfm?RefID=tihang"><img src="http://i49.tinypic.com/5dqfpe.jpg" width="250" height="200" alt="banner_Awsurveys" /></a></div></div> </td><td align="right"> <div style="overflow:hidden; padding-top:30px; margin:0; width:285px; height:250px; background:transparent;"> <div align="left"><a href='http://www.ziddu.com/register.php?referralid=(y]nf~39pnb' target="_blank"><img src="http:// i49.tinypic.com/dvr4hf.jpg" width="250" height="200" alt="Banner ziddu" /></a></div></div></td></tr></table></div>

Tugas sobat adalah mengganti kode yang berwarna merah, seperti kode image untuk background, link dan kode banner yang sobat miliki, dan jangan lupa mengatur dan menyesuaikan width, height, padding, serta marginnya agar benar-benar sesuai dengan template sobat.

Untuk pemasangannya silahkan sobat copy kode diatas lalu ganti kode yang saya beri tanda, selanjutnya :

1. Login ke blogger.com
2. Tata letak
3. Tambah Gadget
Pilih HTML/javascript:
4. Pastekan kode yang sobat copy sebelumnya kedalam kolom yang tersedia
5. Simpan perubahan.

Cara ini bisa juga diterapkan pada sidebar,tapi lebih tepat di pasang pada element di bawah header atau fotter.