Nivo Slider - jQuery Image Slider For Blogger

Today I'm sharing another awesome, beautiful image slider for Blogger/ BlogSpot blog. It is made with jQuery. and of course HTML and CSS but the main awesomeness, sliding effect is made with jQuery. This image slider is created by dev7studios.com/nivo-slider/. They did really a great job. This slider have downloaded more than 20,00000 times from their site. I have made a bloggerized version of the slider. See demo below.

• DEMO
• DOWNLOAD

Lets Step forward to adding this jQuery Image Slider to Blogger

1. Go to Blogger Dashboard > Layout > Add a Gadget
2. Select HTML/Javascript
3. Copy the code below and paste on it.

<style type="text/css"/>
 /* dimpost.com - Basic Style */
body{
 background: transparent;
 font:15px/2 'Adobe Caslon Pro', Georgia, Serif;
 margin:0;
 padding:0;
}
a{outline:0 none}
#pagewrap{
 margin:10px auto;
 padding:0;
 position:relative;
 height:400px;
 width: 640px;
}
#slidewrap{position:absolute;}
#slider {
    border-color: #c0c0c0;
    border-radius: 5px 5px 5px 5px;
    border-style: solid;
    border-width: 10px 10px 30px;
    box-shadow: 0 0 3px #2F2F2F;
    height: 280px;
    margin: 10px;
    position: relative;
    width: 600px;
}
#slider images{
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
/* The Nivo Slider styles */
.nivoSlider {
 position:relative;
}
.nivoSlider images {
 position:absolute;
 top:0px;
 left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 border:0;
 padding:0;
 margin:0;
 z-index:6;
 display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
 display:block;
 position:absolute;
 z-index:5;
 height:100%;
}
.nivo-box {
 display:block;
 position:absolute;
 z-index:5;
}
.nivo-directionNav{display:none!important}
.nivo-html-caption {
    display:none;
}
.nivo-caption{
 position:absolute;
 right:20px;
 text-align:center;
 top:130px;
 width:192px;
 z-index:60;
}
.nivo-caption p{margin:0}
.nivo-caption .title{font-style:italic}
.nivo-controlNav {
    bottom: -23px;
    display: block;
    height: 15px;
    left: 204px;
    position: absolute;
    text-align: center;
    width: 192px;
    z-index: 51;
 opacity: 0.6;
}
.nivo-controlNav a{
 background:transparent url(http://project.dimpost.com/image-slider/images/button.png) no-repeat center center;
 display:inline-block;
 height:14px;
 width:14px;
 text-indent:-9999px;
 cursor:pointer;
}
.nivo-controlNav .active{
 background:transparent url(http://project.dimpost.com/image-slider/images/button_active.png); 
}
 </style>
 <script src="http://project.dimpost.com/image-slider/jquery-1.6.1.min.js" type="text/javascript"></script>
 <script src="http://project.dimpost.com/image-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(window).load(function() {
  $('#slider').nivoSlider();
 });
 </script>
 <!--[if IE]>
  <script src="modernizr-2.0.min.js"></script>
 <![endif]-->   

<div id="pagewrap">
<div id="slidewrap">
 <div id="slider">
 <a href="http://dimpost.com/" target="_blank"><img alt="" title="#caption1" src="http://project.dimpost.com/image-slider/images/sample0.jpg" /></a>
 <a href="#" target="_blank"><img alt="" title="#caption2" src="http://project.dimpost.com/image-slider/images/sample1.jpg" /></a>
 <a href="#" target="_blank"><img alt="" title="#caption3" src="http://project.dimpost.com/image-slider/images/sample2.jpg" /></a>
 <a href="#" target="_blank"><img alt="" title="#caption4" src="http://project.dimpost.com/image-slider/images/sample3.jpg" /></a>
 <a href="#" target="_blank"><img alt="" title="#caption5" src="http://project.dimpost.com/image-slider/images/sample4.jpg" /></a>
 <a href="#" target="_blank"><img alt="" title="#caption6" src="http://project.dimpost.com/image-slider/images/sample5.jpg" /></a>
 </div>
