Wow Slider with thumbnails For Blog

jQuery Image Slider with Thumbnails

1. Blogger Dashboard > Layout > Add a Gadget
2. HTML/Javascript
3. Berikut adalah kodenya:

<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>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>
<div class="slider-box">
<div id="slider-wrapper">
<div id="jslider-container">
<div class="jslider_images">
      <ul>
<li><a href="http://www.seocips.com">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg6mDCc72JkhkLPBYn0OT-PqJsABPB8Ldd5t359qgGNhD8lFxjMppkzi3HUnDCzYCRvBIaxhuQ8wGvZdA38S13SXCJDSr8mbMhbhyM9hjPFSbejN3bf0C3ArlCJDXKbqdHSoukhqehnm-L/s550/sample1.jpg" title="Sunset"/>
</a>A boat with beautiful sunset.</li>
<li><a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7j-kN3FrmgM08D3X7RvQK3VB1aRaPYM1Ohc92kZF6qqTOfFYOyG33UjVg0KR_Sg-1JUqXu7sTlO1wQPoo32KBuY_HLVVIfjlSctizlTexsXdNJcKfk7Ks_Uhhgc19eR0w3sYWquLoXcn9/s550/sample2.jpg" title="Rainbow"/>
</a></li>
<li><a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_lekZmDoT2ITCfWxy2xZBNxtdFZ1HCGGl6TbVdT3WfV92HgBTY8ls-Skf8pZyz5EpESlqJdsqAostMtTu5WX-Zw9pNwN95jdIn1SQeRt-b2TiyHeYH-85suYwLlmouNuHmw6Hjl8tWp6A/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/AVvXsEi8ANo-qAOruAb-ndaitYxt1heqPlfh1WIZwHvUj9rfUBLnOUeJkxYBNAqHWBbXQ5YEuynbhClmK2ZGRZR9St6PrFkShUbYCl3N42k6iFMOQml188jLFkDnnnwOCbfZz4g89aL5OwzcSL1V/s550/sample4.jpg" title="Sunrise""/>
</a>Amaizing sunrise moment</li>
<li><a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvJAkosehXAiaZBMMDavtq3StOohX6vtiuQCvxF5pRjW8E98e3KBgGHAGxespfsW3j3XfDN6r3WfTWIZk7iQ-sQF22ZsNbDAdGPMYl8cl5KnyWyNYFACYIuHSlKX_-L5huejRhzLnn6Lp4/s550/sample5.jpg" title="CAR in HDR Nature"/>
</a></li>
<li><a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvTeh5MVJ0aWZcoQrCvyY0SeL2IxMKYmL0XEoGchhYR63XB8NfRIva_wr5K3QyeB9-20eo-R3cE5haaCMFN_TycnozJnRXuxe5gNnkH5E7azA_07CyECp7QU_G6V0AWJJQs_Ly3YxlwR0C/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/AVvXsEhkFvucJmj2RMrws_Z29-vfYBcXIy9Q5SFmfXkTPn6e1tkvjBXyAxs8CWHuMUoViWBcRfN_vqh70HXUUvVMU7vJfZARgtlvjr33Dfe7f-HkutkMgUYBl_kFBYS0FcjzvMOnZfSB_luB4wOn/s85/sample1.jpg"/></a>
<a href="#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQliAwln7tS1S5H03h76Kg6YD48FAeks978itIZPn9-m4gdkiRxKejKPJ9co8L8YHZlkKc3BgiXUyx0N227jSHWtBs-QWI97V9ajucXxI-1cPuV98M34Y5D2rM1OGSGCu2emcDqeP684cg/s85/sample2.jpg"/></a>
<a href="#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKLA-LgpSkU_U7nS2Cx_sY3IXHq3lAZf1bkQYnsDS6ZXrVuenlomGaS4HPVAssSrZKEd_FOKMD60mtKroijqaTAN2nM4dT75TFIB6GOEEpspaVp7MTuEAb32PY-ZY3kanGnr4mpsYvXWBk/s85/sample3.jpg"/></a>
<a href="#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpq5vpVErs9hHcB2lMcLmxzCLpHFQc04KfX-Q-YgmviwPajl_TFALQIbnp_XbcmVbhz3pGpfqSCZlJoORMV2D5-4VXiEHxBPk5od9EmR8OPqJ1fiNcO_50POpziwHg-jrQ_89dNlNhml0L/s85/sample4.jpg"/></a>
<a href="#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7nwCO11bvc2CQJwuAhs4WO8EN-mFKjxYmh1s9eZT11BXbgPk4Mes5UvHCSOi-hrEVmIIYmTwy0mTR2P-yJIvRfLHAxiB941QkbGNupp_ciIcPDHRKmWgIFSKDxlpgGc6OZUtcBYCQ097L/s85/sample5.jpg"/></a>
<a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwnMqHXxrLAh736ZdaSygwXQ7ovFv_BQ1YSRedinHmB7eDsOSvXIZfNT6sycrIyy3bfkrJ3zdNkgOuDAUBxs0ORazIFChtgdxddEydAKtBooRpTdBEOYbDkKpp9RbHuvoeaO_JtMt2c3zi/s85/sample6.jpg"/></a>
        </div>
</div>

</div>
</div>
</div>

Simpan template dan lihat hasilnya di blog sobat. bagaimana sob? apakah sobat berhasil membuat slidernya? ok sob sekian untuk postingan saat ini. ok semoga bermanfaat