This is a nice Jquery widget.It sliding image
gallery.Im using jquery,Css and HTML for this.
you can add your own images with your links.
you can change scrolling left right from hover
buttons.so you can try this for your home page.
Attractive Photo Gallery With Jquery Zoom
Effect is another Jquery image gallery.Follow
these steps to add it to your blog.Im included
demo for this post. you can check it.


Demo

1. Log in to blogger account and Click drop down.
2. Now select "Template" Like Below.


3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.

5.Find this code  by using Ctrl+F  ]]></b:skin>

6.  Paste below code Before ]]></b:skin> code

.js-disabled img { width:100px; height:100px; display:block; float:left; margin:30px 0 0; }
#outerContainer {
width:900px;
height:202px;
 margin:auto;
position:relative; }
#imageScroller{
width:900px;
height:202px;
position:relative;
background:#000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh44Rk6GSSe7TgJvPaOdadmP8s80jvvtqEXl6AC4wSXsrnM_cKm6TarrM47LogHgwY2VPjIeuB2bAQBryLitzygGNEkwshANeH2XUUpNqk0zk4VCJmLiaKB0bEQlgFhqWu6D0gN5UtEDHk/s1600/1.png) no-repeat; }
#viewer {
 width:880px;
height:182px;
overflow:hidden; margin:auto;
position:relative; top:10px; }
#imageScroller a:active, #imageScroller a:visited { color:#000000; }
#imageScroller a img { border:0; }
#controls {
width:900px;
height:47px;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF9mAXNgiji3GBND5PXR9tM-MeqttnxfrkjqPZfVHGiSqzyzEeqFQyI_jLJPxG7-e4m67WtweVkL1GUxo2noJzO0d0Awq1sYjnG3gEpY-y_L8fgVpqOczxoGmO-eKP2N7LmcS7exPZE4s/s1600/1.png) no-repeat; position:absolute;top:4px; left:4px; z-index:10;}
#controls a {
 width:37px;
height:35px;
position:absolute; top:3px; }
#controls a:active, #controls a:visited { color:#0d0d0d; }
#title { color:#ffffff; font-family:arial; font-size:23px; font-weight:bold; width:100%; text-align:center; margin-top:10px; }
#rtl {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ1eTItY-uXmxDXxwVTkohnRYEyLijFYB5CgxJQtxydbTcitSJaiSRExUv7YXO8jqtr4URjSm0L2bQiqB1LDVwKxS7stu58wuKshy3P11F1wfHsqV_73AnLEAKZ6Yu-uYBTGJy_PP4uoo/s1600/rtl.png) no-repeat; left:100px; }
#rtl:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ1eTItY-uXmxDXxwVTkohnRYEyLijFYB5CgxJQtxydbTcitSJaiSRExUv7YXO8jqtr4URjSm0L2bQiqB1LDVwKxS7stu58wuKshy3P11F1wfHsqV_73AnLEAKZ6Yu-uYBTGJy_PP4uoo/s1600/rtl.png) no-repeat; left:99px; }
#ltr {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdy8DmFB4oF7HyE5FJKpz02-XiEOaOsOaoWywnRvkbCBEB7NjwwtN-ZxVvNBiS8KozJgWAkfZzkbtND2wbDebfiUdkkO0-IXN5jXxvE39CuV97hbpq5kAKyd4AT_0M8SluwXZAckW3FmQ/s1600/ltr.png) no-repeat; right:100px; }
#ltr:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidaDDehZzrCiTw772JV75d3ZaFtAoMeT6xIcGhPyxE8y4QKSTr850KtzG7xvAopoCh4u5iqR2R3-YpHjFVmV7Q1Rm5r9KpNEb1O69LELvR-W7sKCeiKZf9yrKzK6_uwo9Kn-wWb9hsL14/s1600/ltr_over.png) no-repeat; }

7. Go to blogger  and click drop-down like  1st step and select Layout

8. Click Add Gadget and select 'HTML/Javascript"

9. Paste below code.

