Tuesday, March 1, 2011

How to add Jquery Image Slide Show for blogger

How to add Jquery Image Slide Show for blogger 


1. Log in to your blogger and Go to Design >Page element

2. Now click 'Add a Gadget' and select 'HTML/Javascript'

3.Past below code.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
   $('#MBT-slider').s3Slider({ 
      timeOut: 3000 
   }); 
}); 
</script>
<style>
#MBT-slider { 
   width: 590px; /* Keep it 20px-40PX greater than ACTUAL Image size */ 
   height: 335px; 
   position: relative; 
   overflow: hidden; 
   margin-left: 0; 
}
#MBT-sliderContent { 
   width: 590px; 
   position: absolute; 
   top: 0; 
   margin-left: 0; 
}
.MBT-sliderImage { 
   float: left; 
   position: relative; 
   display: none;  top: 0; 
   border:1px solid #ddd;
}
.MBT-sliderImage 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; 
}
.MBT-sliderImage 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> 

<div id="MBT-slider"> 
<ul id="MBT-sliderContent">
<li class="MBT-sliderImage"> 
<img src="Slide-Image-Address" /> 
<span class="right"><h3>Title-of-pic</h3>Slide Description [...] </span> 
</li>
<li class="MBT-sliderImage"> 
<img src="Slide-Image-Address 2" /> 
<span class="left"><h3>Title-of-pic 2</h3>Slide  Description [...] </span> 
</li>

<li class="MBT-sliderImage"> 
<img src="Slide-Image-Address 3" /> 
<span class="top"><h3>Title-of-pic-3</h3>Slide Description [...] </span>
</li> 
<li class="MBT-sliderImage"> 
<img src="Slide-Image-Address 4" /> 
<span class="bottom"><h3>Title-of-pic 4</h3>Slide  Description [...] </span> 
</li>

<li class="MBT-sliderImage"> 
<img src="Slide-Image-Address 5" /> 
<span class="bottom"><h3>Title-of-pic-5</h3>Slide  Description [...] </span>
</li> 
<div class="clear MBT-sliderImage"></div> 
</ul> 
</div>
<br/>

4. Now replace Slide-Image-Address   Title-of-pic-3  Slide Description [...] with your slide content.

5. After click save you are done.

18 comments:

  1. Hey,

    Thanks for this info and all the rest. It's really helpful to us bloggers.

    ReplyDelete
  2. Waste Post. Not working

    ReplyDelete
  3. Cool. Will try this for my blog.

    ReplyDelete
  4. to :Anonymous

    this is working post friend.try it again..

    ReplyDelete
  5. thank you . . I was searching a long time for something like this . Keep up the good work

    ReplyDelete
  6. This doesn't work on my blog. :( any other way?

    ReplyDelete
  7. Try with this post.
    http://www.bloggertrix.com/2011/06/cool-jquery-slide-show-to-your-blogger.html

    ReplyDelete
  8. hi, can i use this code on my web page how??

    ReplyDelete
  9. i can't understand your question picmix66.
    follow above instruction and add it to your blog.

    ReplyDelete
  10. nice post. Thanks!! anyway, the picture change really fast, how to reduce the speed?

    ReplyDelete
  11. Aiskrim@
    Above code,you can see "timeOut: 3000". so,change 3000 as highest amount.
    3000 = 3seconds..

    ReplyDelete
  12. Is there anyway that this can be turn into a thumbnails slideshow?? Thax.

    ReplyDelete
  13. Thanks a lot! All I have to do is customize the size and colour.

    Anyway, how can remove a black dot that appears on the left side?

    ReplyDelete
  14. Hi..
    Thanks for sharing this information and resources it's really help full for me with the help of this we can improve our designs and development I really inspire with this information thanks

    ReplyDelete
  15. I know this post is old but is it possible if you could help me out. I have a Jquery slideshow on my homepage but I dont want it to appear on my labels page only on the homepage.

    ReplyDelete