Pasang Iklan Melayang jQuery (Ads Popout)

 
Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode : ]]></b:skin>
7. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini sebelum atau diatas kode ]]></b:skin> .

#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}

8. Selanjutnya Cari kode : </head> . Lalu letakkan Kode berikut sebelum atau diatas kode </head>

<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>

9. Cari kode : </body>, lalu letakkan Kode berikut diatasnya.

<div id='infout'>
 <div id='judul'>
  <a id='buka'><img src='http://lh3.ggpht.com/_6-JIvzw7Lbs/TO6BL-H95eI/AAAAAAAAABM/HJduGDoDvgg/s800/cap-popout.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://www.uttafreak-987.co.cc/2011/04/pasang-iklan-melayang-jquery-ads-popout.html' title='Informasi Menarik dari Sponsor' target='_blank'><img src='http://lh3.ggpht.com/_6-JIvzw7Lbs/TO6BLxZ9MzI/AAAAAAAAABI/_TTRbhV3YMk/s800/ads-popout.png' width='300' height='330' alt=''/></a>
 </div>
</div>

NB: teks yang berwarna orange, anda bisa ganti sesuai apa yang anda inginkan

10. Save

♂ Good Luck ♀

Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's

Related Post