Kolom Iklan dengan Tabel (Tutorial 16)

Setelah Google melakukan ‘Update Page Rank’ terhadap seluruh Website dan Blog diseluruh dunia pada tanggal 28 Mei 2009 belum lama ini, ternyata saya perhatikan banyak sekali pemilik Website dan Blog yang mencari cara untuk membuat kolom iklan atau bahasa umumnya kolom ‘Advertise’. Mengapa ?
Tentunya alasan mereka cukup kuat dan jelas, karena setelah Google melakukan ‘Update Page Rank’, seperti ‘ketiban’ rejeki ‘nomplok’ karena ‘Page Rank’ Website dan Blog naik tingkat. Jadi sebagai persiapan tentunya mereka ingin memasang ‘banner’ atau kolom yang disediakan untuk memasang iklan seandainya ada perusahaan atau sejenisnya yang ingin beriklan di Website atau Blog mereka.
Membuat kolom dengan tabel sebenarnya sudah dibahas cukup lama oleh ‘Dewanya Blog’ sekaligus master yang sangat saya hormati dan saya segani, dia adalah ‘Kang Rohman’ dari Bandung, Jawa Barat. Untuk itu apabila ada kesalahan dalam tutorial saya ini mohon ‘Kang Rohman’ juga kepada ‘Master Blogger’ yang lain untuk membantu membenahi kesalahan-kesalahan yang ada.
Langsung saja kita mulai, cara paling praktis membuat kolom iklan adalah menggunakan tabel, karena dengan tabel ini kita bisa langsung menambahkannya ke dalam sidebar dimanapun posisi sidebar itu berada tergantung template yang dipakai. Anda tinggal memilih menu ‘Tambah Gadget’ selanjutnya pilih ‘HTML Javascript’ dan anda tinggal memilih kolom iklan seperti apa yang akan dipakai dari tutorial yang akan saya bahas disini.

Tabel Kolom Tunggal

<table border="1" width="100">
<tbody><tr>
<td align="center">
Sample 1
</td>
</tr>
</table>

Maka Hasilnya akan seperti dibawah ini :

Sample 1

Atau apabila kata ‘Sample 1’ kita ganti dengan kode iklan yang saya miliki dan ‘border’ saya ganti dengan angka ‘0’, maka hasilnya akan seperti ini :







Tabel Kolom Double
Untuk membuatnya anda tinggal menambahkan kode </td> <td align="center"> dibawah kode iklan yang pertama. Contoh :

<table border="1" width="200">
<tbody><tr>
<td align="center">
Sample 1
</td>
<td align="center">
Sample 2
</td>
</tr>
</table>

Maka Hasilnya akan seperti dibawah ini :

Sample 1

Sample 2

Atau apabila kata ‘Sample 1’ dan ‘Sample 2’ kita ganti dengan kode iklan yang saya miliki dan ‘border’ saya ganti dengan angka ‘0’, maka hasilnya akan seperti ini :








Apabila anda menghendaki kolom iklan sesuai dengan ukuran lebar template, maka anda tinggal mengubah ‘width’ sesuai lebar template dan menambahkan kode </td> <td align="center"> setelah kode iklan dibawah setiap kode iklan yang anda pasang. Sebagai contoh lebar template anda ‘400px’, maka kode yang anda masukkan seperti dibawah ini :

<table border="1" width="400">
<tbody><tr>
<td align="center">
Sample 1
</td>
<td align="center">
Sample 2
</td>
<td align="center">
Sample 3
</td>
<td align="center">
Sample 4
</td>
</tr>
</table>

Maka hasilnya :

Sample 1

Sample 2

Sample 3

Sample 4

Tabel 2 Kolom 2 Baris
Untuk membuat tabel kolom 2 baris anda tinggal menambahkan kode berikut pada setiap pergantian baris :

</td>
</tr>
<tr>
<td align="center">

Contohnya :

<table border="1" width="200" cellpadding="5">
<tr>
<td align="center">
Sample 1
</td>
<td align="center">
Sample 2
</td>
</tr>
<tr>
<td align="center">
Sample 3
</td>
<td align="center">
Sample 4
</td>
</tr>
</table>

Maka hasilnya :

Sample 1	Sample 2
Sample 3	Sample 4

Contoh Kolom Iklan yang sudah jadi :












Yang perlu anda perhatikan adalah ‘width’, ‘border’, ‘cellpadding’. Anda tinggal menyesuaikan dengan kondisi panjang dan lebar template anda. Khusus untuk ‘border’ apabila anda tidak menginginkannya tinggal anda ganti dengan angka ‘0’, maka iklan yang anda tampilkan tidak memiliki garis tepi tabel, sebagaimana contoh-contoh yang ada di atas. Untuk kode iklan juga tidak hanya untuk ukuran 125x125 saja, anda tinggal mengganti dengan kode iklan dengan ukuran yang berbeda maka kolom tabel akan mengikuti ukuran tabel yang dimasukan.
Berikut ini adalah contoh kode HTML banner iklan 125x125, yang saya dapat dari ‘My Brothers Blogger’ Cempluk dan Erge.

Centralborneo004 :

<a href="http://s731.photobucket.com/albums/ww312/centralborneo004/?action=view&current=Advertise125x125.png" target="_blank"><img src="http://i731.photobucket.com/albums/ww312/centralborneo004/Advertise125x125.png" border="0" alt="Photobucket"></a>

Brother Erge :
<a href="http://s731.photobucket.com/albums/ww312/centralborneo004/?action=view&current=BannerAds.gif" target="_blank"><img src="http://i731.photobucket.com/albums/ww312/centralborneo004/BannerAds.gif" border="0" alt="banner"></a>

Brother Cempluk :
<a href="http://s731.photobucket.com/albums/ww312/centralborneo004/?action=view&current=Ads125x125.gif" target="_blank"><img src="http://i731.photobucket.com/albums/ww312/centralborneo004/Ads125x125.gif" border="0" alt="Photobucket"></a>

Gambar Banner :








Demikian artikel saya kali ini, mudah-mudahan bisa bermanfaat.