TarmiziShukri's Blog

  • Utama
  • Tips Fotografi
  • Bengkel
  • Arkib
You are here: Home / Tips & Tutorial / Tutorial Menyembunyikan Floating Ads Secara Automatik

Tutorial Menyembunyikan Floating Ads Secara Automatik

Oleh Tarmizi Shukri 16 Comments

Kongsi:
Facebook0
Twitter0
Pinterest0

floating ads, iklan, advertising, innity, nuffnang

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.

iklan, innity, nuffnang, floating ads

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.

Related

Filed Under: Tips & Tutorial11/08/2011

About Tarmizi Shukri

Founder, jurugambar & pereka bentuk grafik separuh masa di bawah label PikselPecah Studio. Separuh masa lagi merupakan pelajar peringkat Sarjana ni UPSI. Sangat suka tempe & kari ayam. ---> Facebook Page | Twitter

Ruang Sembang

  1. JomStadi says

    12/05/2013 at 11:01 AM

    sapa bleh godek2 skrip di atas untuk blogspot? huhuuu..barang baik nih 🙂 tolong2..

    Reply
  2. galihlprakoso.blogspot.com says

    31/05/2012 at 5:57 PM

    Makasih yoo Infonya… 😀 Nice Share

    Reply
  3. sergeant keroro says

    15/08/2011 at 6:55 AM

    bro, ni untuk wordpress je ke? untuk blogspot xde?

    Reply
    • TarmiziShukri says

      15/08/2011 at 7:41 PM

      wordpress je, blogspot tak brp nak pndailah..hehe..

      Reply
  4. SS says

    14/08/2011 at 2:45 AM

    nasib baik aku tak perlu nak setting code auto hide floating ads nih sebab tak bertindan dengan blog aku pun 🙂

    Reply
    • TarmiziShukri says

      14/08/2011 at 1:30 PM

      hehe, bgslah tu.. syg nak buang floating ads ni sebab ramai yg klik kat ctu 🙂

      Reply
  5. Mr Rileks says

    12/08/2011 at 2:05 AM

    thanks tuto nie.. 🙂 mmg poblem kalau iklan kat posisi mcm nie kat skrin kecik… hehe….

    Reply
    • TarmiziShukri says

      12/08/2011 at 10:31 AM

      sama2 🙂

      Reply
  6. liyana says

    11/08/2011 at 6:56 PM

    Yey tq tq nak cuba nnt btw guna wp ke? Activekn plugin mesra mobile la sng user smartphone nk view blog anda hee eh blogspot pn ada tutorial mesra mobile hee salam kenall ;)))

    Reply
    • TarmiziShukri says

      11/08/2011 at 7:54 PM

      yup, wp… mobile plugin ye.. cadangan yg bgs 🙂

      Reply
    • Amirez says

      19/08/2011 at 6:32 PM

      pakai mobile plugin pun ok juga cuma kena cari plugin yg betul2 compatible dgn theme. kebanyakan mobile plugin yg ada skang ni tak compatible

      Reply
      • TarmiziShukri says

        20/08/2011 at 3:50 PM

        pernah try jugak sblm ni, tapi macam tak compatible..

        Reply
  7. Amirez says

    11/08/2011 at 6:55 PM

    owh..ada cara nak hide floating ads rupanya.
    itulah masalahnya floating ads ni bila browser kecik.
    sebab tu aku sediakan close button kat floating ads, tapi masih lagi mengganggu.

    lepas pakai code ni bolehlah setelkan masalah tu nanti 😉
    thanks mizi. thanks gak bagi backlink

    Reply
    • TarmiziShukri says

      11/08/2011 at 7:55 PM

      ada gk buat close button, bila pakai netbook button tu tak nampak.. tpaksa Ctrl – dulu pastu pangkah.. hehe..

      Reply
    • Amirez says

      19/08/2011 at 6:29 PM

      baru je buat. harapnya menjadi 😉

      Reply

Sepatah Dua Kata Boleh?: Cancel reply

tips fotografi terbaik

# Entri Popular Minggu Ini

Kategori

Media Sosial

4,442 Peminat Setia
4,220
0
222
0

Penulis

Untitled-1

Tukang tangkap gambar & penulis di blog ini. Lagi mengenai penulis.

Instagram

Twitter

Tweets by @tarmizishukri
© 2009 - 2014 · Hakcipta Terpelihara · TarmiziShukri's Blog ·
 

Loading Comments...