How To Create Camera Slideshow Responsive On Blogger

Bismillaahirrahmaanirrahiim
Assalaamu'alaikum Wr Wb!

In this article I will share the tutorial on how to create a responsive camera slideshow in blogger.
The Bloggers must already understand what a "Slideshow" and what was "Responsive". For the bloggers who are beginners, I will explain the definition of the Slideshow. Slideshow is animated or sliding an image which makes a wonderful display of website or blog and can also wowed the visitors so many visitors and make them long for a website or blog. Slideshow also make your blog look alive and happy.

Camera Slideshow is also responsive on all devices and browsers, this is the advantage of multi and automatic slideshow of the camera as responsive virtually automatic and always available. Perhaps many of you have encountered Slideshow manual or not responsive enough to require manual settings, it would make a loss of interest in the Bloggers to use it because it was considered to gain employment as a Bloggers. A Webmasters and Bloggers are always looking for our contemporary technology to facilitate their work.

Camera Slideshow Responsive feature are as follows;
➥Responsive to the device Desktop, Tablet and Mobile
➥Powered by Cross Browser
➥33 different skin color
➥Many options to suit the tastes
➥Powered by jQuery Easing
➥Loading is very fast
➥Mobile friendly (responsive on mobile view)
➥Can use images or videos in the slider
➥Many transition
➥Button Play / Pause, Thumbnail Navigation, Navigation ToolTip and more
➥Powered HTML5 data attributes
➥Many properties can be added to slide, for example link / URL, thumbnail URL / image URL slider and more
➥You do not have to worry about image size or aspect ratio.
➥Pictures will be automatically re-sized to fit the slide box.
➥When a larger image of the container / box slideshow, or have different aspect ratios, so they will be cut off (from the center) automatically to maintain the aspect ratio of them, it means they will not get stretch.

Ok, before we go to the tutorial would be wise if we see the result next week so that you are sure and steady in taking the tutorial that I share now⇩

Result
Click To View

That explanation from me and I will guide you into the tutorial⇨
A. To add a gadget

Login to Blogger> Add a Gadget (select HTML JavaScript) and paste the following JavaScript into it⇩

<!-----------------------------------------------
    Camera Slideshow Responsive Blogger Widget by
    http://www.bloggerdiscreet.com
    org. by Rahmat Arif
