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="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/AVvXsEi-qRn2qm5rOBTKUc0MojS92pYXTF_wVA76KuuvnjibEJyoONnofhe8GOFQ08N3O6RzlWBseZQ5UsKxYUGhrkcGt08w04gM9phUJuszts6U2o5qo7UfHVKZpKetuM4lCTzbhCzOjVFOCLPB/s550/sample1.jpg" title="Sunset" />
                        </a>A boat with beautiful sunset.</li>
                    <li>
                        <a href="#">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhvZxmB9qHGiDSGTSWeJ1yzZKTTncOerirWJ3aghyphenhyphen6vSvMnBci09kEMQRuXkv4kDrGwDOPkNO0nlgMs-PHnkr50tB8nOsSgpywo1k722aOf8mlaU_UMox0hGZHplaEaQzcoNsS373ZZ8cS/s550/sample2.jpg" title="Rainbow" />
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis5kt0CLvYFG3_omB-7FIZuAICl4zkb8pK8SsdPpQ16QHCyFDxw4qjD5QATaqAnE39tw9EoC-1Z7rZ2_M0l5MOQMdfW3njWCmKALbzoD8clOzC4l6i2fhVPLA8bY70Pq8ZJ_nrzV8v5M-Y/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/AVvXsEgcNzu41nzDhpOrD_ttAKrXpLl52ZqF4r-puY33-VaeV_nxWkJF18SGCYD8LXuVV8sc3IQ219Tbdt3bqEfav0eXulcxXAAFf52Tgxb9oS3LdXFBhwTbcqQXznucPIeyMQPIHwJg10RjLYoF/s550/sample4.jpg" title="Sunrise" />
                        </a>Amaizing sunrise moment</li>
                    <li>
                        <a href="#">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjimo_1yKDdUM01DJKq6aE7LeAbmi7xQh2NizhGG3Ueq2KJuSAoLt4J8dHvcDB5cOHyE3d1ZTzdIrBIw9YCrqYfQc8bYEaXtgStR9U0fvi7e3PU9S7h_lC8qd0f9GbSbW3f4EVEyRh3xBDo/s550/sample5.jpg" title="CAR in HDR Nature" />
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZPync-6lbFyjpPn4aKjJcR7iMHNzYbvnUvcXCUBVJvbxmWDdCjOJnRnSTBooeBapaeBFqZjk281zf4r_GJeoZ8uDfZbs_oLi3OHsWaL8W8brxSEgjOA-8RoRCLy9g4z8ieNkWsQ2IghQh/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/AVvXsEhrH1tqkVuBhGb-8hx14CNygRR8210QnhbxpTiOGcAjvKoVpOkjzftcBQzpPFoyADmF87fwvUohBTWyFQbAcsFknbkuJeL2CKdL8xLnWIEQQSEusTH85Z5muecmz0PFOkltXY36CQYuum3Y/s85/sample1.jpg" /></a>
                    <a href="#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVMx-6VD_Vs-mzrOhtBQS_kQHsmsDqwnpIQQHzouPKe4aUjtg9OE5INq9um6lTnAPESKCrAOCcpFDv7OHCWIBWVFF1AtNc-wlnsZMUFu0ktLvfOMNvniRGb5jjbhsgpEj2ap1Gp7Q_qiuz/s85/sample2.jpg" /></a>
                    <a href="#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuHW2uN9CTFEWaKy9k2bxr0yhgFrpGHAM_-tya_dEyU49lnLoYqB04VUK_CorqTg8RZr7IigObHBmfsOpBThJNtbjsoAo9y0qO0SrDwWcd-fpAR-i9dvLFSfOK7ypTSPnG4bcQHRSHV0S1/s85/sample3.jpg" /></a>
                    <a href="#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXeYEeSYHNCJh-t9n44ji2xzl4uELK7Xzv7O1-LZDXE1Ou4kBRdICtLAcrKEb6lqovD98zJ7pb3ttdoeTOxtGsKVQRyKFlLM8vQtgLRpfNmxVieg1KHeEWZlKyAYIlVYMKElnascFS6dlN/s85/sample4.jpg" /></a>
                    <a href="#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgytvF7sO_jZycPVAPUEDuFtfaeir5P9Ozj7-8_kC7qMJAZLXziFobEsvuduJUJqyrgb5LI9MXNu77LSQflzjRF-Az85LmV_OlHoiprx-CQXZ4fVk6EmCtDDp40jvpL1Q57J1Fz2yJ8mG2T/s85/sample5.jpg" /></a>
                    <a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihHEuAwmqxVZLboUEbvPcPaOnok4sjGg3q6k1s9Ikixl6NQky4XzY07G8p0wFhfdml5EocXBcUjTFksdN2DhGZ8eE57XX2JI2TGfTHv8wjMbwoUVIzTMRr_gHw488QcWJ8PmmtVlQCLqkk/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 & you're done! But don't forget to update slider images and text with yours.