Cara Menampilkan Iklan Menggunakan LightBox

Posted in Labels: AdSense, Widget | Sunday, March 25, 2012 [ 7:00 AM ]

Home » AdSense , Widget » Cara Menampilkan Iklan Menggunakan LightBox

Keren nich sob... cara unik buat menampilkan sekaligus mengoptimalkan penayangan iklan di blog kita. Tampilan untuk menayangkan iklan menggunakan JQuery LightBox sehingga akan memberikan kesan elegan dan menarik. JQuery LightBox merupakan script untuk menampilkan Popup Window di dalam halaman website / blog tanpa harus membuka tab / window.

JQuery LightBox banyak digunakan para blogger professional untuk menampilkan gambar slideshow, page notification, highlighted text dan sebagainya. Namun untuk keperluan blogger amatir biasanya digunakan untuk buku tamu, facebook like box, twitter conversation dan sebagainya. Pada postingan artikel ini kita akan menggunakan JQuery LightBox untuk menayangkan iklan dari sponsor blog kita. Oke...sob kita lanjutkan ke TKP...

Cara Pemasangan :

Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.

Apabila sobat belum menggunakan kode JQuery silakan copy kode JQuery berikut diatas kode </Head> pada template blog. Jika sudah ada kode JQuery di blognya silakan lewati langkah ini.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>

Cari kode </Head> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode </Head> tersebut.

<script src='http://monozcore-project.googlecode.com/files/colorbox-min.js'></script>
<link href='https://sites.google.com/site/monozcore/home/fbPopup.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
$.colorbox({width:"278px", inline:true, href:"#mdfb"});
});
</script>

Copy-paste kode di bawah ini pada bagian atau di bawah <Body> di kode HTML template blog sobat.

<div style='display:none'>
<div id='mdfb' style='padding:0px; overflow:hidden; background:#fff;'>
Masukan Kode Iklan Sobat Disini...
</div>
</div>

| Blog Tools
- Keterangan :
- Teks yang berwarna biru merupakan tempat untuk menaruh kode script iklan.