jQuery Image Slider(wow slider) with Thumbnails 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="https://code.jquery.com/jquery-1.12.0.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/AVvXsEhf6E8WR9nT3XsEc9GfBg6aQwZticxhIF3PzY6HwwhBQ9jv2sQ6Tx4yZegs8tHOyz4g3y_EEdh-IgsZMVJqwi3jvgUCtt_F4Qy7i3etKqT3geD7YyW_fc8MCZwNnkUGMp9-81hH1zQwLbh5/s550/sample1.jpg" title="Sunset" /> </a>A boat with beautiful sunset.</li> <li> <a href="#"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP0mAuEMmESPaimh3TyuBH-n1h946gz6XO9vovaH-51hb1bSjMcvgawpeWa8b5_uYrIt60_4spL-lXdx9kC1ZMlTpWsqgz1JfsdwKiPmsA1a3tU8YHU884QsUPJCtyvPosunCSJr5q4YVC/s550/sample2.jpg" title="Rainbow" /> </a> </li> <li> <a href="#"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8TZPl5VkX7EEMfVFUlzDvICojwJnV3Ge_F2hF6jopCUbCM3n13-6lsj93km2Zm2Mgm6vfZOzRMDhiWRQGtCu-HLFXA6bNlDpCp2HI_vt3_rK0Cnj2lJCz_jyJkPxbFThjopATSSM0oJiz/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/AVvXsEhZx7aHM9MD0Z0G4lcPaygKIqcFNXIbGGt3KXW92NXaOOMw5O_nniVouW_03gGUA8T2AuT-zPjzRCd04pWgp9A2jOOsOCCZNincLH2kUMhg_d6X0va_gwGpeauWhf0fwGvR7LGQ81uHXsWY/s550/sample4.jpg" title="Sunrise" /> </a>Amaizing sunrise moment</li> <li> <a href="#"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicfj7lPGbU3H3C8quwgZQyA3kirOghs3K7PxlfPkEl40OgXEs3oRO2VywTFfaK5SXbqiCHIHsg-PQncNGc2uzrT0yp3Bvn1geH5l6R3iUrhbzIl1Kjw9oJ4Ogt5Uo5TOCD6rNozE_K7m-b/s550/sample5.jpg" title="CAR in HDR Nature" /> </a> </li> <li> <a href="#"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdbjc8pPBcrxy3L3s216bE44JhIr-lAhYN9fizNraA_hkk4sa_O68YmFaExK95dsS7TzGb5CPjWCzKl9XZWm3nLM48dJ2WW0u0TA0qshDDoyI3eBnMKfXrEgCmExBxEEPy829aZ_65nA8x/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/AVvXsEggWJN3Etd-YFLcqHOMRCAUzxwtJUIP3OXFpFvO6t_ZbQSM9Z8wDClB_uNu5QZNmUBcGcTameK9c0Vo1VZn-4VXQNTiWrzYIAQZ0gqOmAaUtjLj_db0Nqam8ip3f4QuZVATxGhzHFxaZRFD/s85/sample1.jpg" /></a> <a href="#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3PDcxbKga41-OGnp6-yoUpjAEOdLB0yPKZcEhFAg6u4furz6hjqZ1nS4uB7Yesuj2-HoqKTsl6r6sYrbC9F2b0-9dzxipdNLYPMlGHn2BMsYvNLsBpNM9IRaHtPZBwOHC3beOEoOW8aEF/s85/sample2.jpg" /></a> <a href="#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWzw69hQdsatiNE2r2zptp3o8ISo9ZG8494BMX4OVZtjHX6VAKriw98sFdJCqHn5Md-UYJeDNqvLJPU-Mb9JDozJTIWpBJJVmBqkEChbQl76w6uwwOMYu8cdYTWsW-t-97f9UioqfO9tW4/s85/sample3.jpg" /></a> <a href="#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7mCkhkCyqSnaTDqytafJHNJaY2cbJX1NcqgUZ154yb5rx1hwDA8YAZwzY4Q_xgVPJ6dd1LyVBz6lxPr76OvMthxO9MOYtIHIF5usNTGC5dEQ_GvbyGkaHpeuxDmbDKdI6KRHpLEPBbEeG/s85/sample4.jpg" /></a> <a href="#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmKz6Vut2jneNwbbRUB-Fgk6J3tEdJxB5Gl4L70myUP3bs8llYkPqdYpUvgmbyXlRDEjPTl1-aAftUnYO0YQ8GjzsyKWwy_mK54ahcb1DfMYPnINx5OiH3Got8GW5FDMCRFapiGXcQvSR7/s85/sample5.jpg" /></a> <a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWC6Gt8-JEuNxHD4dV8bIAimrcfgJo5ajcPJ6sXEsaBvyR6mbU7mW0Et1pxxamvIdShjZMjaz_APVKNOwkoF1YLWZa3JMvNZx-TbuN5_dMVRfeESQ8HVePk1Br8yrbJ895-mAxfdYpF0w1/s85/sample6.jpg" /></a> </div> </div> </div> </div> </div> <script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>

NOW SAVE & ENJOY
Don't forget to say thank's... :)