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>