How To Add Cool Jquery Featured Slider to Blogger/Websites

1.Login to your blogger dashboard and go to Design --> Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below and click save.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(window).load(function() { 
    $('#slider').nivoSlider(); 
}); 
</script>
<style> 
#slider { 
    position:relative; 
} 
#slider img { 
        position:absolute; 
    top:0px; 
    left:0px; 
    display:none; 
} 
#slider a { 
    border:0; 
    display:block; 
}
.nivo-controlNav { 
    position:absolute; 
    left:260px; 
    bottom:-42px; 
} 
.nivo-controlNav a { 
    display:block; 
    width:22px; 
    height:22px; 
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrEwaaecB9OuVukoFcFpC55UIW6hA6u7D9x-r1FJQ7eM2SnAtmWtauMy-MUYshNQyydZjJ2izsldnNmNJFtqA440oTU7uqJ_QbRBKs65N8kBWyS1hh5Y5t24Rfn6Z6B-51QeV_eCBWkp8/s400/bullets.png) no-repeat; 
    text-indent:-9999px; 
    border:0; 
    margin-right:3px; 
    float:left; 
} 
.nivo-controlNav a.active { 
    background-position:0 -22px; 
}
.nivo-directionNav a { 
    display:block; 
    width:30px; 
    height:30px; 
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbmLjHK9CeKbwHTssucwmMtTH-m8ImM8DMyYhWHG_puOGuRuxNUFKDkDnyqbfFgBfgcIF3pJhhp-5gsAEBejcfTSNR0YyK9W8YBoEG3eC8FjXHhaItygLC67FoK5f4ru48KzpbPzK5iOg/s400/arrows.png) no-repeat; 
    text-indent:-9999px; 
    border:0; 
} 
a.nivo-nextNav { 
    background-position:-30px 0; 
    right:15px; 
} 
a.nivo-prevNav { 
    left:15px; 
}
.nivo-caption { 
    text-shadow:none; 
    font-family: Helvetica, Arial, sans-serif; 
    font-size:16px; 
    padding: 10px 0px; 
} 
.nivo-caption a { 
    color:#efe9d1; 
    text-decoration:underline; 
}
.clear { 
    clear:both; 
}
.nivoSlider { 
    position:relative; 
} 
.nivoSlider img { 
    position:absolute; 
    top:0px; 
    left:0px; 
} 
.nivoSlider a.nivo-imageLink { 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:100%; 
    height:100%; 
    border:0; 
    padding:0; 
    margin:0; 
    z-index:60; 
    display:none; 
} 

.nivo-slice { 
    display:block; 
    position:absolute; 
    z-index:50; 
    height:100%; 
} 
.nivo-caption { 
    position:absolute; 
    left:0px; 
    bottom:0px; 
    background:#000; 
    color:#fff; 
    opacity:0.7; /* Overridden by captionOpacity setting */ 
    width:100%; 
    z-index:89; 
} 
.nivo-caption p { 
    padding:5px; 
    margin:0; 
} 
.nivo-caption a { 
    display:inline !important; 
} 
.nivo-html-caption { 
    display:none; 
} 

.nivo-directionNav a { 
    position:absolute; 
    top:45%; 
    z-index:99; 
    cursor:pointer; 
} 
.nivo-prevNav { 
    left:0px; 
} 
.nivo-nextNav { 
    right:0px; 
} 
.nivo-controlNav a { 
    position:relative; 
    z-index:99; 
    cursor:pointer; 
} 
.nivo-controlNav a.active { 
    font-weight:bold; 
} 
</style>
<div id="slider">

<a href="URL-of-Post 1"><img src="Slide-X-Image-Address 1" alt="" title="Slide X Description [...] 1" /></a> 
 
<a href="URL-of-Post 2"><img src="Slide-X-Image-Address 2" alt="" title="Slide X Description [...] 2" /></a>