<div id="outerContainer">
<div id="imageScroller">
<div id="viewer" class="js-disabled">
<a class="wrapper" href="Link URL 1" title="First-Image-Title"><img class="logo" id="blogger" src="Image-URL 1" alt="First-On-Hover-Title" /></a>
<a class="wrapper" href="Link URL 2" title="First-Image-Title"><img class="logo" id="digg" src="Image-URL 2" alt="Second-On-Hover-Title" /></a>
<a class="wrapper" href="Link URL 3" title="Second-Image-Title"><img class="logo" id="facebook" src="Image-URL 3" alt="Third-On-Hover-Title" /></a>
<a class="wrapper" href="Link URL 4" title="Third-Image-Title"><img class="logo" id="friendfeed" src="Image-URL 4" alt="Forth-On-Hover-Title" /></a>
<a class="wrapper" href="Link URL 5" title="Forth-Image-Title"><img class="logo" id="stumbleupon" src="Image-URL 5" alt="Fifth-On-Hover-Title" /></a>                                                                                                                                                                                      
<a class="wrapper" href="Link URL 6" title="Sixth-Image-Title"><img class="logo" id="twitter" src="Image-URL 6" alt="Sixth-On-Hover-Title" /></a></div>
   </div>
  </div>
  <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
  <script type="text/javascript">
   $(function() {
     //remove js-disabled class
    $("#viewer").removeClass("js-disabled");
     //create new container for images
    $("<div>").attr("id", "container").css({ position:"absolute"}).width($(".wrapper").length * 170).height(170).appendTo("div#viewer");
    //add images to container
    $(".wrapper").each(function() {
     $(this).appendTo("div#container");
    });
    //work out duration of anim based on number of images (100 second for each image)
    var duration = $(".wrapper").length * 3000;
    //store speed for later (distance / time)
    var speed = (parseInt($("div#container").width()) + parseInt($("div#viewer").width())) / duration;   
    //set direction
    var direction = "rtl";
    //set initial position and class based on direction
    (direction == "rtl") ? $("div#container").css("left", $("div#viewer").width()).addClass("rtl") : $("div#container").css("left", 0 - $("div#container").width()).addClass("ltr") ;
    //animator function
    var animator = function(el, time, dir) {
     //which direction to scroll
     if(dir == "rtl") {
       //add direction class
      el.removeClass("ltr").addClass("rtl");
      //animate the el
      el.animate({ left:"-" + el.width() + "px" }, time, "linear", function() {   
       //reset container position
       $(this).css({ left:$("div#imageScroller").width(), right:"" });
       //restart animation
       animator($(this), duration, "rtl");
       //hide controls if visible
       ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;     
      });
     } else {
       //add direction class
      el.removeClass("rtl").addClass("ltr");
      //animate the el
      el.animate({ left:$("div#viewer").width() + "px" }, time, "linear", function() {    
       //reset container position
       $(this).css({ left:0 - $("div#container").width() });
       //restart animation
       animator($(this), duration, "ltr");
       //hide controls if visible
       ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;   
      });
     }
    }
    //start anim
    animator($("div#container"), duration, direction);
    
    //pause on mouseover
    $("a.wrapper").live("mouseover", function() {
     //stop anim
     $("div#container").stop(true);
     //show controls
     ($("div#controls").length == 0) ? $("<div>").attr("id", "controls").appendTo("div#outerContainer").css({ opacity:0.7 }).slideDown("slow") : null ;
     ($("a#rtl").length == 0) ? $("<a>").attr({ id:"rtl", href:"#", title:"rtl" }).appendTo("#controls") : null ;
     ($("a#ltr").length == 0) ? $("<a>").attr({ id:"ltr", href:"#", title:"ltr" }).appendTo("#controls") : null ;
     //variable to hold trigger element
     var title = $(this).attr("title");
     //add p if doesn't exist, update it if it does
     ($("p#title").length == 0) ? $("<p>").attr("id", "title").text(title).appendTo("div#controls") : $("p#title").text(title) ;
    });
    //restart on mouseout
    $("a.wrapper").live("mouseout", function(e) {
     //hide controls if not hovering on them
     (e.relatedTarget == null) ? null : (e.relatedTarget.id != "controls") ? $("div#controls").slideUp("slow").remove() : null ;
     //work out total travel distance
     var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());      //work out distance left to travel
     var distanceLeft = ($("div#container").hasClass("ltr")) ? totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width())) : totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left")))) ;
     //new duration is distance left / speed)
     var newDuration = distanceLeft / speed;
     //restart anim
     animator($("div#container"), newDuration, $("div#container").attr("class"));
    });       
    //handler for ltr button
    $("#ltr").live("click", function() {    
     //stop anim
     $("div#container").stop(true);
     //swap class names
     $("div#container").removeClass("rtl").addClass("ltr");     
     //work out total travel distance
     var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());
     //work out remaining distance
     var distanceLeft = totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width()));
     //new duration is distance left / speed)
     var newDuration = distanceLeft / speed;
     //restart anim
     animator($("div#container"), newDuration, "ltr");
    });
    //handler for rtl button
    $("#rtl").live("click", function() {    
     //stop anim
     $("div#container").stop(true); 
     //swap class names
     $("div#container").removeClass("ltr").addClass("rtl");
     //work out total travel distance
     var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());
     //work out remaining distance
     var distanceLeft = totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left"))));
     //new duration is distance left / speed)
     var newDuration = distanceLeft / speed;
     //restart anim
     animator($("div#container"), newDuration, "rtl");
    });
   });
  </script>

10. Now save your template. You are done.

Related Posts

• Red Color Glossy CSS Menu Bar For Blogger
• Add Animated CSS Image Labels For Blogger
• Amazing CSS Image Circle Hover Effect For Blogger
• Easy Zoom:Jquery image zoom effect for blogger
• How To Add Pop Up Email Subscription Form For Blogger Using Jquery
• How To Add Cool Jquery Featured Post Slider to Blogger
• How to Add jQuery Nivo Slider to Blogger Blog
• 16 Best Free Blogger Templates Featuring Amazing jQuery Featured Slideshows
• Attractive Jquery Sliding Image Gallery For Blogger
• Cool Floating Recent Tweets Widget for Blogs
• TOP PAYING HOSTING AND DOMAIN NAMES KEYWORDS 2012
• Top 5 Ways To Create Conversions with Hangouts On Air
• Add Facebook Recommendations Bar To Blogger
• jQuery Popup For Facebook LikeBox to Blogger
• The 3 Key Steps to Increasing Web Traffic
• 7 Reasons Why You CAN’T Make Money Blogging
• Blogger Tip: Importing Your Blog
• Increase Traffic By Solving Problems
• How To Add Google News Widget To Blogger
• Best practices to help Google find, crawl, and index your site

***