Rosihan Ari`s Blog

Menampilkan Floating Ads di Setiap Posting di Wordpress

November 6th, 2008 | by rosihanari |  Cetak Artikel Ini

Jika Anda lihat di setiap postingan pada blog ini, tentu Anda akan lihat ada floating ads yang terletak di sebelah kiri. Konon… katanya floating ads yang terletak di dalam postingan ini efektif untuk meningkatkan CTR (click through rate).

Tidak hanya ads berupa image yang bisa ditampilkan ke dalam floating ads itu, tapi juga script adsense atau sejenisnya.

OK pada artikel kali ini akan dibahas bagaimana cara meletakkan floating ads di setiap postingan pada Wordpress kita.

Cara membuatnya sangat mudah sekali teman-teman. Konsepnya adalah dengan membuat tag

<div id="ads">
</div>

pada script Wordpressnya. Selain itu kita juga membutuhkan sentuhan CSS untuk mengatur posisi dan juga propertinya.

Perhatikan tag di atas… tag division ini kita beri nama ‘ads’. Apakah harus demikian? ooo… tidak harus. Anda boleh memberi nama yang lain kok. Pemberian nama ini akan terkait dengan pengaturan di CSS nya.

Nah… yang menjadi pertanyaan adalah, di file script Wordpress manakah kita buat tag <div id=”ads”></div> ini? Kan banyak tuh file scriptnya.. ada ratusan buah file. Nah… file yang kita edit adalah bernama single.php. Letak file ini di dalam folder wp-content/themes/theme name. Folder theme name ini adalah folder theme yang sedang digunakan. Sebagai contoh misalkan saat ini Wordpress Anda mengunakan themen bernama XXX, maka file single.php yang diedit letaknya di wp-content/themes/XXX.

Mungkin Anda bertanya, apa itu file single.php? apa fungsinya? Di dalam Wordpress, file tersebut berfungsi untuk menampilkan postingan kita secara utuh. Nah… di sinilah kita tempatkan tag <div id=”ads”></div> ini.

Yang jadi masalah adalah… di baris mana tag tersebut diletakkan dalam script single.php? Yup… good question… Tag tersebut diletakkan persis sebelum perintah

<?php the_content(....) ?>

Lantas… apa isi di antara <div id=”ads”> dan </div> ini? Ya… isinya bisa script untuk menayangkan iklan. Misalnya scriptnya dari Adsense, misalnya seperti ini

<div id="ads">
<script type="text/javascript"><!--
google_ad_client = "pub-8537139779110895";
google_alternate_color = "405152";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text";
google_ad_channel = "";
google_color_border = "405152";
google_color_bg = "405152";
google_color_link = "ABECF5";
google_color_text = "FFFFFF";
google_color_url = "ABECF5";
//-->
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

atau script penayang iklan dari KlikSaya.com seperti ini

<div id="ads">
<script src="http://scr.kliksaya.com/js-ad.php?zid=11780" type="text/javascript">
</script>
</div>

atau bisa juga berupa image yang dikasih link referal kita

<div id="ads">
<a href="http://ziddu.rosihanari.net" target="blank"><img src="http://rosihanari.co.cc/images/uns/ziddu.jpg"></a>
</a>

Nah.. selanjutnya kita buat script CSS untuk mengatur posisi ads dan propertinya.

Sekarang coba dibuka file style.css. File ini terletak dalam folder yang sama dengan single.php. File CSS tersebut digunakan untuk mengatur semua tampilan yang muncul di Wordpress, tentu saja yang terkait dengan theme yang sedang digunakan.

Sekarang tambahkan script CSS berikut ini di sebarang tempat dalam style.css

#ads {
	width: 125px;
	height: 125px;
	float: left;
	border: 1px solid #000000;
	margin-top: 5px;
	margin-left: 0px;
	margin-right: 20px;
	margin-bottom: 20px;   
}

Perhatikan, #ads digunakan sebagai selector untuk komponen id bernama “ads”. Nah.. Anda bisa mengatur ukuran ads nya dengan menambahkan properti width dan height pada CSS nya. Tapi Anda bisa pula menghilangkannya. Kalau Anda hilangkan properti ini, maka ukuran div ini akan menyesuaikan ukuran obyek di dalamnya.

Properti float digunakan untuk mengatur posisi ads, apakah di sebelah kiri, kanan atau yang lain. Karena dalam contoh ini kita ingin meletakkan ads di sebelah kiri, maka kita gunakan properti float: left.

Selain itu, Anda bisa pula menambahkan garis border di sekeliling adsnya. Dalam contoh di atas, lebar bordernya adalah 1px, solid (garis tanpa putus) dan berwarna hitam (#000000).

Untuk mengatur posisi margin, dapat Anda tambahkan properti margin-top, margin-bottom dsb.

OK… itu saja caranya. Dan hasilnya, dapat Anda lihat akan muncul floating ads di setiap postingan Anda di Wordpress.

OK… selamat mencoba, dan mudah-mudahan artikel ini dapat meningkatkan CTR Anda.

Beberapa artikel terkait

• Plugin Wordpress Untuk Menampilkan Artikel Terkait
• Plugin Wordpress untuk Menampilkan Judul Artikel dalam Kategori yang Sama
• YARPP, Plugin Wordpress Alternatif Untuk Menampilkan Artikel Terkait
• Menampilkan Pesan Teks Pada Postingan Wordpress Berkategori Tertentu
• Cara Mudah untuk Upgrade Wordpress Anda
• Membuat Equation di Wordpress
• Jenis-jenis “Role” di Wordpress Dan Haknya
• Install Plugin Random Post di Wordpress
• Free E-book Wordpress Tutorial
• Mengintip Fitur Terbaru di Wordpress 2.8