Cara Membuat Wadah Iklan Buka Tutup

Bismillah. Lagi-lagi kita akan membuat wadah iklan setelah sebelumnya saya telah memposting wadah iklan muncul tiba-tiba kali ini kita akan membuat wadah iklan buka tutup.  Bagaimanakah bentuk wadah iklan ini, ikuti terus tutorial kali ini. Langkah-langkah untuk membuat Cara Membuat Wadah Iklan Buka Tutup sebagai berikut

Download Demo

• Login Blogger lalu pilih Rancangan --> Edit HTML --> Cheklis Expand Template Widget
• Lalu copy kode di bawah ini sebelum 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}

•  Lalu letakkan kode di bawah ini sebelum 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>

•  Setelah itu masukkan kode di bawah ini sebelum kode </body>

<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://bloggerkapuas.blogspot.com' title='Informasi Menarik dari Sponsor' target='_blank'><img src='URL/popout-ad.png' width='300' height='330' alt=''/></a>
</div>
</div>

• Simpan template

Keterangan:

• Ubahlah URL sesuai dengan alamat URL yang anda persiapkan (sesuai file yang anda upload pada webhosting)
• Ubahlah http://bloggerkapuas.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

Sumber:
http://modification-blog.blogspot.com/2010/11/membuat-jquery-ads-popout.html