------------------------------------------------>
<!--  Camera_Slideshow Styles  -->
<link href='http://project.dimpost.com/camera-slideshow/css/camera.css' id='camera-css' media='all' rel='stylesheet' type='text/css'/>
<!-- Camera Slideshow Scripts -->
<script src='https://code.jquery.com/jquery-2.1.4.min.js' type='text/javascript'/>
<script src='https://cdn.rawgit.com/RahmatArif/Rahmat-Arif-jQuery-jQ/master/jQuery-Mobile-v1.3.0-Blogger-Responsif-Oleh-Rahmat-Arif.js' type='text/javascript'/>
<script src='https://cdn.rawgit.com/RahmatArif/Rahmat-Arif-jQuery-jQ/master/jQuery-Pelonggaran-v1.3-Blogger-Responsif-Oleh-Rahmat-Arif.js' type='text/javascript'/>
<script src='https://cdn.rawgit.com/RahmatArif/Rahmat-Arif-JavaScript-JS/master/JavaScript(JS)-Kamera-Penggelongsor-Blogger-Responsif-Oleh-Rahmat-Arif.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(function() {
    jQuery(&#39;#camera_wrap_1&#39;).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: false, // only when &quot;pagination&quot; is set to &quot;true&quot; thumbnails will be visible
        fx: &#39;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&#39;, // transition effects
        hover: true, // Pause on hover
        height: &#39;50%&#39; // slideshow height (50% is default)
    });
});
</script>
<style type='text/css'>
.fluid_container {
    margin: 0 auto;
    /* aling centered */
    width: 100%;
    max-width: 100%;
    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='' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheFAQNzPDz5Zl97sL53L_zJLCQ52BDk_zLiqxz9wUvOWqrxRGAXcCZNCGnrYPTxN5-6kOHYmNCIu-xeCVanTrgAhD5hkvjUc9kJZ7lN_mDZK24p7FCsfzcagr4q3ca1yqZxs2btA3J2Mcr/w900-h450-no/' data-thumb='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5swndoxtZRnDSzlvwoXOX1LN9DlrabUjkw186U5NcKTGB6p560vi30GUKdp-GfMIvmEIKTHRBGcV-JhJefEs7g6PiCu879J3e4gho2keoydNwYjGAxYC5wPEIyAdQdH7416KfPyBeP6pJ/w100-h50-no/'>
            <div class='camera_caption fadeFromBottom'>
                BloggerDescreet.com By <a href='https://plus.google.com/u/0/106234598589603368320'>Rahmat Arif</a>
            </div>
        </div>
        <div data-link='' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicmNtjUPcqblzLs7ivdG3FoV-Ev8W9mRcb9R6toOeLEbXGYC_YdJzb1syB-4HnWn2YptUHHOH2dju5g9iizzW8Xc0fsyvvBN2Sw95xUhQ1He_zdpeSY_djDdlMsIvI4ExZxLzPmkBu2OOB/w900-h450-no/' data-thumb='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixzbB7aAmjuTiDicSVN_4BSL8f3qNHjX-u7Moe9FVtCOCIkUVbmTKezY_68-zsuLiQBp0pEmabkuG42rZR_k1MhNvZ6vTlm0qzhG2SU5OVeLz_QbDR1MtLV-ACfdwmPo0n8QcJnINvcqbw/w100-h50-no/'>
            <div class='camera_caption fadeFromBottom'>
                BloggerDiscreet.com By <a href='https://plus.google.com/u/0/106234598589603368320'>Rahmat Arif</a>
            </div>
        </div>
    </div>
    <!-- #camera_wrap_1 -->
</div>
<!-- .fluid_container -->

B. To add the template through the Edit HTML
Login to Blogger> Template> Edit HTML and JavaScript is put below / after the </ header> tags or below HTML navigation menu⇩

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!--  Camera_Slideshow Styles  -->
<link href='http://project.dimpost.com/camera-slideshow/css/camera.css' id='camera-css' media='all' rel='stylesheet' type='text/css'/>
<!-- Camera Slideshow Scripts -->
<script src='https://code.jquery.com/jquery-2.1.4.min.js' type='text/javascript'/>
<script src='https://cdn.rawgit.com/RahmatArif/Rahmat-Arif-jQuery-jQ/master/jQuery-Mobile-v1.3.0-Blogger-Responsif-Oleh-Rahmat-Arif.js' type='text/javascript'/>
<script src='https://cdn.rawgit.com/RahmatArif/Rahmat-Arif-jQuery-jQ/master/jQuery-Pelonggaran-v1.3-Blogger-Responsif-Oleh-Rahmat-Arif.js' type='text/javascript'/>
<script src='https://cdn.rawgit.com/RahmatArif/Rahmat-Arif-JavaScript-JS/master/JavaScript(JS)-Kamera-Penggelongsor-Blogger-Responsif-Oleh-Rahmat-Arif.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(function() {
    jQuery(&#39;#camera_wrap_1&#39;).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: false, // only when &quot;pagination&quot; is set to &quot;true&quot; thumbnails will be visible
        fx: &#39;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&#39;, // transition effects
        hover: true, // Pause on hover
        height: &#39;50%&#39; // slideshow height (50% is default)
    });
});
</script>
<style type='text/css'>
.fluid_container {
    margin: 0 auto;
    /* aling centered */
    width: 100%;
    max-width: 100%;
    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='' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheFAQNzPDz5Zl97sL53L_zJLCQ52BDk_zLiqxz9wUvOWqrxRGAXcCZNCGnrYPTxN5-6kOHYmNCIu-xeCVanTrgAhD5hkvjUc9kJZ7lN_mDZK24p7FCsfzcagr4q3ca1yqZxs2btA3J2Mcr/w900-h450-no/' data-thumb='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5swndoxtZRnDSzlvwoXOX1LN9DlrabUjkw186U5NcKTGB6p560vi30GUKdp-GfMIvmEIKTHRBGcV-JhJefEs7g6PiCu879J3e4gho2keoydNwYjGAxYC5wPEIyAdQdH7416KfPyBeP6pJ/w100-h50-no/'>
            <div class='camera_caption fadeFromBottom'>
                BloggerDescreet.com By <a href='https://plus.google.com/u/0/106234598589603368320'>Rahmat Arif</a>
            </div>
        </div>
        <div data-link='' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicmNtjUPcqblzLs7ivdG3FoV-Ev8W9mRcb9R6toOeLEbXGYC_YdJzb1syB-4HnWn2YptUHHOH2dju5g9iizzW8Xc0fsyvvBN2Sw95xUhQ1He_zdpeSY_djDdlMsIvI4ExZxLzPmkBu2OOB/w900-h450-no/' data-thumb='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixzbB7aAmjuTiDicSVN_4BSL8f3qNHjX-u7Moe9FVtCOCIkUVbmTKezY_68-zsuLiQBp0pEmabkuG42rZR_k1MhNvZ6vTlm0qzhG2SU5OVeLz_QbDR1MtLV-ACfdwmPo0n8QcJnINvcqbw/w100-h50-no/'>
            <div class='camera_caption fadeFromBottom'>
                BloggerDiscreet.com By <a href='https://plus.google.com/u/0/106234598589603368320'>Rahmat Arif</a>
            </div>
        </div>
    </div>
    <!-- #camera_wrap_1 -->
</div>
<!-- .fluid_container -->
</b:if>
</b:if>

Adjust these options to your liking

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

Option: Please you change the data-link with a data link, change the image url and url image thumnails with your pictures and writing on camera_caption fadeFromBottom exchange with your writing. And save the template.

Alhamdulillaah, tutorial is ready.