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
[/sourcecode]
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://butikamalia.com/data/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;
}
[/sourcecode]
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.
Anda ingin mendownload beberapa tool programming 100% gratis?
Silakan download di FREE PROGRAMMING TOOLS.
atau ingin berdonasi untuk pengembangan blog ini cukup dengan $1 via Paypal?
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
Share this article on:
Kata kunci: ads - Wordpress -
itu dengan catatan bukan di wordpress.com ya mas? dalam artian bener2 blog di hosting sendiri yang diinstal wordpress. apa benar?
That’s right mas Banu… Karena di WordPress.com kita tidak bisa mengedit scriptnya.
bagus sekali artikelnya mas, ulasannya sangat lengkap
Terima kasih tutorialnya Pak. Berguna banget.
[...] : http://blog.rosihanari.net/menampilkan-floating-ads-di-setiap-posting-di-wordpress/ [...]
makasih tutorialnya mas
to suryani: sama-sama ya mbak
Terima kasih sekali nih tipsnya mas.
Tak Coba langsung.
makasih infonya mas…
bermanfaat banget…
saya akan praktekkan…
.-= unisa81´s last blog ..Baju Koko Cute Gapura =-.
jadi klo di wordpress.com ga bisa pak?
pak tolong bantu saya make blog saya donk.
amburadul nih T_T
mampir aja http://www.banyaktau.wordpress.com
atau dari email saya jg gpp pak
.-= Headri´s last blog ..Bagaimana Cara mendaftarkan blog di search engine? =-.
to headri: kalo di wordpress.com gak bisa atuh…
Wah, kebetulan saya lagi cari informasi yg ini… rencana mau pasang iklan jg sih di blogku. thank’s infonya
.-= Blogger Ingusan´s last blog ..MERDEKA… =-.
mangstab kang info na.. tar deh kalo sempet di praktekin..
[REQ] bikin script kek gini, tapi pake backgroundnya gambar kang.. jadi biar file/iklannya ada di dalem gambar gitu..
.-= New Bie Oon´s last blog ..Kolak Bukan Makanan Sehat Untuk Berbuka Puasa =-.
to new bie oon: lha fungsinya image background buat apa mas, toh nanti juga ditutup sama gambar iklannya?
kecuali kalo iklannya text doank, no problem
mas kalo nampilin hanya pada 1 posting tertentu saja gimana caranya ?? kalo untuk setiap postingan dah bisa. umpama hanya untuk 1 postingan gmn ya ?
.-= bayu mukti´s last blog ..Bisnis Internet dan Blog =-.
@bayu mukti: apakah yang dimaksud seperti di artikel ini http://blog.rosihanari.net/menampilkan-pesan-teks-pada-postingan-wordpress-berkategori-tertentu ?
Saya banyak menemukan tutorial wordpress yang aplikatif di sini; saya sengaja membookmark untuk mempermudah kunjungan saya di kemudian hari, Insya Allah.
@munawar: silakan mas munawar, ditunggu kunjungan berikutnya ya.
mas rosihanari, mas bisa ga buat tutorial cara menempatkan adsense misal dalam single post saya ingin nempatinnya di paragraf 2 dr artikel, atau mungkin ads keluar setelah berapa kalimat dl postingan trus di wrapping. ak cari2 di google kok blom ada tutorial kayak gitu.
@reem: kalo Anda pakai WordPress sepertinya agak sulit karena anda harus mengutak-atik core scriptnya, bukan di script themenya.
Mas..saya minta ijin ambil artikel2 ya hehe.saya pengin punya blog spt mas bagus!!
Salam kenal
@moch Gator Wiharto: silakan saja mas, asal dicantumkan link sumbernya ya…
permisi ya mas..saya banyak minta ijin copian artikel yg bagus2 itu..terima kasih
Pak..banyak artikel menambah pengetahuan saya ttg wordpress. terima kasih ya. Salam kenal
Thankz berat Pak Ros ^_^
Dapat ilmu baru lagi nih, langsung dijajal
Lumayan buat “Pamer Iklan”, hehehe
mampir lagi mas. ada yang mau saya tanya, artikel ini kan untuk pasang iklan atau banner di dalam postingan, kalau menampilkan artikel terkait ditengah postingan ada gak mas scriptnya. mungkin contonhya sperti punya kompas atau vivanew. kalau nampilin artikel terkait dibawah postingan saya udah pasang. dan blog saya gak punya widget jadi saya butuh scriptnya sperti script floating ads ini mas.
thanks sebelumnya
wah bagus ne boleh di simak artikel nya
cript floating ads yang anda tulis di tutorial ini, melanggar TOS google adsense apa gak?
@cozyblog: nggak papa mas, toh kita gak utak atik script adsense, dan scriptnya tidak ditaruh di frame.
kalo gak melanggar tos langsung di praktekan
saya sudah coba mas tapi kenapa ya, adsnya di dalam postingan bukan floating ?
ga berhasil sob. mungkin theme saya ga support
Thanks
@uphy: iya mas… kadang script theme nya juga pengaruh…
thanks pak info nya…di ctrl + D dulu…
sekalian saya mau nanya nie pak, cara mbuat random post gimana ya pak?
saya mbuat 1 halaman satu postingan penuh, nah saya pengen halaman index kalau di refresh postingan nya selalu berganti…mohon bantuan nya pak..
thanks
Rizki Yudhistira
@rizki: mm… konsepnya sama dengan http://blog.rosihanari.net/membuat-random-quotes-dengan-php mas…. cobalah untuk berlatih sendiri ya..
ok pak dosen, saya coba dulu ya…
kalau menggunakan wordpress, nantinya program yang ini diletakkan di halaman function themes nya kan pak?
thanks udah mau jawab…:)
@rizki: iya, di script single.php