Cara menambahkan Widget Slideshow Responsif ke Blogger

Ini hampir 2017 sekarang tanggap / fluid design menjadi hal yang sangat trendi untuk website / blog. Tidak hanya trendi tapi sangat penting bagi situs web untuk memiliki desain responsif, karena persentase pengguna yang tinggi akan mobile.

Jadi disini saya datang dengan widget slideshow responsif untuk webmaster Blogger. Widget slideshow ini dibuat dengan Camera Slideshow jQuery Plugin, yang merupakan proyek open source dari Pixedelic

Fitur Widget Slideshow Blogger yang Responsif (Camera Slideshow)

• Fully Responsive
• Cross-Browser Supported 
• 33 Different Colors Skin
• Lots of options to customize it in your way
• jQuery Easing Supported
• Custom jQuery Mobile for mobile devices compatibility.

Check out the demo (Static & Blogger version) of Responsive Slideshow Widget

• Demo

Saya Akan Mengatakan 'Salah Satu Yang Terbaik' Jika Anda Meminta Plugin Slider / Slideshow yang Responsif

Ada banyak slider jQuery cantik / plugin slideshow di luar sana. Tapi saya menemukan bahwa kebanyakan dari mereka (slider dengan banyak fitur) tidak sepenuhnya responsif. Slider responsif lain yang dapat diandalkan yang saya temukan adalah FlexSlider, yang sangat populer karena kesederhanaannya. Di samping tanggapnya plugin Slideshow Kamera ini juga memiliki beberapa fitur keren lainnya.

Banyak efek transisi :

• Putar / Jeda, Navigasi Thumbnail, Navigasi ToolTip dll.
• Atribut Data HTML5 didukung Dengan menggunakannya, banyak properti bisa ditambahkan ke slide. Misalnya link / URL, thumbnail URL / slider image URL dll.
• Anda tidak perlu khawatir tentang ukuran gambar atau rasio aspek.
• Gambar akan berukuran ulang agar sesuai secara otomatis dengan kotak tayangan slide.
• Bila gambar lebih besar dari kotak kontainer / slideshow, atau memiliki rasio aspek yang berbeda maka akan dipotong (dari tengah) secara otomatis dengan mempertahankan rasio aspeknya, itu berarti mereka tidak akan mendapatkan Stretch.
• Video yang Didukung

Saya sarankan untuk menambahkan gambar yang lebih besar daripada kotak kontainer / tayangan slide atau setidaknya ukuran penampung yang sama.

Dapatkan Kode !

Untuk menambahkan slideshow ini ke blog BlogSpot Anda, cukup Copy dan Paste kode yang diberikan di bawah ini ke dalam Widget HTML / Javascript.

1. Buka Dasbor Blogger> Tata Letak> Tambahkan Gadget Pilih HTML / Javascript
2. Salin kode di bawah ini dan paste di atasnya. Lalu simpan. Dan kamu sudah selesai !.

<!---------------------------------------------
    Blogger Slideshow Widget by
    http://imagesliderforblogger.blogspot.com/
    org. by dimpost.com 
----------------------------------------------->
<!--  Camera_Slideshow Styles  -->
<link rel='stylesheet' id='camera-css' href='http://project.dimpost.com/camera-slideshow/css/camera.css' type='text/css' media='all'>
<!-- Camera Slideshow Scripts -->
<script type='text/javascript' src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/camera.min.js'></script>
<script type='text/javascript'>
jQuery(function() {
    jQuery('#camera_wrap_1').camera({
        time: 2500, // milliseconds between the end of the sliding effect and the start of the nex one
        transPeriod: 1200, // length of the sliding effect in milliseconds
        thumbnails: false, // thumnails & tooltip is controlled by it
        pagination: true, // only when "pagination" is set to "false" thumbnails will be visible
        fx: 'curtainTopLeft, curtainTopRight, curtainBottomLeft, curtainBottomRight, curtainSliceLeft, curtainSliceRight, blindCurtainTopLeft, blindCurtainTopRight, blindCurtainBottomLeft, blindCurtainBottomRight, blindCurtainSliceBottom, blindCurtainSliceTop, stampede, mosaic, mosaicReverse, mosaicRandom, mosaicSpiral, mosaicSpiralReverse, topLeftBottomRight, bottomRightTopLeft, bottomLeftTopRight, bottomLeftTopRight, scrollLeft, scrollRight, scrollHorz, scrollBottom, scrollTop', // transition effects
        hover: false, // Pause on hover
        height: '50%' // slideshow height (50% is default)
    });
});
</script>
<style type="text/css">
.fluid_container {
    margin: 0 auto;
    /* aling centered */
    width: 100%;
    max-width: 900px;
    overflow: hidden;
}


/* Blogger CSS Conflict Fix */

.camera_pag_ul {
    border: none !important;
    background: none !important;
}

.camera_pag_ul li {
    float: inherit !important;
    padding: inherit !important;
}

.camera_pag_ul {
    margin: 0 !important;
    border: 0 !important;
}
</style>
<div class="fluid_container">
    <!-- camera_slideshow camera_wrap-->
    <div class="camera_wrap" id="camera_wrap_1">
        <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/1.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/1.jpg">
            <div class="camera_caption fadeFromBottom">
                Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
            </div>
        </div>
        <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/2.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/2.jpg">
            <div class="camera_caption fadeFromBottom">
                It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
            </div>
        </div>
        <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/3.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/3.jpg">
            <div class="camera_caption fadeFromBottom">
                <em>It's completely free</em> (even though a donation is appreciated)
            </div>
        </div>
        <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/4.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/4.jpg">
            <div class="camera_caption fadeFromBottom">
                Camera slideshow provides many options <em>to customize your project</em> as more as possible
            </div>
        </div>
        <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/5.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/5.jpg">
            <div class="camera_caption fadeFromBottom">
                It supports captions, HTML elements and videos.
            </div>
        </div>
    </div>
    <!-- #camera_wrap_1 -->
</div>
<!-- .fluid_container -->

Pilihan Kustomisasi:

 3. Lihatlah kode di bawah ini. Di sinilah Anda menyesuaikan slideshow. Bermain dengan itu (Baca komentar kode untuk mendapatkan dengan mudah).

Pilihan Slideshow

time: 2500, // milliseconds between the end of the sliding effect and the start of the nex one     transPeriod: 1200, // length of the sliding effect in milliseconds     thumbnails: false, // thumnails & tooltip is controlled by it     pagination: true, // only when "pagination" is set to "false" thumbnails will be visible     fx: 'curtainTopLeft, curtainTopRight, curtainBottomLeft, curtainBottomRight, curtainSliceLeft, curtainSliceRight, blindCurtainTopLeft, blindCurtainTopRight, blindCurtainBottomLeft, blindCurtainBottomRight, blindCurtainSliceBottom, blindCurtainSliceTop, stampede, mosaic, mosaicReverse, mosaicRandom, mosaicSpiral, mosaicSpiralReverse, topLeftBottomRight, bottomRightTopLeft, bottomLeftTopRight, bottomLeftTopRight, scrollLeft, scrollRight, scrollHorz, scrollBottom, scrollTop', // transition effects     hover: false, // Pause on hover     height: '50%' // slideshow height (50% is default)

4. Untuk menyesuaikan ukuran slider edit aturan CSS ini dari kode utama

.fluid_container {
    margin: 0 auto; /* aling centered */
    width: 100%;
    max-width: 900px;
    overflow: hidden;
}

Inilah Bagaimana Cara menambahkan Widget Slideshow Responsif ke Blogger. Jika Ada Keritikan dan saran silahkan komentar di bawah.