scribble

Scribble

About Blog GitHub

13 Jul 2011
Implementing Slides in Blogger

Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.Slides is compatible with all modern web browsers and jQuery versions 1.4.4+.







             


Steps to Add it to Blogger:




1.Login to the Blogger account



2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it.

<style>
/*
Resets defualt browser settings
reset.css
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
:focus { outline:0; }
a:active { outline:none; }
body { line-height:1; color:black; background:white; }
ol,ul { list-style:none; }
table { border-collapse:separate; border-spacing:0; }
caption,th,td { text-align:left; font-weight:normal; }
blockquote:before,blockquote:after,q:before,q:after { content:""; }
blockquote,q { quotes:"" ""; }

/*
Page style
*/
body {
font:normal 62.5%/1.5 Helvetica, Arial, sans-serif;
letter-spacing:0;
color:#434343;
padding:20px 0;
position:relative;
text-shadow:0 1px 0 rgba(255,255,255,.8);
-webkit-font-smoothing: subpixel-antialiased;
}

#container {
width:310px;
padding:10px;
margin:0 auto;
position:relative;
z-index:0;
}

#example {
width:330px;
height:350px;
position:relative;
}

#ribbon {
position:absolute;
top:-3px;
left:-15px;
z-index:500;
}

#frame {
position:absolute;
z-index:0;
width:469px;
height:341px;
top:-3px;
left:-80px;
}

#slides {
position:absolute;
top:15px;
left:4px;
z-index:100;
}

/*
Slides container
Important:
Set the width of your slides container
Set to display none, prevents content flash
*/

.slides_container {
width:300px;
overflow:hidden;
position:relative;
display:none;
}

/*
Each slide
Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display block
*/

.slides_container div.slide {
width:300px;
height:270px;
display:block;
}


/*
Next/prev buttons
*/

#slides .next,#slides .prev {
position:absolute;
top:107px;
left:-39px;
width:24px;
height:43px;
display:block;
z-index:101;
}

#slides .next {
left:315px;
}
/*
Pagination
*/

.pagination {
margin:26px auto 0;
width:100px;
}

.pagination li {
float:left;
margin:0 1px;
list-style:none;
}

.pagination li a {
display:block;
width:12px;
height:0;
padding-top:12px;
background-image:url(http://1.bp.blogspot.com/-Nl5EYzENLjY/Ti7MbcfSgLI/AAAAAAAAAxo/-ljrbpuaFco/s1600/pagination.png);
background-position:0 0;
float:left;
overflow:hidden;
}

.pagination li.current a {
background-position:0 -12px;
}

/*
Caption
*/

.caption {
z-index:500;
position:absolute;
bottom:-35px;
left:0;
height:30px;
padding:5px 20px 0 20px;
background:#000;
background:rgba(0,0,0,.5);
width:270px;
font-size:1.3em;
line-height:1.33;
color:#fff;
border-top:1px solid #000;
text-shadow:none;
}
/*
Footer
*/

#footer {
text-align:center;
width:270px;
margin-top:9px;
padding:4.5px 0 18px;
border-top:1px solid #dfdfdf;
}

#footer p {
margin:4.5px 0;
font-size:1.0em;
}

/*
Anchors
*/

a:link,a:visited {
color:#599100;
text-decoration:none;
}

a:hover,a:active {
color:#599100;
text-decoration:underline;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://slidesjs.com/examples/images-with-captions/js/slides.min.jquery.js"></script>
<script>
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'http://3.bp.blogspot.com/-rUp0q1yOdRA/Ti7MbHaT2jI/AAAAAAAAAxk/Sygb-pLtS5E/s1600/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
});
</script>



This plugin interferes with the CSS of the Blogger Templates so please implement with care.



2.Go to the Post/Page you want to add Slides and then go to Edit HTML tab .



3.Now copy the code from below and paste it there.


<style>
/*
Resets defualt browser settings
reset.css
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
:focus { outline:0; }
a:active { outline:none; }
body { line-height:1; color:black; background:white; }
ol,ul { list-style:none; }
table { border-collapse:separate; border-spacing:0; }
caption,th,td { text-align:left; font-weight:normal; }
blockquote:before,blockquote:after,q:before,q:after { content:""; }
blockquote,q { quotes:"" ""; }

/*
Page style
*/
body {
font:normal 62.5%/1.5 Helvetica, Arial, sans-serif;
letter-spacing:0;
color:#434343;
padding:20px 0;
position:relative;
text-shadow:0 1px 0 rgba(255,255,255,.8);
-webkit-font-smoothing: subpixel-antialiased;
}

#container {
width:310px;
padding:10px;
margin:0 auto;
position:relative;
z-index:0;
}

#example {
width:330px;
height:350px;
position:relative;
}

#ribbon {
position:absolute;
top:-3px;
left:-15px;
z-index:500;
}

#frame {
position:absolute;
z-index:0;
width:469px;
height:341px;
top:-3px;
left:-80px;
}

#slides {
position:absolute;
top:15px;
left:4px;
z-index:100;
}

/*
Slides container
Important:
Set the width of your slides container
Set to display none, prevents content flash
*/

.slides_container {
width:300px;
overflow:hidden;
position:relative;
display:none;
}

/*
Each slide
Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display block
*/

.slides_container div.slide {
width:300px;
height:270px;
display:block;
}


/*
Next/prev buttons
*/

#slides .next,#slides .prev {
position:absolute;
top:107px;
left:-39px;
width:24px;
height:43px;
display:block;
z-index:101;
}