<a href="URL-of-Post 3"><img src="Slide-X-Image-Address 3" alt="" title="Slide X Description [...] 3" /></a>

<a href="URL-of-Post 4"><img src="Slide-X-Image-Address 4" alt="" title="Slide X Description [...] 4" /></a>

<a href="URL-of-Post 5"><img src="Slide-X-Image-Address 5" alt="" title="Slide X Description [...] 5" /></a>   


</div>


<br/> 
<br/>

Note : Replace URL-of-Post-X , Slide X Description [...] , Slide-X-Image-Address with your content.

Use width=300px and height=618px images for your slides.

Look at the code below:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(window).load(function() { 
    $('#slider').nivoSlider(); 
}); 
</script>
<style> 
#slider { 
    position:relative; 
} 
#slider img { 
        position:absolute; 
    top:0px; 
    left:0px; 
    display:none; 
} 
#slider a { 
    border:0; 
    display:block; 
}
.nivo-controlNav { 
    position:absolute; 
    left:260px; 
    bottom:-42px; 
} 
.nivo-controlNav a { 
    display:block; 
    width:22px; 
    height:22px; 
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrEwaaecB9OuVukoFcFpC55UIW6hA6u7D9x-r1FJQ7eM2SnAtmWtauMy-MUYshNQyydZjJ2izsldnNmNJFtqA440oTU7uqJ_QbRBKs65N8kBWyS1hh5Y5t24Rfn6Z6B-51QeV_eCBWkp8/s400/bullets.png) no-repeat; 
    text-indent:-9999px; 
    border:0; 
    margin-right:3px; 
    float:left; 
} 
.nivo-controlNav a.active { 
    background-position:0 -22px; 
}
.nivo-directionNav a { 
    display:block; 
    width:30px; 
    height:30px; 
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbmLjHK9CeKbwHTssucwmMtTH-m8ImM8DMyYhWHG_puOGuRuxNUFKDkDnyqbfFgBfgcIF3pJhhp-5gsAEBejcfTSNR0YyK9W8YBoEG3eC8FjXHhaItygLC67FoK5f4ru48KzpbPzK5iOg/s400/arrows.png) no-repeat; 
    text-indent:-9999px; 
    border:0; 
} 
a.nivo-nextNav { 
    background-position:-30px 0; 
    right:15px; 
} 
a.nivo-prevNav { 
    left:15px; 
}
.nivo-caption { 
    text-shadow:none; 
    font-family: Helvetica, Arial, sans-serif; 
    font-size:16px; 
    padding: 10px 0px; 
} 
.nivo-caption a { 
    color:#efe9d1; 
    text-decoration:underline; 
}
.clear { 
    clear:both; 
}
.nivoSlider { 
    position:relative; 
} 
.nivoSlider img { 
    position:absolute; 
    top:0px; 
    left:0px; 
} 
.nivoSlider a.nivo-imageLink { 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:100%; 
    height:100%; 
    border:0; 
    padding:0; 
    margin:0; 
    z-index:60; 
    display:none; 
} 

.nivo-slice { 
    display:block; 
    position:absolute; 
    z-index:50; 
    height:100%; 
} 
.nivo-caption { 
    position:absolute; 
    left:0px; 
    bottom:0px; 
    background:#000; 
    color:#fff; 
    opacity:0.7; /* Overridden by captionOpacity setting */ 
    width:100%; 
    z-index:89; 
} 
.nivo-caption p { 
    padding:5px; 
    margin:0; 
} 
.nivo-caption a { 
    display:inline !important; 
} 
.nivo-html-caption { 
    display:none; 
} 

