How to add s3slider to Blogger - (Blog Tutorial)

A while back I wrote a post on how to create an automatic fading slideshow in Blogger. It was a two part post. Part one was about making images big enough for the slideshow and part two was about creating the slideshow in blogger.

After several complaints about the slideshow not working correctly I have decided to make a new tutorial with a new slideshow method. It's the same method Loving Life Designs uses on our home/landing page.

This new method uses the s3slider created by Boban Karišik. You can see a demonstration and read the workshop on his website.  My method doesn't implement the text overlay. I wanted my slideshow, for the home page, to be plain and simple. But I'll be showing you how to add the text over lay if you would want it.

First thing you are going to want to do, just like I explained in part one, is determine how large you want the slideshow to be. In my slideshow example site, my images are 850px wide and 423px heigh. It's important that all the images are the same size and you know the size of your images. Write it down somewhere you'll need to remember.

These are some of the images I used for the slideshow on our home page and on my example site. Michelle created them. I love them.

The next thing you need to do is add the following javascript code to your blog. *before you make any changes to your blog HTML you'll want to save a backup of your blog. If you don't know how to do that post a comment and I'll tell you. 

<script src='http://elizabethspencer.webs.com/jquery.js' type='text/javascript'/>
<script src='http://elizabethspencer.webs.com/s3Slider.js' type='text/javascript'/>

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

To start, you'll want to go your template tab.

Then you'll click on Edit HTML. 

A new window will pop up and you'll want to paste the code, provided above, directly below. </title> and above <b:skin>. Just like pictured below. It's at the top - don't scroll down. 

Save your template - But don't close the box just yet.  *you should've, before you started, saved a backup of your blog. 

Now, we are going to add the following CSS to the template.  (This CSS is for a slideshow without the overlay text - keep reading to find out how to add that back in.)

#s3slider {

border:0px solid #ffffff;

margin: 0 auto 30px;

margin-left:10px;

width:850px; /* important to be same as image width */

height:423px; /* important to be same as image height */

position: relative; /* important */

overflow: hidden; /* important */

}

#s3sliderContent {

margin: 0px;

padding: 0px;

width:850px; /* 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 {

font-size:13pt;

}

.clear {

clear: both;

}

Scroll down til you see. ]]></b:skin>. Directly above that you'll want to paste the code, provided in the box above. Just like I have pictured below. 

This is why remembering what your images size is important. You'll want to replace my width of 850px to that of your images width both in the #s3slider and in the #s3sliderContent. Then you'll want to replace my height of 423px with that of your images height. You only need to change it in the #s3slider. 

Save your template and now close this window. 

If you would like to add the overlay text - replace the following code ---

.s3sliderImage span {
font-size:13pt; 
} 

---with this code.

.s3sliderImage span { 
 position: absolute; /* important */ 
 left: 0; 
 font: 10px/15px Arial, Helvetica, sans-serif; 
 padding: 10px 13px; 
 width: 850px; 
 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: none; /* 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 */ 
}

Play around with the code and make it what you want. You can change the text. You can change the background color. right now it's set to black and the opacity makes it kind of grey. Play around and make it what you want it to be.  - If you need help leave a comment and I'll post another tutorial about it.

FINALLY, we add the HTML to a widget box.

To do this first, you'll want to click on layout.

Then click - where you want to add the slideshow - add a gadget.

Select HTML/Javascript

In the configure box paste the following HTML

<div id="s3slider">

    <ul id="s3sliderContent">

        <li class="s3sliderImage">

            <img src="#">

            <span>Your text comes here</span>

        </li>

        <li class="s3sliderImage">

            <img src="#">

            <span>Your text comes here</span>

        </li>

        <div class="clear s3sliderImage"></div>

    </ul>

</div>

You'll want to replace the # with your images url and change the span to text that matches your image (you don't really have to if you don't use the overlay. )

if you want to add additional images add the following

<li class="s3sliderImage">

            <img src="#">

            <span>Your text comes here</span>

        </li>

above <div class="clear s3sliderImage"></div>.

This is what my code looks like.

<div id="s3slider">

<ul id="s3sliderContent">

<li class="s3sliderImage">

<img border="0" alt="Free Prints" width="850" src="http://i1251.photobucket.com/albums/hh552/lovinglifedesigns/Loving%20Life%20Slideshow/slideshow1.png" height="423" alt="free Prints"/>

<span>Free Prints</span>

</li>

<li class="s3sliderImage">

<img border="0" alt="Free Announcements" width="850" src="http://i1251.photobucket.com/albums/hh552/lovinglifedesigns/Loving%20Life%20Slideshow/slideshow5-1.png" height="423" alt="free Announcements"/>

<span>Free Announcements</span>

</li>

<li class="s3sliderImage">

<img border="0" alt="Free Poster Designs" width="850" src="http://i1251.photobucket.com/albums/hh552/lovinglifedesigns/Loving%20Life%20Slideshow/slideshow4-1.png" height="425" alt="Poster Designs"/>

<span>Poster Design</span>

</li>

<li class="s3sliderImage">

<img border="0" alt="Free Blogger Templates" width="850" src="http://i1251.photobucket.com/albums/hh552/lovinglifedesigns/Loving%20Life%20Slideshow/slideshow2-1.png" height="425" alt="Free Blogger Templates"/>

<span>Free Blogger Templates</span>

</li>

<li class="s3sliderImage">

<img border="0" alt="Custom Blog Designs" width="850" src="http://i1251.photobucket.com/albums/hh552/lovinglifedesigns/Loving%20Life%20Slideshow/slideshow3-1.png" height="425" alt="Custom Blog Design"/>

<span>Custom Blog Design</span>

</li>

<div class="clear s3sliderImage"></div>

</ul>

</div>

Save and cross your fingers - you're done.

What do you think? How did it turn out? Leave a comment linking to your blog.

UPDATE - March 6, 2013 

Lee asked if there was a way to slow down the transitions between the images and if you could add a link to the images.  Both are a pretty simple fix, however, I'll only be getting to fixing the slideshow transition length today. 

The jquery function script has two options. In the current tutorial the only option change we have implemented is the timeOut function which controls the length of time the image is on the screen. The default is 6000. In the current tutorial I have it set to 4000, making it a little faster than the default. It's in milliseconds, by the way, so add or subtract 1000 if you want it on for a longer period of time or a shorter period of time. 

The second option is the length of the transition. In the current tutorial I am using the default length of 1000 (about a second of time). It's using the default because I haven't told it other wise. If you want about one second to remain the current transition speed no need to add the following. If you would like to have it be a slower transiton add fadeTime (make sure the T is capitalized) just behind timeOut:4000 but before }); 

In the example below. I've added a transition speed of about 2 seconds. Make sure there is a comma separating the two function controls. 

<script src='http://elizabethspencer.webs.com/jquery.js' type='text/javascript'/>
<script src='http://elizabethspencer.webs.com/s3Slider.js' type='text/javascript'/>

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