Add Continuous Slideshow to your blog

­
Many of the bloggers have no idea about the hacks
for adding slideshow feature to their blog even if; their blog template doesn’t
support slideshow. If they need slideshow feature in their blog, they begin to
search for new slideshow featured template. They even have no idea that they
can change their template into slideshow featured one.
In this tutorial I am going to introduce a stunning
continuous slide show which can be added to any of your blog template which lets
you showcase images in a reel like
fashion, one image at a time and in a continuous manner. This slideshow reel
can be played from left to right (horizontally) and pauses on Mouseover with
the controls to allow users to manually move the reel forward and backwards.The
Features of this slide show are:-
  • Slideshow automatically pauses on Mouseover.
  • Displays images one at a time in a continuous manner.
  • Controls to allow users to manually move the reel
    forward and backwards.
  • Slideshow with preview feature.
For viewing demo of this slideshow
click here.
If you want this slideshow in your
blog. follow the given instructions
1.   Sign
in to blogger
2.   Go
to design>Edit HTML
3.   Find
the </head> tag (press ctrl + F to open the find box and copy the code to
find box for quick finding)
4.   Above
that code copy the given code

<!– Start Sabin SlideShow HEAD section –>

<style>/* bottom center */
#wowslider-container1  .ws_bullets {
bottom:20px;
left:48%;
}
#wowslider-container1  .ws_bullets div{
left:-50%;
}
/* Image container style */
#wowslider-container1{
width:800px;
height:390px;
position:absolute;
margin:0 auto;
z-index:100;
background-image: url(http://1.bp.blogspot.com/-dauyzotBNL0/TiKhVxzl65I/AAAAAAAAAbc/jhj8_xwkIaQ/s1600/bg.png);
border:10px solid #fff;
}
#wowslider-container1 .ws_images{
position: absolute;
left:15px;
top:15px;
width:760px;
height:360px;
overflow:hidden;
}
#wowslider-container1 .ws_images img{
top:0;
left:0;
border:0 none;
}

/* Navigation arrows for preview mode */
#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev{
outline:none;
position:absolute;
display:none;
top:50%;
width:56px;
height:56px;
margin:-28px 0 0 0;
z-index:60;
cursor:pointer;
opacity:0.6;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
#wowslider-container1 a.ws_next{
right:20px;
background:#000 url(http://3.bp.blogspot.com/-_BNTy1hI9cc/TiKhqy177FI/AAAAAAAAAcE/ug3VsZ-KNSE/s1600/next_photo.png) no-repeat 50% 50%;
}
#wowslider-container1 a.ws_prev{
left:20px;
background:#000 url(http://3.bp.blogspot.com/-eTfM3fyMtJA/TiKhrMhiM6I/AAAAAAAAAcM/4pZofHBuZkQ/s1600/prev_photo.png) no-repeat 50% 50%;
}
* html #wowslider-container1 a.ws_next,* html #wowslider-container1 a.ws_prev{display:block}
#wowslider-container1:hover a.ws_next, #wowslider-container1:hover a.ws_prev {display:block}

#wowslider-container1 a.ws_next:hover, #wowslider-container1 a.ws_prev:hover{
opacity:0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}

/* bullets */
#wowslider-container1  .ws_bullets{
position:absolute;
z-index:70;
}
#wowslider-container1 .ws_bullets a {
position:relative;
background:url(“http://1.bp.blogspot.com/-CaF0G6oVEO4/TiKhWFF0DDI/AAAAAAAAAbs/IVyl2Tqfmfo/s1600/bullet.png “) no-repeat scroll 0 0 transparent;
border:0 none;
display:block;
float:left;
cursor:pointer;
height:10px;
margin-right:4px;
text-indent:-9999px;
width:10px;
z-index:100;
outline:none;
}
#wowslider-container1 a.ws_selbull,#wowslider-container1 a.ws_overbull,#wowslider-container1 .ws_bullets a:hover{
background-position:100% 0;
}