.nivo-directionNav a { 
    position:absolute; 
    top:45%; 
    z-index:99; 
    cursor:pointer; 
} 
.nivo-prevNav { 
    left:0px; 
} 
.nivo-nextNav { 
    right:0px; 
} 
.nivo-controlNav a { 
    position:relative; 
    z-index:99; 
    cursor:pointer; 
} 
.nivo-controlNav a.active { 
    font-weight:bold; 
} 
</style>
<div id="slider">

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Asz8Eoqx8oszmpc_HHVdLScTafyIYg5mkQJoUQo8C0Cb2a48zgoeRixz1MzXXdZQKgC3GGk5RH8k0fLFajUKnnmLP-F9zCe-MqwucHE-TEnSnyyaEyvkMDjOBywChBMsdM_jodyL8bDS/s800/Gazelle_-_antelope_%2528savanna.gif" alt="" title="Description Goes Here" /></a> 
 
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOkekFiEEYnA5ZRoBvC8neBn8WRp53V9zpd4ddwhVs3O0OYFgl1msbSVke9gtpZIEM3k5A24PpyMS4z3Ef9H2oj3aMBIar6JPeTdtv4A39_vG-EI0d0WiWUvpx_lRWa5hChTJbDFw9s1GM/s800/Curious_Cat%252C_Siberian_Tiger.gif" alt="" title="You can add Description here or leave it blank as shown in the next image" /> 
 
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6k6GHa7shNwzsaOAC1_3oGzcuredAEmCRAkqwkS3xCQzfB-Z5ruaajFZD7t7T1Ypj8dfQuyKsPqKtesTmULE63YQqUSMbSpkRmpcmFJ08A4hW-wNUuiRAKj4QHi-yzgJa_fPZCgAhT2kg/s800/Christmas_Cat.gif" alt="" /> 
 
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5npye4uwN8-FIucngo9iDR88IYi5QriE6dQ7EePJAUCR3B-39RKOUmuZLxUqbXIkKFxksuhh2D4UHVh2ikcWhgmvuFysajGzAV2JdEF5Td0D-0Hngr78G4JEBrfQMotxXM9KVjW3VGrX5/s800/Leopard%252C_Africa.gif" alt="" title="You Can Add Description Here" /> 
 
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3zP-gy5jahqyl2qYxlPXOyGU5r7KyToA5znKTPjNlE6rIkwrQJvCzA4C1XzLVtFaWbCbZ9j1-DYlULZ4iV8t-qCXFkUT7ZA-TrvDdDhyrTvZ-_HFJGzeoIEzAYpAxOQ-bbWT8fCjyrhbS/s800/Three_tickets_to_the_North_.gif" alt="" title="#htmlcaption" /> 


</div>


<br/> 
<br/>

Now you are done.

Many of way2blogging readers requesting a awesome and easy to use image slider. before i given a simple jquery slider, which is something difficult to add slides and use. Today i am giving the World’s most awesome jQuery slider. which is jQuery Nivo Slider. jQuery Nivo Slider is free to use and it is offering great setting options to customize your slider, and it is very easy to use with my Widget Generators.

Nivo Slider Features

1. 16 unique transition effects
2. Simple clean & valid markup
3. Loads of settings to tweak
4. Built in directional and control navigation
5. Packed version only weighs 12kb
6. Supports linking images
7. Keyboard Navigation
8. HTML Captions
9. 3 Slick Themes
10. Free to use and abuse under the MIT license

For more Information Visit the Nivo Slider website

Preview

Watch Live Preview

How to Install jQuery Nivo Slider in Blogger?

Here are the Two simple steps to add the Nivo Slider to your Blog.
For Example:- I taken the Width and Height as 640px and 300px Respectively. Then all my Slide images width and Height MUST be 640px x 300px. Then only Slider works AWESOME!.

Installing the Nivo Slider Script

Here is the Generator for the Nivo Slider Script.

1. Just Customize the settings as your need and Generate the Code.
2. Copy the Nivo Slider Script and paste it before </head>

Generate Script

Adding Nivo Slider

Here is another Nivo Slider Slides Generator.

