Attractive jQuery Slideshow for Blogger

In this post im gonna explain how to add attractive jQuery slideshow to your blogger.You can add this slideshow to top of your posts. Actually this jQuery Slideshow also very easy to add.  Its just widget. Few days ago i posted about Attractive jQuery photo galley. Follow  these step to add  to  your  blog.

Demo

How to add jQuery Slideshow for Blogger

1. Log in to blogger account and Click drop down.

2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below one of below code.

<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieGW5KJECNCCe-Bpd55oibdi3yrtm57w2FAiyvVR66k-M3Yd5FaIDMvb3Xkw2esFc440jXFXnEQTdWhbznhwPUK2DxMCnZkFLSiuLPfwE10rw3eRMmGWcOI2SGmH4SMagD2J73fOMY9AQ/s1600/btrix_image1.jpg" /> 
<span class="left"><h3>
HEADING-1 GOES HERE</h3>
DESCRIPTION GOES HERE</span> 
</li>
<li class="btrix_slider3Image"> 
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhveerqytPqhVzktYdfroQiJWX5RfLFxrGb8i94zqFKmQ4GrOQ8eozB4EmuPi36t-kldrZLKPZ3CS6ufZIHWJGSUNKYuaUsNF5a6Njz6PNuRT55NfqbMQC9vkQU34q4WXrk0p0K4v2fils/s1600/btrix_image2.jpg" /> 
<span class="left"><h3>
HEADING-2 GOES HERE</h3>
DESCRIPTION GOES HERE</span> 
</li>
<li class="btrix_slider3Image"> 
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN2CBX69tPbW9DVgclV-b0wTsPlJqcWFOZaENL3BG18WgkdO_xI2PthtDECsKUJtpOKlCvmeoL1zmy3xDWh7vBmtS2-20sM-eGM1vHchMY5E2xWrInJFsyEdJJmT96hGtkT-oj3voBKuA/s1600/btrix_image3.jpg" /> 
<span class="top"><h3>
HEADING-3 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<li class="btrix_slider3Image"> 
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6WJPt4V1ZoW5ET68EFEIH8blFz9ntw7I1F41CYOYKL0p0sDye2TBPDCe0NaXB8HbPCfSaPXzt5ld5EdMjO5vIWlEBs-UC1rytYGvnQI9cLAKjZBvwJU70Juo9U-AhTailcxV5zL-dnbw/s1600/btrix_image4.jpg" /> 
<span class="bottom"><h3>
HEADING-4 GOES HERE</h3>
DESCRIPTION GOES HERE</span> 
</li>
<li class="btrix_slider3Image"> 
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5J2CKsyJR2F8tyGjzaDBDx42ZmXLFy8rg7MA1izl1XIdqLJZNSPMeBJFnugBb-Ae8X3S-EGwz-JV7wOF6Qp_ow9wj0NUkj5ZDV9cmucXvAKwZAouF4W2VXdl71rDFiXP6_ytPiICFaeU/s1600/btrix_image5.jpg" /> 
<span class="bottom"><h3>
HEADING-5 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<div class="clear btrix_slider3Image">
</div>
</ul>
</div>
<br />

You can change photos by changing Image URLs

5. Now save your HTML/Javascript'.You are done.
Hope this jQuery Slideshow helps to make your blog attractive.leave a comment if need any help.

Share this post