Cara Membuat Camera Slideshow Responsive Pada Blogger

Bismillaahirrahmaanirrahiim
Assalaamu'alaikum Wr Wb!

Apa khabar sahabat Bloggers?
Insyaa Allaah kita selalu dalam Rahmat Allaah SWT, Aamiin.

Pada artikel kali ini saya akan bagikan mengenai tutorial atau cara membuat camera slideshow yang responsive pada Blogger.
Para Bloggers tentu sudah faham apa itu "Slideshow" dan apa itu "Responsive". Bagi para blogger yang newbie atau pemula, saya akan menghuraikan definisi dari:
Apa itu "Slideshow"?
Slideshow ialah animasi atau gelongsor suatu gambar yang membuat Website atau Blog indah dipandang dan sedap dimata dan juga membuat kagum para pengunjung sehingga ramai pengunjung dan membuat mereka rindu akan Website atau Blog anda. Slideshow membuat Website atau Blog anda hidup dan terlihat gembira.

Apa itu "Responsive"?
Responsive ialah suatu desain atau aplikasi yang sesuai untuk semua perangkat dan browser, baik itu Desktop, Tablet dan Mobile.
Responsive boleh dikata otomatis dan sedia.

Fitur Camera Slideshow Responsive adalah:
➧Responsive
➧Didukung dengan Cross Browser
➧33 warna kulit yang berbeda
➧Banyak pilihan untuk menyesuaikan dengan selera
➧Didukung dengan jQuery Easing
➧Loading sangat cepat
➧Mobile friendly (responsive pada tampilan mobile / ponsel)
➧Boleh menggunakan gambar atau video dalam slider
➧Banyak transisi
➧Tombol Play / Pause, Thumbnail Navigasi, ToolTip Navigasi dll
➧Didukung atribut data HTML5
➧Banyak properti dapat ditambahkan untuk meluncur, Misalnya link / URL, URL thumbnail / slider URL gambar dll
➧Anda tidak perlu risau mengenai ukuran gambar atau rasio aspek.
➧Gambar akan kembali berukuran pas 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.

Okay, sebelum menuju tutorial alangkah baiknya jika anda melihat hasil berikut supaya anda yakin dan mantap dalam mengambil tutorial ini dari saya.

Result

Mari ke tutorial⇩
A. Untuk Tambah Gadget
1. Login ke Blogger>Tambah Gadget pilih HTML / JavaScript
2. Pastekan Script berikut⇩

<!---------------------------------------------
    Blogger Slideshow Widget by
    http://rahmatarifish.blogspot.com/
    org. by Rahmat Arif
----------------------------------------------->
<!--  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='https://cdn.rawgit.com/RahmatArif/Rahmat-Arif-jQuery-jQ/master/jQuery-Mobile-v1.3.0-Blogger-Responsif-Oleh-Rahmat-Arif.js'></script>
<script type='text/javascript' src='https://cdn.rawgit.com/RahmatArif/Rahmat-Arif-jQuery-jQ/master/jQuery-Pelonggaran-v1.3-Blogger-Responsif-Oleh-Rahmat-Arif.js'></script>
<script type='text/javascript' src='https://cdn.rawgit.com/RahmatArif/Rahmat-Arif-JavaScript-JS/master/JavaScript(JS)-Kamera-Penggelongsor-Blogger-Responsif-Oleh-Rahmat-Arif.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: true, // 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: true, // 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.bloggerautodidact.com' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFIhPYJJSGIh0PPPBviBEezemdjLrgIlo7d1Ldlb3NowZSQSP1CwUf2OVxLMFypQMLmpVYcQ5njE1kfuane_67tHhiATGvukGTNBNhfjMkuXZhrvkeI83C8wMYzjAugGmV_TxG58tMD04/w900-h450-no/' data-thumb='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglzuZFojR7fK8sKUHG_i68U6zqv6cWm7fpUTdOI45IKxjuZZd4T0FK6lwqs0Jz6KC2GZsWdUU6he7NXCIPwwqIKz0Wpjaix_gbZkNjT4I1nZA4CbKUu_bE28FPZERKJpksqSBJ9F7UX-s/w100-h50-no/'>
            <div class='camera_caption fadeFromBottom'>
                BloggerAutodidact.com By <a href='http://rahmatarifish.blogspot.com'>Rahmat Arif</a>
            </div>
        </div>
        <div data-link='http://www.bloggerautodidact.com' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGuPTmpv1iSYZ-SXfESc5fRpxGMSf7WzYHp3l54zgrJNeXUixtImIDaizezxJmdr8kPUcT-Skh95A84_1oGowdYp2GFdIVCgGh60GlBzLUUsBCkCmrkPj1MYispGFF57t0b3FSCQvqu6A/w900-h450-no/' data-thumb='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikH2tBraUciT6rkSvvP5nimmODlXDlhqFZxms5koY0EUhQnlSek1XQKtQtnpR9AqT0N_3gKhAZuiuhWQtnCaXOmLvk8nAHynHtsJI1vdvPOikUMKwokg3hCaKX0NL1oxCuSkLUW380oBg/w100-h50-no/'>
            <div class='camera_caption fadeFromBottom'>
                BloggerAutodidact.com By <a href='http://rahmatarifish.blogspot.com'>Rahmat Arif</a>
            </div>
        </div>
    </div>
    <!-- #camera_wrap_1 -->
