WowSlider widget 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/AVvXsEjRfDaurSLd8VpKy07spbL-89rEdMBUe_aUzF5BApk8PYqFMUlzhquKDMtItDwuup32hQXHJAcDfCPoNT_QFtJn5OQjJfQbKLD21J87Y8_vxs_CI1t0R7S7qXHfVP1gncaEbuiBcywmOUR0/s550/sample1.jpg" title="Sunset"/>
		</a>A boat with beautiful sunset.</li>
		<li><a href="#">
		<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXWuINEDty7vI8uiy-_ikpnu-qI-GQeNfRFUdrcfLhEgdv_wzwZEl72LuYjYfg6K1U4Sat4N8PmqTICPmHHDYt2IcQ4vb-3h92FIlyt6CsydGl1ETPP5E8TAmqa9YUNHtWTjUWGka0faLK/s550/sample2.jpg" title="Rainbow"/>
		</a></li>
		<li><a href="#">
		<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4bvMZtU1bL-pY8ti2JD4dR1z3bv7oQaRv4lFCR2wUN18LB2TsAY-xCIl_Jr_uchegC7gNVS2yRC9lOaM5suLona4ZNpE-9X7zJHfF_Tg-HTOHTlHdAHuDrUYaHQJ4T1VyAf3mTUBSQ8yj/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/AVvXsEgNctqm-XweOnNN8GNGyDfy6HhYHJw4HDvsjHc-nDP2r9D3gnQ3Jh1IOuvWV4GzDIMusBcfCr3tigcBYbuIwY9joSM8OP1JFZtJhqq_oEs3jlPEgBx9yYBdiAGu950hneBXbJaxACHjMgWp/s550/sample4.jpg" title="Sunrise""/>
		</a>Amaizing sunrise moment</li>
		<li><a href="#">
		<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD8cQYmBt1FH4CKogLRsBep4vjsGpqErdzTmPKhTX6DY2ydB0VOy2NC4puop9-QUk-PK8-_LYPbU-wDZdtCBpvogFm0Iby6OUxB65G-0bvR2PgAk6G7QbX9SnUHuwBy6mwoAKbB1TH4cqv/s550/sample5.jpg" title="CAR in HDR Nature"/>
		</a></li>
		<li><a href="#">
		<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHU-fgcw1OKeJBbHvdCbpFWJE-DsFhTLZLeYw4lGXTK7GD8nYxH1UvyEdbaSP56e5qM0oSoDYHQWPo7LwEJHxuRY56CVj1agfo21x0YVK7ikf_AB9c5LXVnCUJ8FfZawEhy5WK0ZDuNIC9/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/AVvXsEiioeaR1PGPEFdw-sWyepYhFYf9jsU5Q6uXUQLqTrZbcHCDgD9mNPnxaxXE3o1rVHsXpiDsyWsMYqiiSVVKsibGMkyLyj_ptgo_OvPjfOQKqQSYZVlTgZFIhzvVObFM7niv3mjMV025f0r8/s85/sample1.jpg"/></a>
		<a href="#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqm1lKVXf0IwTpPIPlzPuOkLLYolmAqENYAdPI8DL0tmoqjaTyPSEpn2HC65uEvrN-zQmubXWjf29_4WwuE_7Ct7AB8ILL5vTeTgBvZvXSAX396ISWgBlPD-SnbKRqjSqZHN__ZqeAzPaW/s85/sample2.jpg"/></a>
		<a href="#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLMUEsszYTJWtN-Ekhh1PDBQobRcu2HennCmbMHsvkxjj91TYhj4PYQQjgdv99wkO0w3NcTphmNFpWQJ8u-1vAAg1Z2wh0Ty5LWRhtLII54fZKF0ZcuBsikHRvh3DGMYxrRKLJ6_Gm_qx_/s85/sample3.jpg"/></a>
		<a href="#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfnTTBnN97M3cFvcrGrHh2_xpfazNhTTjdbQObLlt4oQAMG14DXa2AqgAMyLoR39QlcOT5GuzMIzHfzTsV0b4fZKlq8zqzztk8mPvGAmQh_NYkAI74nO6aRTfDLp2OWOr6RFLA_DbIMcCq/s85/sample4.jpg"/></a>
		<a href="#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8ySogvRIeJCPM8umeGs5FnmPAi0ugt38G9GN7eHSgG1kZZOFpgeQVir96CAcyseNhoRm0bTeamYfADiTOcjnw5qTC2lg3KxHJfiNBCO689l3XUgVN8fQ9hmo6uIrZWWl0lHVs0R5bXIuL/s85/sample5.jpg"/></a>
		<a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHnIFQkmqneZb5CAXJTwzNRwCun31r6A_EfK6D0OMY1WzYFHQHAVaGTgiORVV0PWQ_ajNoIoM2T7_lJm9TjgET01gUuDPtVVUaLV5lNDRUds9LTV0zCzc3Tw5ftVBEZevhVdzMG3OSjgHX/s85/sample6.jpg"/></a>
        </div>
	</div>
    
</div>
</div>
</div>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>

Though this post was also published on ISFB by DIMPost.com