21 March 2012

Tutorial - Widget klik buka + popup link

Selamat sejahtera kepada semua rakan.
Moga sentiasa sihat dan gembira selalu.

Tutorial - Widget klik buka + popup link ini adalah lanjutan dari entry "Dipaksa klik iklan dalam diam?" yang mana terdapat blogger yang mengambil kesempatan meletakkan popup kepada klik buka shoutbox. Ia kelihatan tidak bersalah kerana agak berbeza dengan popup yang bila masuk sahaja halaman blog, terus keluar popup. Cara ini memang menyalahi peraturan pengiklanan dan tidak disukai oleh pelawat. Oleh sebab itu, wujud aplikasi popup blocker untuk menyekat popup ini. Jika popup semasa klik, ia tidak akan diblok oleh aplikasi. Nampak bezanya?

Kesan kepada pelawat?
Memang tidak digemari dan disukai oleh pelawat. Dalam entry "Dipaksa klik iklan dalam diam?" diberi komen oleh rakan-rakan tentang perkara ini.

Namun apa yang Sop lihat, script ini boleh digunakan secara lebih baik. Contohnya jadikan sebagai butang menyumbang yang mana setiap klik akan memberi pendapatan, sebagai butang link (iklan atau page) lebih beriformasi atau juga sebagai butang jawapan kuiz dan sebagainya.

Untuk menggunakan script ini, sila guna kod HTML berikut:
<!-- Start Code | www.gnesop.com -->
<a href='#' input='' onclick='if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Hide&#39;; Popup=window.open(&#39;http://LINK POPUP ANDA&#39;,&#39;Popup&#39;); return true;} else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Show&#39;; Popup=window.open(&#39;http://LINK POPUP ANDA&#39;,&#39;Popup&#39;); return true;}' style='margin-top: 5px;' target='_parent' type='button' value='Show'><center><button>TEKS BUTANG ANDA</button></center></a>
<div id='cboxdiv' style='text-align: center; line-height: 0'>
<div style='display: none;'>
<img border="0" src="http://URL GAMBAR SELEPAS KLIK" />
</div></div>
<!-- End Code | www.gnesop.com -->

Perkara yang perlu diubah adalah seperti berikut:
LINK POPUP ANDA (link yang sama 2 kali)
TEKS BUTANG ANDA
URL GAMBAR SELEPAS KLIK (Sop gunakan gambar, jika ingin masukkan perkara lain, sila gantikan <img border="0" src="http://URL GAMBAR SELEPAS KLIK" />
</div></div> dengan kod anda seperti kod shoutbox dan sebagainya.

Diharap rakan-rakan akan menggunakan script ini secara baik


EmoticonEmoticon