#slides .next {
left:315px;
}
/*
Pagination
*/

.pagination {
margin:26px auto 0;
width:100px;
}

.pagination li {
float:left;
margin:0 1px;
list-style:none;
}

.pagination li a {
display:block;
width:12px;
height:0;
padding-top:12px;
background-image:url(http://1.bp.blogspot.com/-Nl5EYzENLjY/Ti7MbcfSgLI/AAAAAAAAAxo/-ljrbpuaFco/s1600/pagination.png);
background-position:0 0;
float:left;
overflow:hidden;
}

.pagination li.current a {
background-position:0 -12px;
}

/*
Caption
*/

.caption {
z-index:500;
position:absolute;
bottom:-35px;
left:0;
height:30px;
padding:5px 20px 0 20px;
background:#000;
background:rgba(0,0,0,.5);
width:270px;
font-size:1.3em;
line-height:1.33;
color:#fff;
border-top:1px solid #000;
text-shadow:none;
}
/*
Footer
*/

#footer {
text-align:center;
width:270px;
margin-top:9px;
padding:4.5px 0 18px;
border-top:1px solid #dfdfdf;
}

#footer p {
margin:4.5px 0;
font-size:1.0em;
}

/*
Anchors
*/

a:link,a:visited {
color:#599100;
text-decoration:none;
}

a:hover,a:active {
color:#599100;
text-decoration:underline;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://slidesjs.com/examples/images-with-captions/js/slides.min.jquery.js"></script>
<script>
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'http://3.bp.blogspot.com/-rUp0q1yOdRA/Ti7MbHaT2jI/AAAAAAAAAxk/Sygb-pLtS5E/s1600/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
});
</script>



This plugin interferes with the CSS of the Blogger Templates so please implement with care.

4.Now to implement this, just copy this code wherever you want the Slideshow to appear:



<div id="container">
<div id="example">
<div id="slides">
<div class="slides_container">
<div class="slide">
<a href="http://www.flickr.com/photos/jliba/4665625073/" title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/images-with-captions/img/slide-1.jpg" width="300" height="270" alt="Slide 1"></a>
<div class="caption" style="bottom:0">
<p>
Happy Bokeh Thursday!</p>
</div>
</div>
<div class="slide">
<a href="http://www.flickr.com/photos/stephangeyer/3020487807/" title="Taxi | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/images-with-captions/img/slide-2.jpg" width="300" height="270" alt="Slide 2"></a>
<div class="caption">
<p>
Taxi</p>
</div>
</div>
<div class="slide">
<a href="http://www.flickr.com/photos/childofwar/2984345060/" title="Happy Bokeh raining Day | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/images-with-captions/img/slide-3.jpg" width="300" height="270" alt="Slide 3"></a>
<div class="caption">
<p>
Happy Bokeh raining Day</p>
</div>
</div>
<div class="slide">
<a href="http://www.flickr.com/photos/b-tal/117037943/" title="We Eat Light | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/images-with-captions/img/slide-4.jpg" width="300" height="270" alt="Slide 4"></a>
<div class="caption">
<p>
We Eat Light</p>
</div>
</div>
<div class="slide">
<a href="http://www.flickr.com/photos/bu7amd/3447416780/" title="&ldquo;I must go down to the sea again, to the lonely sea and the sky; and all I ask is a tall ship and a star to steer her by.&rdquo; | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/images-with-captions/img/slide-5.jpg" width="300" height="270" alt="Slide 5"></a>
<div class="caption">
<p>
&ldquo;I must go down to the sea again, to the lonely sea and the sky...&rdquo;</p>
</div>
</div>
<div class="slide">
<a href="http://www.flickr.com/photos/streetpreacher/2078765853/" title="twelve.inch | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/images-with-captions/img/slide-6.jpg" width="300" height="270" alt="Slide 6"></a>
<div class="caption">
<p>
twelve.inch</p>
</div>
</div>
<div class="slide">
<a href="http://www.flickr.com/photos/aftab/3152515428/" title="Save my love for loneliness | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/images-with-captions/img/slide-7.jpg" width="300" height="270" alt="Slide 7"></a>
<div class="caption">
<p>
Save my love for loneliness</p>
</div>
</div>
</div>
<a href="#" class="prev"><img src="http://2.bp.blogspot.com/-IJFK6FGw_bU/Ti7MZ4pmyRI/AAAAAAAAAxc/yehaqhk9BJI/s1600/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
<a href="#" class="next"><img src="http://2.bp.blogspot.com/-U4Pd4po17xU/Ti7MZvJ4kpI/AAAAAAAAAxY/HJTWgJuPTno/s1600/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
</div>
<img src="http://3.bp.blogspot.com/-0-CYMaLrTzw/Ti7MapgCAVI/AAAAAAAAAxg/ZUkR86eV2S8/s1600/example-frame.png" width="469" height="341" alt="Example Frame" id="frame">
</div>
</div>



The highlighted lines in the above code are the Slides so you can change them and modify them,give titles,etc

5.Now save the Post/Page.

Note: Please Host all the files on free hosting service like DropBox
 or Blogspot itself!


Another Important thing to note is that all the images used in this tutorial like Next button ,Previous button ,etc are all hosted on Google Code service which are the fastest and most reliable servers on the internet with the least downtime.So you can easily implement this with no hassles for Image Hosting.

             

Til next time,
Prayag Verma at 17:52

scribble

About Blog GitHub