Share of Mine

Untuk demo lihat disini,Jika sudah lihat dan tertarik,ikuti langkah berikut:

1.Login akun blogger anda masing-masing
2.Pilih rancangan==>edit html
3.Cari kode ]]></b:skin> lalu masukkan kode berikut 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
}
 
4.Cari kode </head> lalu masukkan kode berikut diatas kode tadi:
<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>

 5.Lalu cari kode </body> lalu masukkan kode berikut diatasnya:

<div id='infout'>
 <div id='judul'>
  <a id='buka'><img alt='Buka Iklan' height='350' src='http://1.bp.blogspot.com/-AiYWo2QUhBg/TVzRpLTKOFI/AAAAAAAAAPo/RjcoPCLugcA/s1600/cap-popout.png' width='20'/></a>
 </div>
 <div id='wadah'>
  <a id='tutup' title='Tutup Informasi'><span>Tutup</span></a>
  <a href='http://www.nokia.co.id/' target='_blank' title='Nokia'><img alt='' height='330' src='http://images03.olx.com.pk/ui/2/97/70/40209770_1.jpg' width='300'/></a>
 </div>
</div>

6. Ganti warna merah dengan url dan judul masing-masing
    Ganti warna biru dengan utl gambar iklan masing-masing

7.Tinggal simpan template!

Categories: ,

2 Responses so far.

  1. Rezki Ji says:

    Mantap nih....
    ini yang saya cri2 selama ini :)
    hehee
    -----------
    tks sdh brbgi

Leave a Reply