</div>
<!-- .fluid_container -->

B. Untuk Tambah ke Template / Edit HTML
1. Login ke Blogger>Template>Edit HTML
2. Pastekan Script berikut dibawah </header> atau dibawah HTML Menu⇩

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!--  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='https://cdn.rawgit.com/RahmatArif/Rahmat-Arif-jQuery-jQ/master/jQuery-Mobile-v1.3.0-Blogger-Responsif-Oleh-Rahmat-Arif.js'></script>
<script type='text/javascript' src='https://cdn.rawgit.com/RahmatArif/Rahmat-Arif-jQuery-jQ/master/jQuery-Pelonggaran-v1.3-Blogger-Responsif-Oleh-Rahmat-Arif.js'></script>
<script type='text/javascript' src='https://cdn.rawgit.com/RahmatArif/Rahmat-Arif-JavaScript-JS/master/JavaScript(JS)-Kamera-Penggelongsor-Blogger-Responsif-Oleh-Rahmat-Arif.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: true, // 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: true, // 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.bloggerautodidact.com' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFIhPYJJSGIh0PPPBviBEezemdjLrgIlo7d1Ldlb3NowZSQSP1CwUf2OVxLMFypQMLmpVYcQ5njE1kfuane_67tHhiATGvukGTNBNhfjMkuXZhrvkeI83C8wMYzjAugGmV_TxG58tMD04/w900-h450-no/' data-thumb='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglzuZFojR7fK8sKUHG_i68U6zqv6cWm7fpUTdOI45IKxjuZZd4T0FK6lwqs0Jz6KC2GZsWdUU6he7NXCIPwwqIKz0Wpjaix_gbZkNjT4I1nZA4CbKUu_bE28FPZERKJpksqSBJ9F7UX-s/w100-h50-no/'>
            <div class='camera_caption fadeFromBottom'>
                BloggerAutodidact.com By <a href='http://rahmatarifish.blogspot.com'>Rahmat Arif</a>
            </div>
        </div>
        <div data-link='http://www.bloggerautodidact.com' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGuPTmpv1iSYZ-SXfESc5fRpxGMSf7WzYHp3l54zgrJNeXUixtImIDaizezxJmdr8kPUcT-Skh95A84_1oGowdYp2GFdIVCgGh60GlBzLUUsBCkCmrkPj1MYispGFF57t0b3FSCQvqu6A/w900-h450-no/' data-thumb='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikH2tBraUciT6rkSvvP5nimmODlXDlhqFZxms5koY0EUhQnlSek1XQKtQtnpR9AqT0N_3gKhAZuiuhWQtnCaXOmLvk8nAHynHtsJI1vdvPOikUMKwokg3hCaKX0NL1oxCuSkLUW380oBg/w100-h50-no/'>
            <div class='camera_caption fadeFromBottom'>
                BloggerAutodidact.com By <a href='http://rahmatarifish.blogspot.com'>Rahmat Arif</a>
            </div>
        </div>
    </div>
    <!-- #camera_wrap_1 -->
</div>
<!-- .fluid_container -->
</b:if>
</b:if>

Sesuaikan opsi berikut sesuai dengan selera anda⇩

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

Catatan: Silakan anda ganti data-link dengan data link anda, ganti url gambar besar dan gambar kecil dengan url gambar anda dan ganti tulisan pada camera_caption fadeFromBottom dengan tulisan anda, dan save template.

4. Alhamdulillaah, tutorial sudah siap.