Cara menambahkan Responsif Widget Slideshow untuk Blogger

Di tahun 2016, sekarang desain responsif menjadi hal yang sangat trendi untuk website / blog. Tidak hanya trendi tapi sangat diperlukan untuk situs web untuk memiliki desain responsif, sebagai persentase yang tinggi dari pengguna akan mobile.

Jadi di sini saya datang dengan slideshow widget responsif untuk webmaster Blogger. widget slideshow ini membangun dengan Kamera slideshow jQuery Plugin, yang merupakan proyek open source dari Pixedelic.

Fitur Responsif Blogger Slideshow Widget (Camera Slideshow)

• sepenuhnya Responsif
• Cross-Browser yang Didukung
• 33 Warna Berbeda Kulit
• Banyak pilihan untuk menyesuaikan dengan cara Anda
• jQuery Easing Didukung
• Kustom jQuery Mobile untuk kompatibilitas perangkat mobile.

Lihat demo (Static & Blogger versi) dari Responsif Widget Slideshow

• Static Demo
• Blogger Demo

Saya Akan Katakan 'One Of The Best' Jika Anda Meminta Responsive Slider / Plugin slideshow

Ada banyak indah jQuery slider / slideshow Plugin luar sana. Tapi saya menemukan bahwa sebagian besar dari mereka (slider dengan banyak fitur) tidak sepenuhnya responsif. Lain slider responsif diandalkan yang saya temukan adalah FlexSlider, yang sangat populer karena kesederhanaan. Di samping tanggap Camera plugin slideshow memiliki beberapa fitur keren lainnya juga termasuk ..

• Banyak efek transisi
• Play / Pause, Thumbnail Navigasi, ToolTip Navigasi dll
• HTML5 data Atribut didukung. Dengan menggunakan itu, banyak properti dapat ditambahkan untuk meluncur. Misalnya link / URL, URL thumbnail / slider URL gambar dll
• Anda tidak perlu khawatir tentang ukuran gambar atau rasio aspek.
• Gambar akan kembali berukuran sesuai secara otomatis dengan kotak slide.
• Ketika gambar yang lebih besar dari wadah / box slideshow, atau memiliki rasio aspek yang berbeda maka mereka akan dipotong (dari tengah) secara otomatis dengan mempertahankan aspek rasio mereka, itu berarti mereka tidak akan mendapatkan Peregangan.
• Video yang didukung.

Saya merekomendasikan untuk menambahkan gambar yang lebih besar dari wadah / box slideshow atau ukuran setidaknya sama wadah.

Dapatkan Kode!

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

1. Pergi ke Blogger Dashboard> Tata Letak> Tambah Gadget Pilih HTML / Javascript
2. Salin kode di bawah ini dan paste di atasnya. Kemudian Simpan. Dan Anda 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://blogsmanado.blogspot.co.id/" 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://blogsmanado.blogspot.co.id/" 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://blogsmanado.blogspot.co.id/" 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://blogsmanado.blogspot.co.id/" 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://blogsmanado.blogspot.co.id/" 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 -->

Kustomisasi Pilihan:

Melihat 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)

Untuk menyesuaikan ukuran slider mengedit aturan CSS ini dari kode utama

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

Tanggapan Anda dipersilahkan!