Cara Memasang jQuery Image Slider (slider wow) dengan Thumbnail untuk Blogspot

Disini saya datang dengan slider gambar keren lainnya untuk blogspot. Ini adalah 'JQuery Image Slider with Thumbnails' yang dibuat oleh WOWSlider. Saya melakukan sedikit penyesuaian untuk membuatnya menjadi blogger friendly dengan memperhatikan wowslider. Lihat demo di bawah ini.

• DEMO

Mari melangkah maju untuk menambahkan Slider Gambar jQuery ini dengan Thumbnail untuk Blogspot.

1. Buka Dasbor Blogger> Tata Letak> Tambahkan Gadget
2. Pilih HTML / Javascript
3. Copy kode di bawah dan paste di atasnya.

<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/AVvXsEhyzhmgQV81lCm1exttZkU-MJ1hmsFl7tOLjmVGR6BUKhVb8qDm_q0DRPKz0h9GNqRavQ4fk9kuUdZJaYRgrSVR3skhm6-BT4mjF5IZ9pV6x5Qw6pZhe0miUtSNH0Nsw90efsP-DNIwQHwi/s550/sample1.jpg" title="Sunset" />
                        </a>A boat with beautiful sunset.</li>
                    <li>
                        <a href="#">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRFQvVdH9fDWwdWb7q_j_WqKuoBdOTm0ZHkcnXWIs5BAfPsJrPdrC_T5CwmF4ogMqmGwb3rDJckxgVf7uAHIZwsKPzqOj249KKlhEeOvPpyLkO6ewdw9gFvQyoOnM2zqZRC0I70X8taGaF/s550/sample2.jpg" title="Rainbow" />
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4ilw4Gaqq5ydlX1IWEJg6mMh1L7E-z23pDGg7IQb3RTzExDkcuSUk9eaEEvkay6-JT3RgmYtR-y2t-IBS4-KXTV4N-pqSFuO9OjlGW92dDYr_YJepWNSvedbAHNZR8UEITWh2gVGyZD2Y/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/AVvXsEjJQLAXWF6cAWTJlICc-931lRyltbMTV7C0t02fAaynoW4NhFSYXCKvUJjJ4UkRcnUppQH2VQnz2ZaDTGtli8qXEKtEg_S2NsLYZvlVsy9lavV6-HPsOciv4SRyG9IJKGLKUfOT0Kt7nGK0/s550/sample4.jpg" title="Sunrise" />
                        </a>Amaizing sunrise moment</li>
                    <li>
                        <a href="#">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKgRuuyE20LPySckXDHm3VE5GaBuvRI1H4TFgV4GsQS-mxTRBPOfUzB4QuP_HS_0Aclb4gS8wG4ASrwyFU2lWuEqUSO86C8-rI6hQTQWDdqzH1NEqI13ckXyZ6osvQJ1SfzUKP73EkzT94/s550/sample5.jpg" title="CAR in HDR Nature" />
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3C2SNqO_xubake0R413xPDey8Q5ZGRPbUASMbMn3Zzll7Yt5nDO8683y6a2N6lMAu4YXzJSPhucJfKtKKNfZsRHppfUTp80phMXln-NLj9whLokzNBx33OkD2rv8kRGU6rC-0kl6cUTo3/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/AVvXsEg4M25q_ekTEGNvZTFDuCll6lYq_IMVkNGwb1C9gIBsfNhhVPImuojj-7XC5D5pFKlLhfHD2xUlPHsgy15fNQQOf6sjFNqmhdpniF9ZmP4c-qMh1JAt2fW-DFp67oetdeDqhD4EZMTybOnL/s85/sample1.jpg" /></a>
                    <a href="#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Kp3N8LLFSNHKhStUaJpAm031zSz4Fucgf4uvwQZT4h7pyJTDAi0B2qdFrZrEFVzbENQqiDBCZUN1oQ1x4pe-W8N9_eRpAQWLIk14gDPYmnqCWdJ7t0x4W8U2YH03KoMHzlewG7_R6zfK/s85/sample2.jpg" /></a>
                    <a href="#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip_oQ4fJJ9xQR2tKY9Q2QjzJxoaZfrBNXjazMRkJKSfq13o9lJnuNdTSw8PhXeeYzq9zBEd8tbU1YIRPschDvRBJ7E68ah0oJQeSjBLPob23n0AmVGRC2teq-qTunZQpMen-we_CNYczQs/s85/sample3.jpg" /></a>
                    <a href="#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI0YGehxS6cebJpJzkitBWWawUCFe8PbWyOuyLZsLbC0K09fxNdrU4qIFvBNcwh7-ZHuHjFsIP4kFT9QuMhlp3NTeaYZLZuY6EPSxSRtvv14yZGQX5YFdfsKXoc-RMnELWcKTAVatH1RHg/s85/sample4.jpg" /></a>
                    <a href="#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV68YKWGim4EzNzIJntwH4w-JWbEYsTbB2lg5lD8qVQVePXsfGgpXYi4FA66cL5SDioRI3Eof7MKyvBBqzQY30SSYvHOCmINlZUH1GAp6y6yHylD9HlHHFgVTLy_LO8vtR6u499uNxGZRI/s85/sample5.jpg" /></a>
                    <a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcr6eC8GEDqPU9bv4NR64ebQLPjsXd1H_m5eM76rCM0ZQtq1YhlWH6jTJrFL5gG5Z_e1wuCfC_0d640OP-v5k7mb-eRka4V7FNHaQ6ol8Cz5E1qxnkhCp8CF5TPH5FE9D4XIFY8_oOqrp3/s85/sample6.jpg" /></a>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>

4. Simpan & selesai! Tapi jangan lupa perbarui gambar slider dan teks dengan milikmu.

Semoga Bermanfaat . Itulah Cara Memasang jQuery Image Slider (slider wow) dengan Thumbnail untuk Blogspot