Kode Script Widget Iklan Mirip Google Adsense

Memiliki blog dengan tampilan menarik dapat memancing para pengunjung untuk berinteraksi lebih lama dihalaman postingan kita. Tidak jarang mereka akan menelusuri lebih jauh guna melihat widget-widget menarik lainya dalam blog kita.

Namun yang terpenting jangan terlalu semangat memasang semua widget yang Anda suka, karena itu dapat memperberat loading blog.

Pada kesempatan kali ini saya akan memamerkan karya unik yang barusaja saya selesaikan kode-kodenya. Saya mendapat inspirasi membuat widget ini dari iklan Google Adsense.

Menurut saya, iklan-iklan tersebut cukup keren dan tidak biasa-biasa saja. Namun saya mengerti bahwa kita tidak boleh membuat sesuatu yang sama persis dengan karya orang lain. Itu dapat melanggar hak cipta dan karya.

Untuk itu, pada widget ini saya buat dengan gaya sedikit berbeda namun masih menarik perhatian menurut saya. Mungkin Anda juga menilai begitu?

Sebelum saya memberikan kode-kodenya, silahkan Anda lihat contohnya dibawah ini:
Widget diatas bisa dijalankan pada perangkat atau browser yang mendukung JavaScript.

HTML
<div id="Kangsigit_allDocument"><noscript>Widget ini membutuhkan JavaScript</noscript><div OnMouseOver="KS_AdsByOpen();" id="KS_Ads_info"><div id="KS_Ads_nonStop"><div id="saran_Kangsigit">Iklan oleh: <b>Kangsigit</b></div><span OnClick="KS_Ads_Close();" id="KS_Ads_hideLink" title="Close">x</span></div><div id="KS_Ads_showNoLink" style="display:none">Iklan telah disembunyikan</div><div OnClick="Ads_Show();" id="KS_Ads_showLink">Tampilkan lagi..</div></div><b OnClick="Ads_CloseALL();" id="Ads_CloseALL">Tutup Permanen</b><div OnMouseOver="KS_AdsByOpen();" class="KS_Ads_infoIcon"><div id="KS_Ads_Pengeras" OnMouseOut="KS_AdsByOut();"><a id="KS_Adsense" OnClick="href='http://www.kangsigit.com'"><img src="http://4.bp.blogspot.com/-zqyibIoSdeA/VXqduXXZrGI/AAAAAAAAB7Q/rFL6zBZ9wsc/s1600/ads-iklan-logo-speaker.gif"/></a></div></div>
<div OnMouseOver="KS_Ads_infoClose();" id="KS_AdsLink" class="KS_AdsLink">

IKLAN ANDA DISINI

</div></div>

JAVASCRIPT
<script type="text/javascript">
function KS_AdsByOpen(){document.getElementById("KS_Ads_info").style.display="block",document.getElementById("KS_AdsLink").style.margin="25px 5px -10px -15px"}function KS_AdsByOut(){document.getElementById("KS_Ads_info").style.display="none",document.getElementById("KS_AdsLink").style.margin="-12px 0px -10px 10px"}function KS_Ads_Close(){document.getElementById("KS_Ads_Pengeras").style.display="none",document.getElementById("saran_Kangsigit").style.display="none",document.getElementById("KS_Ads_info").style.background="transparent",document.getElementById("Kangsigit_allDocument").style.border="0",document.getElementById("KS_Ads_info").style.height="23px",document.getElementById("KS_AdsLink").style.display="none",document.getElementById("KS_Ads_showNoLink").style.display="block",document.getElementById("KS_Ads_hideLink").style.display="none",document.getElementById("Ads_CloseALL").style.display="block",document.getElementById("KS_Ads_showLink").style.display="block"}function Ads_Show(){document.getElementById("saran_Kangsigit").style.display="block",document.getElementById("saran_Kangsigit").style.margin="0px",document.getElementById("KS_Ads_info").style.background="#C1CBF4",document.getElementById("KS_Ads_nonStop").style.padding="5px",document.getElementById("Kangsigit_allDocument").style.border="solid 1px #6E7B9D",document.getElementById("KS_Ads_info").style.height="15px",document.getElementById("KS_Ads_showNoLink").style.display="none",document.getElementById("Ads_CloseALL").style.display="none",document.getElementById("KS_Ads_showLink").style.display="none",document.getElementById("KS_Ads_hideLink").style.display="none",document.getElementById("KS_AdsLink").style.display="block",document.getElementById("KS_Ads_Pengeras").style.display="block",document.getElementById("KS_Adsense").style.display="block"}function KS_Ads_infoClose(){document.getElementById("KS_Ads_info").style.display="none",document.getElementById("KS_AdsLink").style.margin="-12px 0px -10px 10px"}function Ads_CloseALL(){document.getElementById("Kangsigit_allDocument").style.display="none"}
</script>