</div>
</div>

4. Change the red colored link with yours. and blue colored images link with your images.

jQuery Image Slider(wow slider) with Thumbnails for Blogspot

Here I came up with another awesome image slider for blogspot. This is a 'jQuery Image Slider with Thumbnails' created by WOWSlider. I did a little customization for making it blogger friendly with due respect to wowslider. See demo below.

• DEMO1
• DEMO2

Lets Step forward to adding this jQuery Image Slider with Thumbnails for Blogspot

1. Go to Blogger Dashboard > Layout > Add a Gadget
2. Select HTML/Javascript
3. Copy the code below and paste on it. 

<style type="text/css">
.slider-box {
    background: none repeat scroll 0 0 #FAFAFA;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 3px #333333;
    margin: 0 auto;
    width: 675px;
 overflow: hidden;
}
#slider-wrapper {
    margin: 0 auto;
    padding: 10px;
}
#jslider-container {
    border: 2px solid #FFFFFF;
    max-width: 550px;
    position: relative;
    text-align: left;
    z-index: 90;
}
</style>
<link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<div class="slider-box">
<div id="slider-wrapper">
<div id="jslider-container">
 <div class="jslider_images">
      <ul>
  <li><a href="http://dimpost.com">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9vghyphenhyphenxrSZUQiyxzO_77qgIEdsPyUmGU2AlZrYTQzjbImYOt_G5zoumsptKNA2JupnH8j2dorPX9i2TaB2HJWg00fZEFT0XReyojwc_QQGlPhBt-zSDtktB2P8EeR0-euH2Kp2SGiwUR30/s550/sample1.jpg" title="Sunset"/>
  </a>A boat with beautiful sunset.</li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJmrn7_qM6DL2DHAhAtgT9dRNbVP83H5eBbEi9RYe4cniVU-Ml1NrFPQCn-ic4epLzEBHPY986U6htxDOWHdq8fySytDveCpYXm2WAvY35og8a0X2ZWOpACCdyMRMu-YZw7s5P6wa9MsL5/s550/sample2.jpg" title="Rainbow"/>
  </a></li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtFUtfkTCFkZI5NqU4BLlqBB6CP6ol4uuo29R3fzcllsnE4YO3oQRn413EtuJb0kPhnmA8IydcfGMjOlez_xn76xbfY195IrSW3_7HnG2Lcp8UqIyIm_TNU2T6tZ5N04T6OP02LW0MpF7t/s550/sample3.jpg" title="True Nature"/>
  </a>Tree in field with blue sky.</li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiQGPGHFFBBC_3JVK4v7xrtO-4GRdN2lLqYUaWCNoC3S6CE6MgpKiI5ysYDpv6bnwguqHgXLMtHRl56lMMMSSeee4Onj1W3comdobggeSuITtKy_kR2OJ-3Ae9OEjBWTt7AyA6Ij9AKLJL/s550/sample4.jpg" title="Sunrise""/>
  </a>Amaizing sunrise moment</li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDOVPldrFVRok8xoXgABAVNhXn1fXl1DmIk5QJWtjD5UNfdXR5UpwrcyuUglksDdW8fjFqZgdh8X6B8KxnQhaqKmhB6SmV_GsWs7Yyy77PzxxaYFbN-ru6GGFha7OiyrGLoi6fDGwlDUs4/s550/sample5.jpg" title="CAR in HDR Nature"/>
  </a></li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNmNEWmjwaQSDn-0H02wjF-ABDBynB7w6-oPKbfdI0uXXisjhjfsLkNzex7fytc8QNpQgnFsqg3eABZX4qQs-E-g7eVulJ9XpVCVDfbrCVkJ_uXaIBCEvLoedOU9a-QbkoLz7HoisuXRuE/s550/sample6.jpg" title="Sunshine"/>
  </a></li>
   </ul>
    </div> 
    
 <div class="jslider_thumbs">
        <div>
  <a href="#" title="Sunset"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim3DkiaeMiAyz6GLdo5v2tRm1NtN4uDOmfONY4eIEmISLo3bsujNAKIYqZsFip-6FPZ7ZMk3BViTxXzQRpNhBQgoEuHFl8mc78XFyq2_gol69jjvDjER4E73EW36Df11ZAfhAwM2GtHtlt/s85/sample1.jpg"/></a>
  <a href="#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVQjNB30afzdxnzThquFZP0YULoR73g5Sslm4rm5eWwsC2-ezhROiV8lwVoF9hfPsSanUP6WZNy_8K3h3I58oh5WnuhOLcJsVKaouUSoyFAW8c5rrETglviIF7WuqAY15t7NBrTHwe8Q2l/s85/sample2.jpg"/></a>
  <a href="#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqgPjqNOOnMYbSXjnZDTcJ8Ut04c5o7MkWKKl6JTPDEysNu7LndWXWGqbLitOLJEzftfsR1kjP_2RgXvSZ_Jvx21wwde7DeEtnIbL9FzVkLu3sezqykacBRV98ngY54N9g4Nsd9w8eI6si/s85/sample3.jpg"/></a>
  <a href="#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCpsrZB7Pxt8dLoK3Fd5CSg6JxPSd3IXdaRzAXZX921xpdE-iBid8447hvPWMVnjuFaG1bI9LM707gwED_YfN4fV101UjUtGs2exVn0U6PH2iY8ESGSxnknYDE6dSdCgc_MkqEE6WUd131/s85/sample4.jpg"/></a>
  <a href="#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNx-_muX6zIFRjE_9mV07ATI6fcxdsyVOfKwnvnPJe-5OBUx25GIZPRYDWGhv_Jt5VbFZfbLUKBR4LbpfZ8L7UchiqB81ylLyMcjFv2lU_WdeDFCeOu_8TXmO-_51hbyB2Hbkc0iGBkI0D/s85/sample5.jpg"/></a>
  <a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ-adj-k5W2WarlB74WbHckWS-lhF2OVpHd5hA6EfygiB-j3-zvkvlOYPTMPd_-dhirmh0QZuUJR3GjTd3M07-0EYaL27CzppAbHm634B_W9HanSYId1_08_3KK-jO6bCuTSUzUchqOp2f/s85/sample6.jpg"/></a>
        </div>
 </div>
    
