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 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.
- Go
To Blogger > layout
- Choose Add
a Page Element
- Then
choose HTML/JavaScript widget
- 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.
1 comments:
Click here for commentsI Want to use this medium in appreciating cyber golden hacker , after being ripped off my money,he helped me find my cheating lover he helped me hack her WHATSAPP, GMAIL and kik and i got to know that he was cheating on me, in less than 24 hours he helped me out with everything, cybergoldenhacker is trust worthy and affordable contact him on: cybergoldenhacker at gmail dot com
ConversionConversion EmoticonEmoticon