0 Add Jquery Based Sliding Advertisement Panel In Blogger

This is a wonderful script that attracts your curious blog visitors to find out what's hiding behind it, just clicking the button shows and hides the advertisement in sliding panel.

Image 1: without Ad Banner before sliding

Image 2: with Ad Banner after sliding

This is a simnple though awesome css and jquery based add-on for blogger (can be used on other websites too) which carries your adsense or other ads without eating any space on your blog or site. You can assume through the images above what it actually does or you can try it on my this blog as live demo, to do so just click the button on top of this blog (below blog title image) and see the magic in action.

Now, let's move to the installation part. So, to have it working on your blog log on to Blogger > Layout > Edit HTML > (Take Backup of your template) and find (Ctrl + F) ]]></b:skin> and paste the following CSS code just above it:

Code:

#panel {
 height: 100px;
 display: none;
}
.slide {
 margin: 0;
 padding: 0;
 }
.btn-slide { padding-left:15px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1roNPoFeTIKmw0zLPkv1cIe5vZdAgaeeJ8yTJjXrxwSTIm2LEc_d9nWqj8vivSK_M_edIymWamS19O2Q6bwkfJr-quZ8lgrUl9GTmiDuoSsn_ZXaa380_cb5Hcs4ZSEYPFmlmfqSLhtet/s1600/001_53.png) no-repeat;
width:13px;
height:13px;
_width:13px;
_height:13px;
}
.btn-slide:hover { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_W5_bxOipqk8NfnsXqwmoMwsFI9sX2fFUn63C8NeeRqEZtohdl-Judz0ZRZpofUa2GXFMo8t9Gbn7gg5Zo2UEM_qkzDdlsY77D_IJ4rBCRgq4kfBJK_BhV2pqOFbMedcX6uiukZpbWspz/s1600/001_51.png) no-repeat;
width:13px;
height:13px;
_width:13px;
_height:13px;
}
.active { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuosMHeV5-UCqfunsLVrLoNsQwGV5-FOtz-WDNE_p5c9Y51JEDmYIDYSmzo7LArF93Rj4fxJlovFI108xPWGNc4v-E45yCSKyRsqADEOJSZhx0Go8gbQGG1SCkse3hpmgJh4cLh_sebYBC/s1600/001_54.png) no-repeat;
width:13px;
height:13px;
_width:13px;
_height:13px;
}
.active:hover { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGYT7iHSo6CpvnvSDaL7Yw0-ZENRd9h2bI6vwH-TQWg_XD_i0CqgBC5bBeoe2thtXeawWqHRNheIuG0-Prdfk5zv-6b1LPln5je44NaXEua7ny-qeNc2tEyti5IWLoPVh4JTFcnj3VduAV/s1600/001_52.png) no-repeat;
width:13px;
height:13px;
_width:13px;
_height:13px;
}

In the above CSS code you can adjust the height of the sliding panel by changing values in RED text.

Next step is to find (Ctrl + F) </head> and paste the following Javascript Code just above it:

Code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

 $(&quot;.btn-slide&quot;).click(function(){
  $(&quot;#panel&quot;).slideToggle(&quot;slow&quot;);
  $(this).toggleClass(&quot;active&quot;); return false;
 });
 
 
});
</script>

And the most important point, if the above Javascript Code does not work on your blog then replace it with the following one:

Code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){

 jQuery(&quot;.btn-slide&quot;).click(function(){
  jQuery(&quot;#panel&quot;).slideToggle(&quot;slow&quot;);
  jQuery(this).toggleClass(&quot;active&quot;); return false;
 });
 
 
});
</script>

Now, save the template and move to Layout > Add A Gadget > HTML/Javascript and paste the following code in the content area and replace the text in Blue color with your Adsense (or any ad code):

Code:

<div id='panel'>
YOUR ADSENSE AD CODE HERE
</div>
<p class='slide'><a class='btn-slide' href='#' title='Click To Slide'></a></p>

Yes! it's done now. Save the template and view your blog and slide the panel.