Wednesday, February 11, 2015

Tips Merapikan Widget Membuat Iklan Berjejer Kesamping

Ketika saya mencoba untuk menjadi publisher di kliksaya, saya mengalami sedikit kendala karena ukuran banner iklan yang tersedia kurang sesuai dengan ukuran ukuran kolom pada template yang saya miliki. Ukuran-ukuran yang ada pada situs kliksaya tersebut di antara nya :
  1. 125x125 dan 300x250 (Persegi)
  2. 468x60 dan 728x90 (Horisontal)
  3. 120x600  dan 160x600 (Vertikal)
Sementara ukuran kolom template yang saya gunakan sampai februari 2015 adalah 212px pada sisi kanan dan ukuran 425px untuk kolom kiri (jajaran artikel post). Sehingga memilih untuk menggunakan ukuran iklan manapun, hampir tidak ada yang cocok untuk diletakan di bagian kanan (sidebar) karena terlalu besar ataupun terlalu kecil. Memilih iklan untuk diletakan di bagian atas artikel pun sebenarnya tidak ada ukuran yang benar-benar cocok. Sampai akhirnya saya menemukan ide untuk mengambil iklan ukuran persegi 125x125 untuk diletakan di bagian atas artikel, serta merapikannya dengan table.

Jika anda belum berpengalaman menggunakan table untuk merapikan widget (termasuk iklan maupun banner), kurang lebih beginilah cara merapikan iklan dengan table agar berjejer kesamping.

Langkah-Langkah Merapikan Iklan berjejer :
Masuk ke tata letak di blog yang anda miliki
Pilih Tata Letak kemudian tambah Widget HTML
Buat Script HTML Seperti Berikut :

</div>
<table><tr>
<td>Widget A yang Dikehendaki</td>
<td></td>
<td>Widget B yang Dikehendaki</td>
<td></td>
<td>Widget C yang Dikehendaki</td>
</tr></table>
</div>

Pada Kasus Kali ini, Script dari Widget yang ingin saya pasang misalnya ketiga-tiganya sebagai berikut :
<a title="Blog Pelajar Terbaik" href="http://pelajarterbaikupi.blogspot.com" target="_blank"><img alt="Kunjungi Blog Pelajarterbaik" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAHcf2UPVe3KLdJiPdbMI_k-1tXlR3TXk0bvek6DJ_GQMU6utELZQgLe2kBwZkqmlKzzuLQdeJ0SpBlX1j9CHbJksLWKJ_fW2BtcrcJ_5Q34__Ka_DZb3pSIqA0HkMXr52s74sdeJ4ecU/
s1600/Mahfudin_IW.gif" width="125px" height="125px"/></a>

Maka Tampilan yang akan diperoleh ketika Script tersebut dimasukan ke dalam Script HTML di atas adalah sebagai berikut :

Kunjungi Blog PelajarterbaikKunjungi Blog PelajarterbaikKunjungi Blog Pelajarterbaik

Jika Kita ingin menambah jarak antar gambar tersebut, maka kita cukup membuat kolom kosong lebih banyak lagi (HTML yang berwarna merah) sebanyak yang kita perlukan. Jika melihat polanya, tentu anda memahami bagaimana jika ingin menambahkan lebih banyak widget lagi, sehingga bukan sekedar tiga widget.

Teknik tabel ini, juga sering digunakan untuk merapikan foto-foto di blog, sehingga kumpulan foto (galeri) tersebut bisa lebih rapi karena di atur berjejer seperti gambar di atas.

Baca Juga :
Cara Membuat Galeri Slideshow Ber-Tombol di artikel blog
Cara Membuat Galeri Slideshow di artikel Blog
Cara Membuat Galeri Foto Scroll di artikel Blog
Daftar Artikel Blog

No comments:

Post a Comment