#wowslider-container1 .ws-title{
position:absolute;
display:block;
bottom: 20px;
left: 20px;
margin-right:25px;
padding:10px;
background-color:black;
color:white;
z-index: 50;
opacity:0.5;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
font-family: Tahoma,Arial,Helvetica;
font-size: 14px;
height:17px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
#wowslider-container1 .ws-title div{
padding-top:5px;
font-size: 12px;
}#wowslider-container1 .ws_bullets  a img{
text-indent:0;
display:block;
bottom:10px;
left:-120px;
visibility:hidden;
position:absolute;
-moz-box-shadow: 0 0 5px #999999;
box-shadow: 0 0 5px #999999;
border: 5px solid #FFFFFF;
}
#wowslider-container1 .ws_bullets a:hover img{
visibility:visible;
}

#wowslider-container1 .ws_bulframe div div{
height:90px;
overflow:visible;
position:relative;
}
#wowslider-container1 .ws_bulframe div {
left:0;
overflow:hidden;
position:relative;
width:240px;
}
#wowslider-container1  .ws_bullets .ws_bulframe{
display:none;
bottom:15px;
overflow:visible;
position:absolute;
cursor:pointer;
-moz-box-shadow: 0 0 5px #999999;
box-shadow: 0 0 5px #999999;
border: 5px solid #FFFFFF;
}
#wowslider-container1 .ws_bulframe span{
display:block;
position:absolute;
bottom:-11px;
margin-left:-9px;
left:120px;
background:url(http://4.bp.blogspot.com/-bNatW24VQ80/TiKhrT0CLOI/AAAAAAAAAcU/qK7nmzJcrKY/s1600/triangle.png);
width:15px;
height:6px;
}
</style>
<script type=”text/javascript” src=”http://www.wowslider.com/images/engine/jquery.js “></script>
<script type=”text/javascript” src=”http://www.wowslider.com/styles/a.js”></script>

<!– End Sabin SlideShow HEAD section –>

 

5.Save your template Go to design
·       Click
on  Page Elements
·       Then  Add a gadget and choose HTML/java script

 

6.Copy and Paste the given code(Edit the url of the
images portion )

<!– Start www.sabinbhatta.tk SlideShow BODY section –>
<div id=”wowslider-container1″>
<div class=”ws_images”>
<a href=”#”><img src=”Your Image URL here” alt=”” title=”” id=””/></a>
<a href=”#”><img src=”Your Image URL here” alt=”” title=”” id=””/></a>
<a href=”#”><img src=”Your Image URL here ” alt=”” title=”” id=””/></a>
<a href=”#”><img src=”Your Image URL here ” alt=”” title=”” id=””/></a>
<a href=”#”><img src=”Your Image URL here” alt=”” title=”” id=””/></a>
<a href=”#”><img src=”Your Image URL here” alt=”” title=”” id=””/></a>
<a href=”#”><img src=”Your Image URL here” alt=”” title=”” id=””/></a>
</div>

<a style=”display:none” href=”http://sabinbhatta.blogspot.com”>jQuery Slide Show by www.sabinbhatta.tk</a>
</div>
<script type=”text/javascript” src=”http://www.wowslider.com/images/demo/mac-stack/engine1/script.js”></script>

<!– End www.sabinbhatta.tk SlideShow BODY section –>

 

7. Replace Your Image URL here with
the url of the slideshow images and Your
Image Preview URL here with
the url of smallsize of slideshow images for privewing.
Modification that can be done to the
above css code
1.Replace the red marked absolute with relative if you want the slide show container
to be appeared on centre.
2.The width
and height of the wowslider-container1 .ws_images and wowslider-container1 can be
adjusted according to your need and size of the image.
That’s
it………..Enjoy………
Please
Comment regarding this post.Feel free to comment if you have any problem or
views regarding any post……

You may also like...

4 Responses

  1. sandeep says:

    awesome 🙂 good post 🙂 bookmarked your blog 🙂 this is mine http://giddy-zone.blogspot.com/

  2. How to make many slideshows in one blog-post? Combining the two "body-code" in one blog-post does not work.
    http://dl.dropbox.com/u/2812246/Forums/Not_work_slideshow.JPG

  3. Anonymous says:

    @АлексарYou neednot to copy the css code twice but add the html tag as number of times you need slideshow

  4. Vote4Karn says:

    I have include the html at the start of a post and the slider overlays the first image and text of the post.

    I want to include within a post, the slider and then the post text.

Leave a Reply

Your email address will not be published. Required fields are marked *