Tutorial Menyembunyikan Floating Ads Secara Automatik

Meletakkan iklan di tempat yang strategik sangat penting untuk mendapatkan earning yang tinggi terutama untuk kempen CPC (Cost Per Click). Floating Ads adalah salah satu cara meletak iklan di blog yang aku rasa agak bijak, sebab iklan akan statik pada satu tempat walaupun korang scroll ke atas dan ke bawah. Kalau korang nak tutorial pasang float ads, korang boleh terjah entri “Tutorial Floating Ads” di blog Amirez.

Satu masalah floating ads iaitu bila kita menggunakan netbook yang mempunyai resolusi yang kecil berbanding laptop biasa, float ads akan bertindan dengan kandungan blog dan mengganggu konstrentasi pembaca blog. Kan dah hilang seorang pembaca kat situ, rugi kan? Sebab tu aku tak pasang floating ads, sehingga aku terjumpa cara nak sembunyikan floating ads untuk komputer yang berskrin kecik.

Floating ads yang bertindan dengan blog

Macam mana caranya?

1. jQuery

{code type=codetype}<?php wp_enqueue_script(‘jquery’); ?>{/code}

copy dan paste script  jQuery di atas ke dalam  header.php sebelum <?php wp_head(); ?>

 

2. Buka footer.php

Copy dan paste script di bawah ke dalam footer.php. Paste kat mana-mana pun boleh, tapi nak senang paste je kat bawah sekali.

<script type="text/javascript">
	jQuery(document).ready(function($) {
		// Show social voter only if the browser is wide enough.
		if( $(window).width() <= 1024 )
				$('#cry').hide();	

		// Update when user resizes browser.
		$(window).resize(function() {
			if( $(window).width() <= 1024 ) {
				$('#cry').hide();
			} else {
				$('#cry').show();
			}
		});
	});
</script>

Kalau korang tengok script di atas, browser akan paparkan floating ads jika lebar tak kurang atau sama dengan 1200 piksel. Kalau kurang daripada 1200 piksel, secara automatik floating ads akan hilang supaya tak bertindan dengan blog. Nilai 1200 tu korang boleh tukar ikut kesesuaian.

 

3. Pasang floating ads

<!-- Float Ads -->
<div id="cry"><div class='widget-content'><div style="position: fixed; bottom: 0px; left:0px;"><p align="left"><a href="#" onclick="document.getElementById('cry').style.display = 'none';"><img src="http://domainaku.com/wp-content/themes/namathemes/images/close-button.gif" alt="close button" /></a></p>
<!-- code -->
letak script iklan korang kat sini
<!-- code-->
</div></div></div>
<!-- End Float Ads -->

Copy dan paste skrip di bawah ke dalam sidebar. Untuk step ke-3, aku rekemen korang pegi ke “Tutorial Floating Ads” di blog Amirez.

*****

Kalau dah siap korang boleh uji dengan menekan butang CTRL dan + serentak. Kalau iklan masih bertindan, korang ubah nilai width tadi. Selamat mencuba 🙂

UPDATE: 20/08/11

Ada perubahan sikit pada kod (2), sebab ada yang komplen float ads masih muncul kalau online guna netbook. Kalau nak uji kena pakai netbook yang width 1024, cara CTRL + tak berkesan untuk laptop biasa.