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/AVvXsEhCdJYo2dn0RMWBQ8x7op6CdUXcmT3UUfCPrzdt7rB4Koweo9YBRBejywCZdKmNfdAPcQFooDmHVV1uNCjM7g0jqIPIOidvmHBR9-PpB_CSHhImCzn-KR68hugGiKdUO8HRipqDY8dRDWnd/s550/sample1.jpg" title="Sunset"/>
  </a>A boat with beautiful sunset.</li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2QNX1Cj0Jn-4Lm5BliE7FPRhvCB2tnRqYMPcL2VjcZnZSfWSxyISosJa0GVJCTL8bQrqwGQKsZG1uEPKJk5Z-ZZcrchXImUQwKu0SaIn4MjT21dcJ34Z5RI93k8WrTiEncuijS2TP_zOZ/s550/sample2.jpg" title="Rainbow"/>
  </a></li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyosYDuQTOJiClG1NBMbK15pH0An_E092FfYTXnPLVqEXQiGBWppQUD_kr-PcwsnPQARXhJ63dnjLJws1B-0AF2rfmCDbvbabS6KSCtU7FehKCpm4QUGGWYibVYSjZXL3N_EaKT5wigwIT/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/AVvXsEjd0552hUU6GW9nNsAwnzTFBgwAwWGg5W-eSMu_oBHSwIohGk6i9czWR2rz5N6qOaPc48JKyeX7ueYxbO037txcq7fCkZggBnPp6BzcZtHJn0jdQ52vAVRe-vrcQpnzo2gKOyklIDhpp6D8/s550/sample4.jpg" title="Sunrise""/>
  </a>Amaizing sunrise moment</li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYlIqWR4ufWUEhgD7wZyWQlWphnQ1TVGEilv_uhcZeoNJ8Xfm8EA20283i5PvXqV4drnSZxPeNfNuL9-5PrcbYTAWY-GlxGNr6F_amsLgXJmETJZwNqdBvgyWl9Wu_WUd0n_RPluKzPILO/s550/sample5.jpg" title="CAR in HDR Nature"/>
  </a></li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWWQy25HeAvcLHTPqq19DNqra3l5npDAsVY7MsFveEbXDYGHaekbDg32UvHzLVrySD7tGMbjyd5T7YeSSH2zK2ZRJFTcdXKZGUuwxCZRI-trcI11J9C78j5qfAMHWDK4Rhzr-OyPEiLfsE/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/AVvXsEjQefdcxdWd8sSa2x6eUVw8ssbQjOTi2n5G_hobgYbi5K6zAgt96ULxgmzpXMu8yYni8pQce8RT0jvJl9tuNlAIyiRgeP4u2kJX81o3oM7t1K3VAdtXp21cHquBGV7isegrw06PQ7j3Lu8R/s85/sample1.jpg"/></a>
  <a href="#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-t5em6tjFPZGEq3HOBJTw3BRaapkkLipoYh9fS2P6qu5to1RqXLqmYRtGQG1flIWbdRS2jHJkrKurhjTiA5nq9jAkkj9BPpQ6LQuKY6ZwIVOT34m7PTiQ-JppTC_1t8VD_zMf6rdqWSJx/s85/sample2.jpg"/></a>
  <a href="#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtCJRAZXiYwfa3-bf_n2wwrRbWUJfNa_oUzZsOGd3Ypq9Tz-L3p0n88aLYH5ppR3zUwvX9qB8_3zoF1LawKfDBAzdj_wt3Oof8pKAPdXYTSeVIrQ7PMwYwZSOJ3KMCCZgKJ6xR0Ifqd6dE/s85/sample3.jpg"/></a>
  <a href="#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOIlXpKTAinRAVK9aw7qF_Fq1xn0mGm6xWGnHjsKz7AWvbBqLjDQQg4rLT3LxGyFgaTgWOy9O5Ek_wBtdcxQ1AmyII0dgZqJYv7pqTEg7wqAnGv8EKC9ZCmtRthlDJBEHgToRCpNnfNOys/s85/sample4.jpg"/></a>
  <a href="#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfajIWtZb0gYt-Gob-AgYdbI_eu-RFApeBe87TeMNPDMRx619mgIbBUzzxTzUjkykQTgrC2Qr4VRjJzbnGqVOuw9X5WzTC3ip7hv3AfiucKIPPDodYiuDk48cgdJdyuDD5mayIYkJ_pITw/s85/sample5.jpg"/></a>
  <a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM-9lwmBaTCToDESCob9e6myi8jauXq5m3udOiIL6hpCQ6FpynazazpCgb-5__y7hEUPVdO6CeOXmkqnDXrVxaqfZBTTK-xh9DgluejoNq4bvGagJ3XCRjdkzNqOBxUzdLDUI0aIiuOBto/s85/sample6.jpg"/></a>
        </div>
 </div>
    
</div>
</div>
</div>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>

4. Save, and were done.

Have fun! Don't forget to say thanks :)