Add A Attractive SlideShow Widget for Blogger Blog

Unknown
jQuery is a compressive form of JavaScript and has great ability to improve blog appearance. As a developer point of view, it seems to be one of the greatest language which can easily modified your existing CSS entities as previous we launched a tricks, which enable Bloggers blog to displayAdsense ad in between the articles, only jQuery make it possible and you can read complete article from here.

But here we talking about slideshow widget jQuery enables user to easily make slideshow widget that's why we are using it. If we talk about slideshow widget, it has very useful application in blogs you can represent important article, pages and services to readers in a professional manner. Many big blogs generally use this widget, if you are also interested to use this widget for Blogger blog then follow the steps.

Demo

How To Install Slideshow Widget To Blog

  1. Log in to Blogger dashboard.
  2. Click on your blog title and then choose Layout option from left side menu.
  3. Click Add a Gadget button and choose HTML / JavaScript from list. 

  1. Now paste the following code within the text box appeared.
<!--Code at www.allbloggingtricks.com-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
   $('#btrix_slider3').s3Slider({ 
      timeOut: 3000
   }); 
}); 
</script>
<style>
#btrix_slider3 {
   width: 590px; /* Keep it 20px-40PX greater than ACTUAL Image size */
   height: 335px;
   position: relative;
   overflow: hidden;
   margin-left: 0;
}
#btrix_slider3Content {
   width: 590px;
   position: absolute;
   top: 0;
   margin-left: 0;
}
.btrix_slider3Image {
   float: left;
   position: relative;
   display: none;  top: 0;
   border:1px solid #ddd;
}
.btrix_slider3Image span {
position: absolute;
    font: 10px/15px sans-serif,Arial, Helvetica;
    padding: 10px 10px;
    background-color: #000;
    color: #fff;
    filter:'alpha(opacity=70)';
    -moz-opacity: .5;
    -khtml-opacity: .5;
    opacity: .5;
    text-align:justify;
}
.btrix_slider3Image span a {
text-decoration:underline;
color:#FE6602;
}
.clear {
   clear: both;
}
.top {
    top: 0;
    left: 0;
    width: 570px !important;
    height: 70px;
}
.bottom {
    bottom: 0;
    left: 0;
    width: 570px !important;
    height:90px;
}
.left {
    left: 0;
    top: 0;
    width: 110px !important;
    height: 335px;
}
.right {
    right: 0;
    bottom: 0;
    width: 80px !important;
    height: 319px;
}
</style>

<br />
<div id="btrix_slider3">
<ul id="btrix_slider3Content">
<li class="btrix_slider3Image"> 
<img src="http://3.bp.blogspot.com/-cWRM9k-TjHg/UWftkRbSjBI/AAAAAAAAC3Y/x51llDlRvkY/s1600/1.jpg" /> 
<span class="left"><h3>
HEADING HERE</h3>
DESCRIPTION HERE</span> 
</li>
<li class="btrix_slider3Image"> 
<img src="http://2.bp.blogspot.com/-gGIB0ZidIHg/UWftkSVe-UI/AAAAAAAAC3c/oP81rya0UY4/s1600/2.jpg" /> 
<span class="left"><h3>
HEADING HERE</h3>
DESCRIPTION HERE</span> 
</li>
<li class="btrix_slider3Image"> 
<img src="http://1.bp.blogspot.com/-3is-vmPTmGI/UWftkffjuHI/AAAAAAAAC3g/snGy5UH5zkw/s1600/3.png" /> 
<span class="top"><h3>
HEADING HERE</h3>
DESCRIPTION HERE</span>
</li>
<li class="btrix_slider3Image"> 
<img src="http://4.bp.blogspot.com/-rHjVa2jba_U/UWftlBmpHhI/AAAAAAAAC3w/8yMencJfHNY/s1600/5.jpg" /> 
<span class="bottom"><h3>
HEADING HERE</h3>
DESCRIPTION HERE</span> 
</li>
<li class="btrix_slider3Image"> 
<img src="http://1.bp.blogspot.com/-f-3f9LZRVgg/UWftlJ5iqqI/AAAAAAAAC30/RzkkgDEe9bM/s1600/4.png" /> 
<span class="bottom"><h3>
HEADING HERE</h3>
DESCRIPTION HERE</span>
</li>
<div class="clear btrix_slider3Image">
</div>
</ul>
</div>
<br />
<!--Code at www.allbloggingtricks.com-->
  1. And drag this widget from sidebar to above the Blog Posts area as in figure below.
Finally click Save arrangement and see the result on your blog. 

Modification

  • Replace HEADING HERE and DESCRIPTION HERE with corresponding image details.
  • If you want to use different image, change all URL with other image URLs.
If you enjoyed this article, you might also like..

Followers