How To Create A Stunning Image Slide Show For Blogger

Hello Friends , I am back with a great and stunning image slide show for blogger blogs, this is a collection of images that we generally call it a slideshow, I got an idea about creating this idea on discussion on Stackoverflow.com . There I read some jquery tutorials and css tricks, after sometime I had created this stunning image slide show. The main feature of this slideshow is that you can customize it according to you and I had used very less css codes in creating this slideshow widget, otherwise it is a great widget for blogger blogs. So let’s start to customize it and I hope that you would like this slideshow widget.

 Must Read also-

• How to add a CSS Navigation bar.
• Add a Welcome Bar on Blog

How To Add Jquery SlideShow To Blogger Templates?

Follow these steps below to install a stunning image slide show to your blogger blog, well I tried my best and I hope that it would work fine in your blog. 

1. Go To Blogger > layout
2. Choose Add a Page Element
3. Then choose HTML/JavaScript widget
4. Inside the widget paste the code below,

<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() {
   $('#HT4U-slider').s3Slider({
      timeOut: 3000
   });
});
</script>
<style>
#HT4U-slider {
   width: 590px; /* Keep it 20px-40PX greater than ACTUAL Image size */
   height: 335px;
   position: relative;
   overflow: hidden;
   margin-left: 0;
}
#HT4U-sliderContent {
   width: 590px;
   position: absolute;
   top: 0;
   margin-left: 0;
}
.HT4U-sliderImage {
   float: left;
   position: relative;
   display: none;  top: 0;
   border:1px solid #ddd;
}
.HT4U-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;
}
.HT4U-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="HT4U-slider">
<ul id="HT4U-sliderContent">
<li class="HT4U-sliderImage">
<img src="URL OF IMAGE" />
<span class="right"><h3>HEADING-1 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>
<li class="HT4U-sliderImage">
<img src="URL OF IMAGE" />
<span class="left"><h3>HEADING-2 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>
<li class="HT4U-sliderImage">
<img src="URL OF IMAGE" />
<span class="top"><h3>HEADING-3 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>
<li class="HT4U-sliderImage">
<img src="URL OF IMAGE" />
<span class="bottom"><h3>HEADING-4 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>
<li class="HT4U-sliderImage">
<img src="URL OF IMAGE" />
<span class="bottom"><h3>HEADING-5 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>
<div class="clear HT4U-sliderImage"></div> </ul>
</div>
<br/> 

How To Customize The Slideshow Code?

Simply replace URL OF IMAGE with the Image link and replace bolded black texts with your preferred headings and descriptions. You can play around how the slider appears. If you want the slider to appear from bottom then change the class to bottom if you want the slider to appear from right then change it to right and so on. If you wish you can set all sliders to bottom or top or to any position you wish.

If you want to slow down the speed with which the slider come and go then set timeOut: 3000 to a higher value like 4000 or 5000.

The default size of all images that I have used in this tutorial is having a width=550px and height=335px. So take images of equal size and then play around the sizes  width: 590px and height: 335px You can note that the width size i.e (590px) is greater than the actual image size of 550px. You will have to keep the width 20-40px greater than the actual image size so that the image may perfectly fit into the slide. You can play with this part and all other parts using our Magic tool i.e

HT4U HTML Editor

How To Add More Images Or Remove an Image From the Slider?

To add an extra image just above this slideshow bar-

<div class="clear HT4U-sliderImage"></div>  

add this code,

<li class="HT4U-sliderImage">

<img src="URL OF IMAGE" />

<span class="bottom"><h3>HEADING GOES HERE</h3>DESCRIPTION GOES HERE</span>

</li>

Finally you have learned how to add a image slide show with help of css in blogger. Now try it on your blog and kindly bookmark our website for reading more interesting blogger tutorials. Kindly Share this page. 

Share This

Related Post