How to Add Simple Image Slider With Jquery to Blogger Blogs

Jquery Simple Image Slider with semi transparent Title and Caption. Jquery_{write less. do more.} Jquery is great plugin witch allows to create flash like slick effects in ease and very less weight. this slider is very easy to Install/Integrate on blogger blog. so let’s see…

Before Going to Tutorial Take a Demo of this Slider

How to Integrate Simple Image Slider with Jquery ?

There are 4 Steps
a. Adding CSS code and customization !
b. Adding Jquery Plugin
c. Adding Javascript
d. Finally Adding Slider Widget

Adding CSS code and customization !

1. Go to Blogger Dashboard > Design tab > Edit HTML
2. Find this ]]></b:skin> tag and put below code of section, Just before it!

   #gallery {
   position:relative;
   height:320px; /* Set Height   */
   width:540px;  /* Set Width    */
   overflow:hidden;
   }
   #gallery a {
   float:left;
   position:absolute;
   }
   #gallery a img {
   border:none;
   }
   #gallery a.show {
   z-index:500;
   }
   #gallery .caption {
   z-index:600;
   background-color:#000;
   color:#ffffff;
   height:100px;
   width:100%;
   position:absolute;
   bottom:0;
   }
   #gallery .caption .content {
   margin:5px;
   }
   #gallery .caption .content h3 {
   margin:0;
   padding:0;
   color:#1DCCEF;
   }

3. Save your Template

Adding Jquery Plugin

If you have already have Jquery plugin in your blog, then Ignore this step

Add this code before </head> tag

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

Adding Javascript

Add this code before </head> tag

<script type="text/javascript">
//<!--
$(document).ready(function() {
slideShow();
});
function slideShow() {
var dur= 5000;
$('#gallery a').css({opacity: 0.0});
$('#gallery a:first').css({opacity: 1.0});
$('#gallery .caption').css({opacity: 0.7});
$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
.animate({opacity: 0.7}, 400);
setInterval('gallery()', dur);
}
function gallery() {
var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));
var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));
var caption = next.find('img').attr('rel');
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });
$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
$('#gallery .content').html(caption);
}
//-->
</script>

Adding Slider Widget

1. Go to Blogger Dashboard > Design tab > Page Elements tab
2. Add HTML/JavaScript Gadget any where
3. Put Title Field as Blank
4. Add bellow Html Widget Code in Body of the widget and Customize it

   <div id="gallery">
   
   <!-- Image Slide 1 and must have a class='show' -->
   <a href="Link url" class="show">
   <img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/>
   </a>
   
   <!-- Image Slide 2 -->
   <a href="Link Url" >
   <img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/>
   </a>
   
   <!-- You can add more n more images as link above  -->
   
   <div class="caption"><div class="content"></div></div>
   <div style='clear:both;'/>
   </div>

5. Customization:-

   Replace Link Url with link that you want

   Replace Image url here with Your Image and set it’s width and Height

   Replace This is Title with your Title

   Replace This is Description with with a small Description

6. You can Add more Image slides by Adding following code  just after this <!– You can add more n more images as link above –> tag and Customize it as Like above

   <!-- Image Slide -->
       <a href="Link Url" >
       <img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/>
       </a>

7. Finally Save your Widget!

Take a look of your blog and leave a comment if you like

Slider Credits to Queness