</div>
</div>
</div>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>

jQuery Carousel Slider for Blogger (FlexSlider)

This is a responsive jQuery carousel slider. This amazing slider developed by flexslider.woothemes.com. It has some really cool features that makes you like it. The most cool feature is it is fully responsive; you don't have to tensed about the sliders width / height even all images width and height are auto adjustable. And also you can set minimum/maximum number of images to be appear on occasion of various size screen/browser. So overall it is quite a beautiful carousel slider. Here it is customized for blogger/blogspot so you can just copy and paste the code to install on your blogger blog. Check out the live demo by clicking the link below.

• DEMO1
• DEMO2

Let’s Install the jQuery Carousel Slider to your Blogger Blog

1. Go to Blogger Dashboard > Layout > Add a Gadget
2. Select HTML/Javascript
3. Copy the code below and paste on it.

<style type="text/css">
/*
* jQuery FlexSlider v2.0
* http://www.woothemes.com/flexslider/
*
* Copyright 2012 WooThemes
* Free to use under the GPLv2 license.
* http://www.gnu.org/licenses/gpl-2.0.html
*
* Contributing author: Tyler Smith (@mbmufffin)
*/
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus{
outline:none;
}
.slides,
.flex-control-nav,
.flex-direction-nav{
margin:0;
padding:0;
list-style:none;
}
/* FlexSlider Necessary Styles
*********************************/
.flexslider{
margin:0;
padding:0;
}
.flexslider .slides > li{
display:none;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img{
width:100%;
display:block;
}
.flex-pauseplay span{
text-transform:capitalize;
}
/* Clearfix for the .slides element */
.flexslider a.intro {
bottom:0;
color:rgba(0, 0, 0, 0.1);
font-size:14px;
position:absolute;
right:0;
text-decoration:none;
z-index:99999;
}
.slides:after{
content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}
html[xmlns] .slides{
display:block;
}
* html .slides{
height:1%;
}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child{
display:block;
}
/* FlexSlider Default Theme
*********************************/
.flexslider{
margin:0 0 60px;
background:#fff;
border:4px solid #fff;
position:relative;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:0 1px 4px rgba(0,0,0,.2);
-moz-box-shadow:0 1px 4px rgba(0,0,0,.2);
box-shadow:0 1px 4px rgba(0,0,0,.2);
zoom:1;
}
.flex-viewport{
max-height:2000px;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
.loading .flex-viewport{
max-height:300px;
}
.flexslider .slides{
zoom:1;
}
.carousel li{
margin-right:5px;
}
/* Direction Nav */
.flexslider li {
border: 0 none !important;
padding: 0 !important;
text-indent: 0 !important;
}
.flex-direction-nav a{
width:30px;
height:30px;
margin:-20px 0 0;
display:block;
background:url(http://project.dimpost.com/flexslider-carousel/images/bg_direction_nav.png) no-repeat 0 0;
position:absolute;
top:50%;
cursor:pointer;
text-indent:-9999px;
opacity:0;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
-o-transition:all .3s ease;
transition:all .3s ease;
}
.flex-direction-nav .flex-next{
background-position:100% 0;
right:-36px;
}
.flex-direction-nav .flex-prev{
left:-36px;
}
.flexslider:hover .flex-next{
opacity:0.8;
right:5px;
}
.flexslider:hover .flex-prev{
opacity:0.8;
left:5px;
}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{
opacity:1;
}
.flex-direction-nav .disabled{
opacity:.3!important;
filter:alpha(opacity=30);
cursor:default;
}
/* Control Nav */
.flex-control-nav{
width:100%;
position:absolute;
bottom:-40px;
text-align:center;
}
.flex-control-nav li{
margin:0 6px;
display:inline-block;
zoom:1;
*display:inline;
}
.flex-control-paging li a{
width:11px;
height:11px;
display:block;
background:#666;
background:rgba(0,0,0,0.5);
cursor:pointer;
text-indent:-9999px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
-moz-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
}
.flex-control-paging li a:hover{
background:#333;
background:rgba(0,0,0,0.7);
}
.flex-control-paging li a.flex-active{
background:#000;
background:rgba(0,0,0,0.9);
cursor:default;
}
.flex-control-thumbs{
margin:5px 0 0;
position:static;
overflow:hidden;
}
.flex-control-thumbs li{
width:25%;
float:left;
margin:0;
}
.flex-control-thumbs img{
width:100%;
display:block;
opacity:.7;
cursor:pointer;
}
.flex-control-thumbs img:hover{
opacity:1;
}
.flex-control-thumbs .active{
opacity:1;
cursor:default;
}
</style>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.js"></script>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){   
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 0,
    minItems: 1,
    maxItems: 4
  });
});
});
</script>
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" />
    </li>
  </ul>
</div>

   4. Save, and were done.

NOTE:

• Forget about width and height it will adjust auto.
• Replace the pink colored image URL with your own uploaded image URL(You can upload image on blogspot, flickr etc.) 
• There is some other things you can change, see below. I guess I don't have to explain that because they are named like as they are.

    animationLoop: false,
    itemWidth: 210,
    itemMargin: 0,
    minItems: 1,
    maxItems: 4

 Don't Forget to say thanks :)