1. Add any Number of Slides and insert the Valid Image URL(required) into each Slide.
2. You have the options to add the links and Captions to each slide, and you can also sort them by dragging it, at top of each slide.
3. Generate the Nivo Slider and Click the Add to Blogger button
4. After adding the Widget Drag the Nivo Slider Widget where ever you want to show the Slider.

Generate Slider
If you Enjoyed with this Awesome Slider, Please Share this Tutorial.
Please leave your comments and suggestion to improve this slider more on blogger platform.

I recently Posted a cool twitter follower widget for blogger blog. Previous one is  a simple widget for sidebar.Today I’ve Floating Recent Tweets Widget For Blogger and WordPress Blog. When you move cursor on it. It pop out with Cool Floating Recent Tweets Widget. This is a great widget for you to increase twitter followers and force visitors to follow you.

Below I’ll show you how to add this Cool Floating Recent Tweets Widget In Blogger and WordPress.



Live Demo

Adding Cool Floating Floating Recent Tweets Widget.

Adding Recent Tweets Widget To Blogger

1. Go to Dashboard > Design > Page Elements.
2. Click Add A Gadget. In window, select HTML/Javascript .
3. Copy the code below and paste it inside the box.
4. Click Save button.

Adding Recent Tweets Widget To WordPress

1. Go to Dashboard > Appearance > Widgets > Available Widgets.
2. Drag Text widget into a sidebar.
3. Paste in the code.
4. Save.

<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#twitter_div{width:246px;height:353px;overflow:hidden;}#google_plus_div{width:152px;height:97px;overflow:hidden;margin-left:50px;margin-top:10px;}#knfeedburner_div{width:300px;height:97px;margin-top:25px;overflow:hidden;}#kakinetwork_div{width:300px;height:97px;overflow:hidden;}

#twitter_right{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px;}#twitter_right_img{position:absolute;top:-2px;left:-35px;border:0;}

#kakinetwork_right{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_right img{position:absolute;top:-2px;left:-101px;}/* left side style */#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}#twitter_left{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px;}#twitter_left_img{position:absolute;top:-2px;right:-35px;border:0;}
#kakinetwork_left{z-index:10003;border:2px solid #303030;background-
color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_left img{position:absolute;top:-2px;right:-101px;}

</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });    jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });    });</script>

<div id="on"><div id="twitter_right" style="top: 20%;"><div id="twitter_div"><img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ZS71ywZo84PZAdaU_ljezdbngpOhbe0VLj3WHTVNaSCWaKxKXPwi4WvXKgXyFbbEt99h-QPLzZYzF8GhBF6OWetRwqS9zHcns4myfHTQuvk9lEZBD1p6U0gOCTtab-CzMhpFcYKQTzA/s320/allbloggingtips.com-twitter-icon.png" /><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 260,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('allbloggingtips').start();</script></div></div></div>

</div>

Just replace allbloggingtips with your twitter username. That’s it!
Visit your Blogs to see it floating at the right side of your webpage. I hope this Floating Recent Tweets Widget will help you in increasing the number of your Twitter Followers. That’s all. If you face any problem in Floating Floating Recent Tweets Widget then don’t stop just drop your comments and Feel free to ask.

One of the popular features of Blogger Blogspot Templates is the Featured Post Slider or Slideshow Carousal.Not too long ago a very plain Image Slider was the best you could hope for and you were lucky to even get that.However now with so many awesome Free Blogger Templates and Designers creating templates and converting Css and Wordpress Themes to Blogger the options are fantastic.We constantly see templates of premium quality with stunning Image Sliders available for free download.In this post i will list 16 of the Best Blogger Templates With Featured Post Sliders, Image Sideshows and Picture Carousals.All the Sliders are created with jQuery which allows some cool features such as the transitions  (The effect between each slide).

So in no particular order here is the list !

Sixteen Free Blogger Templates With Fitted Featured Sliders

-Click On The Screenshot Of Each Template For The Demo and Download Details.

