Membuat jQuery Ads Popout

Bismillah. Iklan pada blog bagi sebagian blogger adalah hal penting walau sebagian lagi tidak menyukainya. Terlepas dari suka dan tidak suka, kali ini Blogger Tune-Up akan memberikan artikel yang berkaitan dengan iklan. Sebenarnya telah beberapa kali Blogger Tune-Up menyuguhkan teknik menampilkan iklan, mulai dari Ads Popup^[1], Banner Rotator^[2] dan lain sebagainya. Semua artikel tersebut disuguhkan sebagai alternatif bagi para blogger untuk memilih mana tampilan yang terbaik untuk menampilkan iklan pada blognya.

Ads Popout yang akan disuguhkan sekarang sebenarnya hampir mirip dengan Ads Popup yang pernah dibahas sebelumnya hingga Ads Popup versi update^[3] yang menggunakan CSS3. Tetapi pada jenis Ads Popout akan dilibatkan jQuery dan Plugin jQuery yaitu jQuery Cookie^[4] yang digunakan untuk mengingat bahwa iklan pernah dibuka atau ditutup. Ads Popout lebih enak dilihat dan diakses karena menggunakan ruangan yang sangat sedikit dengan efek buka-tutup (slide-in-slide-out). Selain itu lebih mudah diterapkan pada blogger karena hanya melibatkan beberapa baris kode XHTML, CSS dan JavaScript. (Download terlebih dahulu file pendukung dan upload pada webhosting anda)

Demo jQuery Ads PopoutKlik disini untuk melihat demo jQuery Ads Popout/span>

Integrasi Kode CSS Pada Template

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke bagian "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3:

#infout{margin:0;padding:0;position:absolute;top:250px;left:0;width:320px;height:350px;z-index:100;overflow:hidden;}
#infout a,#infout a img{text-decoration:none;border:0;outline:0}
#infout a span{display:none}
#infout #judul{width:20px;height:350px;position:relative;left:0;z-index:102}
#infout a#tutup{position:absolute;background:transparent url(http://lh3.ggpht.com/_6-JIvzw7Lbs/TO6BMNhIrXI/AAAAAAAAABQ/r4s_MBsv5GM/s800/trans_pixel.gif);top:0;left:230px;height:25px;width:65px;cursor:pointer}
#infout a#buka{cursor:pointer}
#infout #wadah{position:absolute;top:10px;left:20px;margin-left:-300px;z-index:101}

Integrasi Kode jQuery Pada Template

Langkah 5
Cari kode dibawah ini:

</head>

Langkah 6
Masukan (copy paste) kode jQuery dibawah ini diatas kode pada langkah 5:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script language='javascript' src='http://plugins.jquery.com/files/jquery.cookie.js.txt'/>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
 var infoOut = "#infout";
 var infoBox = "#wadah";
 var infoLebar = $(infoBox).width() + $("#judul").width();
 var infoCookie = "infokuki";
 function bukaInfo() {
  $(infoOut).width(infoLebar+"px");
  $(infoBox).animate({marginLeft: "0"},1200)
  $.cookie(infoCookie, null);
 }
 function tutupInfo() {
  $(infoBox).animate({marginLeft: "-"+infoLebar+"px"},1200,"linear",
   function(){ $(infoOut).width($("#judul").width() + "px"); }
  );
  $.cookie(infoCookie,'closed',{expires: 28});
 }
 $("#buka").click(function() {
  if(!$.cookie(infoCookie)) {
   tutupInfo();
  } else {      
   bukaInfo();
  }
  return false;
 });
 $("#tutup").click(function() {
  tutupInfo();
  return false;
 }); 
 if(!$.cookie(infoCookie)) {
  $(infoOut).animate({opacity: 1.0}, 1500, "linear", bukaInfo);
 }
});
//]]></script>

Integrasi Kode XHTML Pada Template

Langkah 7
Cari kode dibawah ini

</body>

Langkah 8
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:

<div id='infout'>
 <div id='judul'>
  <a id='buka'><img src='URL/popout-cap.gif' width='20' height='350' alt='Buka Informasi'/></a>
 </div>
 <div id='wadah'>
  <a id='tutup' title='Tutup Informasi'><span>Tutup</span></a>
  <a href='http://modification-blog.blogspot.com' title='Informasi Menarik dari Sponsor' target='_blank'><img src='URL/popout-ad.png' width='300' height='330' alt=''/></a>
 </div>
</div>

Langkah 9
Simpan template dan preview blog anda...

Keterangan:

• Ubahlah URL sesuai dengan alamat URL yang anda persiapkan (sesuai file yang anda upload pada webhosting)
• Ubahlah http://modification-blog.blogspot.com sesuai dengan URL iklan (alamat URL yang dituju)
• Agar tampilan jQuery Ads Popout tidak ikut bergeser saat halam digeser (tetap pada posisinya) ubah kode position:absolute; menjadi position:fixed; pada langkah 4 baris ke 1

Download Source CodeKlik disini untuk mengunduh sourcecode jQuery Ads Popout

Catatan Kaki:
[1] Ads Popup
[2] Banner Rotator
[3] Ads Popup Update
[4] Klaus Hartl - jQuery Cookie
[5] Credit and Special Thanks to CSSNewbie for great tutorial