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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdGSRdjiXugFMVrcYFXiUXzFcABLc-tlrY02bzgtUQqRh6ho92yQuRsBJSJMUSoPjOv6b59Xu-IcTINQ4EwfHE4O4B02SnQHYnI65q-p_bthP4KPlI3FICd3124UrpK4CYx9_j4cf7H0En/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/AVvXsEiJTldwbKNC3r_TUZQVpjnvEOK_zkMd_vm4iYMPUtKOYcrWy8g9JN6QgAhju_30cVZjXi-BE7ngcG-4y2auoNmBhOp4Sb3vLIlj3l5TviGu4T1quz27HaQrqe908-pE16frYERIXYdgMfd9/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/AVvXsEhwV0x5D7dGn9CulzXDPB9F3oYpeTi8ftxrt18AgoSrCbfqUN501P2HDMgcHRx5Z4E3tHwZYinlaEnFWIxMLj9Td3HjvISPDV6Exv-iWLRYMuy7K72R7Xu0aexdDzyBeWkLokXGS2E-aQtQ/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/AVvXsEi856wd9yZHAWkqSSSyV-85sWRblky-z0BgG4ulqV9YUBdd7xr7KziteDwELAzUzxgZ7hEdGnqNN5vTaImxxuC17Xf_7lXBueSvsvKkQAR88B4Ik0pjMBJWCdVrdw7Qv5-Kx9LcISwdnh9J/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/AVvXsEiu5Gy3bTh7j1M-UPILXB8E0HaT8rg9QHG2-lr4NYcq_GnjCbxGrjJ77UvxvOKyKG1VvsItjo78kB3a02RoMDpuIVg0NKckJnCQ3y6OxUagWWpdYq8OZCWSWowpcLqBdILg5s80LtSgK0A4/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……
No comments: