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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpOcIY_xpJHJcFSCjc3Ju6cv-DYd_jDbBF8kQsfyp_zyKka3g9ja6XPym9PoGzyHhumHHYZM9BUHSmC_6b9LiD2X7VpcXMBBj9Ux6i5O3u-grzaFq91CwqUXY5La0_5eLHGpHEBwJiRr-L/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: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8GHqM4zsWXZq5uCjiPDGq1u8VseSqqFwZw_wxRKAeD2sJAgvMW2NaWMtDzc9AdQyTGdd0apFSBRyd-W6a7xhpud_i4bAaXipBfyHbPsc6y6z81a6iDbfHdwYryI173D-0jR8rDpu9qY6f/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpOcIY_xpJHJcFSCjc3Ju6cv-DYd_jDbBF8kQsfyp_zyKka3g9ja6XPym9PoGzyHhumHHYZM9BUHSmC_6b9LiD2X7VpcXMBBj9Ux6i5O3u-grzaFq91CwqUXY5La0_5eLHGpHEBwJiRr-L/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: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8GHqM4zsWXZq5uCjiPDGq1u8VseSqqFwZw_wxRKAeD2sJAgvMW2NaWMtDzc9AdQyTGdd0apFSBRyd-W6a7xhpud_i4bAaXipBfyHbPsc6y6z81a6iDbfHdwYryI173D-0jR8rDpu9qY6f/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH9-ZBL-SBLGJ5CmNZ4FgevVx5LVApbR5GuzA-biKsBZEuWt2OvmHHaHPosGOqoOdGB1NNaH0VK5ry0C52PBNp2jeTvB-tafIbI48MLpxlzTe2n5dOf9DlKd-aqmucZkiKK96AAYAsEGgr/s1600/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a> 
<a href="#" class="next"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5TfIK6IOStlQQL68-mLSkcG_M5uvNITn73nXR6Vn01LkUhx7MIo_iLljGaS_PWSJleqyRj3suEn2TlocPBWdacKQ-gfObDzdS0rnqEiBmi_oj8LIOwXVl6GdB4hk2N5Pg_3vzHgYIF5bN/s1600/arrow-next.png" width="24" height="43" alt="Arrow Next"></a> 
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVCMUXhR9ChJztKPZy8q235Q41z9tNSTREe_URfarR6zcuUZcjSZNoz3EIs6e5tXJJm1ieAHNM7iEKrbLkxu1RRH4g1yBU_DdT9i8_B1QtrLFgQrNFhlyO7jaG6-jiF32CJoDN2ujNjzNx/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.

             


Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Wednesday, July 13, 2011
Post a Comment
Anonymous said...

I really liked your blog! It helped me alot… Awesome. many thanks for your hard work!

Memo Templates

July 15, 2011 at 2:25 AM Delete

Fixed it , now you can download it

March 9, 2012 at 8:13 AM Delete