Namisan - Stunning Slider Blogger Template

Namisan has the latest jQuery Featured Slideshow from Cu3er with stunning transitions that completely slice up the images between slides.A well coded template packed with gadgets and features Namisan has a two column layout with right sidebar.

---

Ocenolis Magazine - Advanced Blogger Template

A colorful Three Column Blogger template with Two right sidebars.The Featured Slider, Image Slideshow Displays the images in a stacked fashion which rotate on click.

---

Nyke - Magazine Blogger Template

The Featured Slider, Image Slideshow has a very unique rounded bottom and a number of coll transitions between images.The template has a two column layout with right sidebar.

---

Floor - jQuery Rich Blogger Template

This is a dark colored template with a right sidebar.This template has a featured Carousal section brilliantly built into the design.Using jQuery the slides, info and link approach from different directions.

---

Game Madness - Assassins Creed Blogger Template

The Featured Slider, Image Slideshow on the Game Madness template spans the full width of the blog with nice transitions from each corner.The template has lots of extra gadgets and a gaming theme.

---

MoonLight - Clean Magazine Blogger Template

The Featured Slider, Picture Slideshow on Moonlight has a more simple design but fits neatly above the posts with auto scroll and manual scroll options.The template has a minimalist design with two columns and a right sidebar.

---

Simplex Buzz - Full Background Slideshow

Simplex Buzz has a very unique Slideshow indeed as the blogs entire background is the slideshow !.Then template also has a secondary featured posts section and a two column design with right sidebar.

---

Oracle - Advanced Magazine Blogger Template

Oracle has a beautifully fitted Featured Slider, Image Slideshow with the sides fading away.The slides auto scroll with a manual scroll option.The template also has a two column magazine design with a left sidebar.

---

Extreme - Portfolio Magazine Blogger Template

Extreme Portfolio has a full featured section below the header were users can scroll through featured posts.The template also has a second categories section and a two column layout with right sidebar.

---

Superb - Advanced Blogger Template

Superb has a really amazing and unique Featured Slider, Image Slideshow.The slides are stacked and move across with the titles listed vertically on the side.Superb has lots of other great features and a two column layout with right sidebar.

---

Modern Photography - Abstract Style Template

Modern Photography is a specialist Blogger template with a cool large Featured Slideshow, Image Carousal.The slider has a continues scroll and manual scroll option.The layout is two column with a right sidebar.

---

Calenotis - Photographers Magazine Blogger Template

Calenotis has a beautiful full width Featured Slider Slideshow that has a 3D design.The slides are on auto scroll with a number of different transitions.The template also has a professional magazine design with a two column right sidebar layout.

---

Magulesco -Featured Magazine Blogger Template

Magulesco has an extremely clean professional design.The Featured Slider Slideshow sits over the header and body with a wide crisp design.The slides have some neat transitions with description section on each.The template also has a two column magazine design with right sidebar.

---

Dimenzion - 3D Style Blogger Template

Dimenzion has a classic featured slider with the featured posts listed to the right of the slides for navigation.The templates design is bright and somewhat unique with a two column right sidebar layout.

---

Glow - Free Premium Blogger Template

Glow has a beautifully constructed Featured Slider Slideshow.The slides are visible as thumbnails on the left of the full size slider.The template also has a glowing two column magazine design with right sidebar.

---

Mahasoli Tribune - Magazine Blogger Template

Mahasoli Tribune features a stacked style image slider, each image has a description and all images overlap to open out when clicked.The template has a magazine design with a two column right sidebar layout.

---

That's the list have you a favorite ?

You can check out more Blogger Templates With Featured Sliders Here.

For Help check out the Blogger Template Video Help Page on BestBloggerTemplates.Net for instructions on uploading and using custom templates.

Here on Spice Up Your Blog i have more great templates lists including My Favorite Gallery Templates, Magazine Templates and Some Strange Odd Templates.

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.