Crazy Computer World: jQuery Image Slider with Thumbnails for Blogspot

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_Hp3V_83JkL7i2lJ_POF5KwPVyco_M6yz6JrST17oRBfCD1K3yfYMZVk7ZiQGJk8xvQeCXkyO1jXhPEQrAx8_d_uif8p6M6k-MhdHOXSTOmBaPaXDmGL6xeuUeNUmNersvVxjZz2CTkmd/s1600/wowslider.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_Hp3V_83JkL7i2lJ_POF5KwPVyco_M6yz6JrST17oRBfCD1K3yfYMZVk7ZiQGJk8xvQeCXkyO1jXhPEQrAx8_d_uif8p6M6k-MhdHOXSTOmBaPaXDmGL6xeuUeNUmNersvVxjZz2CTkmd/s1600/wowslider.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<b><span style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px; text-align: left;">Here I came up with another awesome image slider for blogspot. This is a</span><span style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px; text-align: left;"> 'jQuery Image Slider with Thumbnails'</span></b></div>
<div class="separator" style="clear: both; text-align: center;">
<b><span style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px; text-align: left;"><br /></span></b></div>
<div class="separator" style="clear: both; text-align: center;">
<b><span style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px; text-align: left;"><br /></span></b></div>
<h3 style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 20px; line-height: 1.2em; margin-bottom: 10px; margin-top: 0px;">
Lets Step forward to adding this jQuery Image Slider with Thumbnails for Blogspot</h3>
<div style="background-color: white; font-family: 'Segoe UI', Arial; font-size: 14px; line-height: 22.399999618530273px;">
<b>1. Go to Blogger Dashboard > Layout > Add a Gadget<br />2. Select HTML/Javascript<br />3. Copy the code below and paste on it. </b></div>
<div style="text-align: center;">
<br /></div>
</div>
<blockquote>
<pre><code>
<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="#">
  <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Title</span>"/>
  </a>A boat with beautiful sunset.</li>
  <li><a href="#">
  <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Title</span>"/>
  </a></li>
  <li><a href="#">
  <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Title</span>"/>
  </a>Tree in field with blue sky.</li>
  <li><a href="#">
  <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Title</span>"/>
  </a>Amaizing sunrise moment</li>
  <li><a href="#">
  <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Title</span>"/>
  </a></li>
  <li><a href="#">
  <img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Title</span>"/>
  </a></li>
   </ul>
    </div> 
    
 <div class="jslider_thumbs">
        <div>
  <a href="#" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Title</span>"><img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>"/></a>
  <a href="#" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Title</span>"><img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>"/></a>
  <a href="#" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Title</span>"><img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>"/></a>
  <a href="#" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Title</span>"><img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>"/></a>
  <a href="#" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Title</span>"><img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>"/></a>
  <a href="#" title="<span style="background-color: #eeeeee; color: #3d85c6; font-size: 13px; line-height: 21.119998931884766px;">Image Title</span>"><img src="<span style="background-color: white; color: red; font-size: 13px; line-height: 21.119998931884766px;">Paste Image Url Here</span>"/></a>
        </div>
 </div>
    
</div>
</div>
</div>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>
</code></pre>
</blockquote>
</div>

jQuery Image Slider with Thumbnails for Blogspot

Here I came up with another awesome image slider for blogspot. This is a 'jQuery Image Slider with Thumbnails' Lets S...

+ Read more »