Agar Widget Blog Tampil Sejajar

Kembali lagi dengan tutorial blogger, kali ini saya ingin berbagi wawasan kepada temen-temen semua khususnya buat mas-blogger dan juga mbak-blogger tentang bagaimana membuat widget agar tampil sejajar. Sejajar disini maksudnya adalah tersusun menyamping.
Seperti kita tau didunia blogging ada banyak sekali jenis widget yang bisa kita pasang di blog, itu bukan berarti akan bagus jika kita memasangnya semua pada blog. Sebaiknya kita hanya memasang beberapa saja yang kita anggap perlu. Contohnya widget Statistik Pengunjung, Alexa Rank, Buku Tamu, dll. Jika dirasa tidak diperlukan sebaiknya tidak usah dipasang, agar blog sodara tidak Lola.

Meskipun begitu memasang satu dua widget pada blog jika tidak pas penempatannya juga akan berefek blog tersebut terkesan berantakan, terutama sekali pada widget-widget yang ukurannya kecil. Untuk itulah diperlukan trik sederhana untuk mengatur widget-widget tersebut agar terlihat rapi. Salah satunya yaitu men-sejajarkan beberapa widget kecil dalam satu space.

Pada prinsipnya, membuat widget agar tampil sejajar adalah sama seperti ketika kita membuat tabel menggunakan HTML. Seperti yang sudah kita bahas sebelumnya, untuk membuat tabel dengan HTML kode dasar yang digunakan yaitu <table> ... </table>, <td> ... </td>, <tr> ... </tr>.

Disini dua widget yang akan saya gunakan sebagai objek contoh adalah widget dari Histats Counter dan Alexa Rank

Contoh kode widget dari Alexa Rank :

<a href="http://www.alexa.com/siteinfo/www.berwawasan.com"><script type='text/javascript' src='http://xslt.alexa.com/site_stats/js/t/b?url=www.berwawasan.com'></script></a>

Contoh kode widget dari Histats Counter :

 <!-- Histats.com  START  (standard)-->
<script type="text/javascript">document.write(unescape("%3Cscript src=%27http://s10.histats.com/js15.js%27 type=%27text/javascript%27%3E%3C/script%3E"));</script>
<a href="http://www.histats.com" target="_blank" title="Trucking company tracking" ><script  type="text/javascript" >
try {Histats.start(1,2402776,4,3021,130,80,"00010101");
Histats.track_hits();} catch(err){};
</script></a><noscript><a href="http://www.histats.com" target="_blank"><img  src="http://sstatic1.histats.com/0.gif?2402776&101" alt="Trucking company tracking" border="0"></a></noscript>
<!-- Histats.com  END  -->

Cara agar kedua widget diatas posisinya sejajar rapi dalam satu space tinggal kita tambahkan kode HTML tabel seperti yang disebutkan diatas.
Jadi jika semua digabungkan akan menjadi ini :

<table><tr>
<td><a href="http://www.alexa.com/siteinfo/www.berwawasan.com"><script type='text/javascript' src='http://xslt.alexa.com/site_stats/js/t/b?url=www.berwawasan.com'></script></a></td>
<td><!-- Histats.com  START  (standard)-->
<script type="text/javascript">document.write(unescape("%3Cscript src=%27http://s10.histats.com/js15.js%27 type=%27text/javascript%27%3E%3C/script%3E"));</script>
<a href="http://www.histats.com" target="_blank" title="Trucking company tracking" ><script  type="text/javascript" >
try {Histats.start(1,2402776,4,3021,130,80,"00010101");
Histats.track_hits();} catch(err){};
</script></a>
<noscript><a href="http://www.histats.com" target="_blank"><img  src="http://sstatic1.histats.com/0.gif?2402776&101" alt="Trucking company tracking" border="0"></a></noscript>
<!-- Histats.com  END  --></td>
</tr></table>

Keterangan :
Kode yang saya tandai warna merah merah adalah kode yang harus ditambahkan

Sehingga hasilnya nanti akan seperti screenshot dibawah ini :

Catatan :
Selain pada widget, cara ini juga bisa kita lakukan pada objek lainnya. Misalkan banner iklan, gambar diposting atau sidebar, dan lainnya.

----------------- "Indahnya berbagi" -----------------

Ceritakan ini di :

Facebook Google+ Twitter Digg

Tentang Penulis :

Ansory Esce
Dia bukanlah seseorang yang memiliki segudang ilmu untuk bisa diceritakan. Bukan juga seorang Blogger profesional yang bisa menggurui kalian tentang ilmu Blogging atau tentang ilmu Internet lainnya. Dia hanyalah seorang Blogger "alakadarnya" yang memiliki keterbatasan pengetahuan. Menulis di Blog ia lakukan sekedar untuk mengenal banyak teman baru serta sebagai media untuk belajar dan saling berbagi. Selengkapnya..
Berteman dengannya di: Facebook | Twitter | Google+