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.
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4E_gvo4coR4eC2OzJtpM6L9lv9F-j4-fCVAd-l7lCxz88aK1w-uASHnus223gE-lQU0DT3DlbOGkCocxhmXZ3f0K9WMFEh48U951w6P1du_921Jjkzvx8S40Wc5Yc0WdZRxgojflHvltj/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipO-SCFKVuRztUdZFIIz1MibYumGXSXhqU548lADQHZifkOo-vXlqYxTCL4400lxw0-cMjxQzM_ku7h4DkHQoy68yfOZGv9hq6uY-DwYae1MTDOe5FtLslkapgZOw72UTpik3Xo4ugnpMe/s1600/next_photo.png) no-repeat 50% 50%;
}
#wowslider-container1 a.ws_prev{
    left:20px;
    background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLUIwbeapqCmlkOoeKVTmbARM4nnIEI53fxQsEW3tTYB5xI5DQZNEjd_SPIF-7SVnvw_zBgJ2m-tJRPBmrr6HaDemHo-TFs0R6pEHag5OYxOJKnIeIeA1x3OxTr5Mzzot5sROSqchEw-aV/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvH3nvv7Wxf-5xeZa84_L6LNZG0M0MrnmCf8r8oCbpFzdeqqJdLSbi-BPiDva5gNC0CbFpecuwOCeBaXc-G9dBwJsv52YO9uchpbiWZQ9tywum3Psw1lJLa543vcipmvH9ngX_hpXQVcnk/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG0WlqD-3HznZYEGqql8PtwvRP_pd4SJd6SP0LL_oHrWuTyEahjB6YgmIRZXbwoxN_96CRqg52eRd880ApfZuNqDIx1LQC940aI2krZLYjyrQPBExXyTKhaI6cds530VlzJd8OtFUBDUkQ/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 previewing.

That’s it………..Enjoy………