How To Add jQuery Slide Show | Blogger Tips

Many visitors requested me to write an article on how to add Slide Show on Blogger. I have realized the Slide Show is really very cool to enhance the professional look of blog and i have seen slideshow of images, featured articles etc in many website. So I have decide to write post on this. First of all please have a look on how to add JQuery on Blogger, because i have used JQuery to make Slide Show. Lets look how to create SlideShow.

1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Scroll down to where you see]]></b:skin> tag:
3.Copy below code and paste it just before the ]]></b:skin> tag.

/* s3Slider jQuery plugin */
#s3slider {
border:5px solid #000;
width:250px; /* important to be same as image width */
height:190px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}

#s3sliderContent {
margin: 0px; padding:0px;
width:250px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}

.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}

.s3sliderImage span {
position: absolute; /* important */
left: 0;
text-indent: 0px; /* reset blogger */
font: 10px Arial, Helvetica, sans-serif;
padding: 10px 13px;
margin: 0;
width:225px; /* need edit to be same as image width or wider */
background-color: #000;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: block; /* important */
top: 0;

/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}

.clear {
clear: both;
}



4.Scroll down to where you see </head> tag:


5.Copy below code and paste it just before the </head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<!-- begin s3Slider jQuery plugin -->
<script src='http://choenblogspot.googlecode.com/files/s3Slider.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 4000
});
});
</script>



6.Now Click on "Save Templates"


7.Now go to Layout-->page elements and click on 'add a gadget'.


8.Now select html/java script.Add the code given below and click save.

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href="http://makeblogpopular.blogspot.com" target="_blank" rel="nofollow"><img border="0" alt="Free Website Hosting" width="250" src="http://www.000webhost.com/images/banners/120x120/banner1.gif" height="190"/></a>
<span>Free Website Hosting</span>
</li>
<li class="s3sliderImage">
<a href="http://makeblogpopular.blogspot.com" target="_blank" rel="nofollow"><img border="0" alt="Free Domain name" width="250" src="http://2.bp.blogspot.com/_ar9PeTUrwMY/SnGhdlHYuuI/AAAAAAAAAuU/SEP2BlhGyYs/untitled2222.png" height="190"/></a>
<span>Get Free Domain</span>
</li>
<li class="s3sliderImage">
<a href="http://makeblogpopular.blogspot.com" target="_blank" rel="nofollow"><img width="250" height="190" src="http://revtwt.com/images/TwtAd_referral02.jpg"/></a>
<span>Earn money from twitter</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>



Now customize the above code with your preference. I hope you enjoyed the post. Apply this SlideShow tips on your Blog or Website.

Comments Post a Comment

camilynn - April 20, 2010

Hi,

You have an interesting blog. One important thing in SEM is building links through multiple websites. But while hosting multiple websites you should make sure that these websites are hosted on multiple ip addresses. One such websites for SEO hosting is www.multipleiphosting.com.

Anonymous - May 26, 2010

Thanks for the tutorial, its really help me a lot.
There is one thing i want to ask. How to make the text to come from below?
Thank you

Chicken de Frango - May 31, 2010

hi, how are you?
I loved your tutorial, but I have a question:
I would like the slider appear just on the Home page and not on the secondaries pages. Is it possible?

all articles website - September 19, 2010

Thx for the tutorial, i need this..

Leave a Comment