CSS/ STYLE
<style>
#KS_Ads_Pengeras{font-family:Webdings;font-size:22px;color:blue}
.KS_Ads_infoIcon{width:15px;height:15px;position:absolute;cursor:pointer}
#KS_Ads_info{background:#C1CBF4;height:15px;border-bottom-left-radius:4px;position:absolute;color:#000;font:normal 12px Arial,cursive;overflow:hidden;padding:0 5px 10px 25px;line-height:1.3em;display:none}
#KS_Ads_info,#KS_Ads_Pengeras{opacity:1;filter:alpha(opacity=1);z-index:100;position:absolute}
.KS_AdsLink{margin:-12px 0 -10px 10px}
.KS_AdsLink a,.KS_AdsLink img{text-decoration:none;color:#4D67AB;opacity:.7;filter:alpha(opacity=70)}
.KS_AdsLink a:hover,.KS_AdsLink img:hover{opacity:1;filter:alpha(opacity=100)}
#Kangsigit_allDocument{width:99%;margin:0 auto;border:solid 1px #6E7B9D;color:#6E7B9D}
#KS_Ads_showLink,#Ads_CloseALL{cursor:pointer;text-align:right;color:blue;font-size:16px;display:none;font-family:sans-serif}
#Ads_CloseALL{color:red;padding:7px;border:solid 2px #333}
#KS_Ads_nonStop{padding-top:3px}
#saran_Kangsigit{margin-right:5px}
#KS_Ads_hideLink{display:none;width:20px;box-shadow:0 0 5px rgba(0,0,0,.7);color:#fff;text-align:center;position:absolute;top:0;right:0;cursor:pointer}
#KS_Ads_hideLink:hover{color:#333;font-weight:700}

/* HAPUS UNTUK MEMBUANG TOMBOL CLOSE */
#KS_Ads_hideLink{display:block}
#saran_Kangsigit{margin-right:25px}
</style>

Petunjuk Setelan

Perhatikan custom CSS diatas (yang saya tandai warna biru)
CSS tersebut apabila dihapus akan menghilangkan tombol [x] atau Close.
Jadi apabila Anda tidak ingin menampilkan tombol Close atau Tutup, hapus saja semua CSS yang saya beri warna biru tersebut.

Kode ini hanya support untuk iklan Link saja. Tunggu update selanjutnya yang bisa digunakan untuk iklan bergambar/ banner. 
URL

2 Tanggapan » Lihat

saya masukkan link tapi kok gak sama kaya punya kamu yg dicontoh itu.

saya buat gini <a href="http://domain.com">anchor</a> tapi malah lari keatas. gimana solusinya om

Ohya, untuk penulisan URL perlu menambahkan <ol> atau <ul> dan <li>

Contoh lengkapnya seperti ini: :-d
<ol>
<li>
<a href="http://namasitus.com">Link Anchor pertama</a>
</li>
<li>
<a href="http://namasitus.com">Link Anchor kedua</a>
</li>
<li>
<a href="http://namasitus.com">Link Anchor ketiga</a>
</li>
</ol>

dan seterusnya.
Terimakasih telah mengingatkan saya dan menyempatkan diri berkomentar..

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini