Cara membuat Slideshow Di Blog -->

Iklan Kiri

Cara membuat Slideshow Di Blog

Samsul Arifin
Tuesday, May 28, 2019

Alhamdulillah Gay gimana kabarnya heehehe



Silahkan Tempelkan DI widget/Tata Letak
<!--  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="https://www.samsulasia.com/2018/12/09-kalender-2019-gratis-reuni-212-di-monas.html" data-thumb="https://2.bp.blogspot.com/-TXyPC0qVo6w/XAyHCOmDWAI/AAAAAAAAAps/l0v7VgKbV80IzB2J5anMHJU_o3VfZQgSwCLcBGAs/s1600/6.JPG" data-src="https://2.bp.blogspot.com/-TXyPC0qVo6w/XAyHCOmDWAI/AAAAAAAAAps/l0v7VgKbV80IzB2J5anMHJU_o3VfZQgSwCLcBGAs/s1600/6.JPG">
            <div class="camera_caption fadeFromBottom">
                Kalender Reuni 212 Bersama Ulama <em>Gratis silahkan di download</em>
            </div>
        </div>
        <div data-link="https://www.samsulasia.com/2018/12/25-cara-sms-gratis-menggunakan-termux.html" data-thumb="https://2.bp.blogspot.com/-ZHYTDcZN90w/XCIo3RSYZsI/AAAAAAAAA0s/-8Z-Sp7-dq8Scw5TJsoolU_ObZET_wQdACLcBGAs/s1600/IMG_20181225_192647.jpg" data-src="https://2.bp.blogspot.com/-ZHYTDcZN90w/XCIo3RSYZsI/AAAAAAAAA0s/-8Z-Sp7-dq8Scw5TJsoolU_ObZET_wQdACLcBGAs/s1600/IMG_20181225_192647.jpg">
            <div class="camera_caption fadeFromBottom">
                Tutorial ini bisa mengrjain orang lo, <em>Sms gratis menggunakan termux</em>
            </div>
        </div>
        <div data-link="https://www.samsulasia.com/2018/12/24-Kisah-Mukjizat-Nabi-Muhammad-Shallallahu-Alaihi-Wasallam-dalam-sebuah-ketegasan.html" data-thumb="https://4.bp.blogspot.com/-9LkuFuNMJKk/XCDSUKqmDLI/AAAAAAAAAys/g8SlfwcSCRcq6iiOo-Mxe5ngtJbo5SqmACLcBGAs/s320/48419627_2009663039116777_1332606958993145856_n.jpg" data-src="https://4.bp.blogspot.com/-9LkuFuNMJKk/XCDSUKqmDLI/AAAAAAAAAys/g8SlfwcSCRcq6iiOo-Mxe5ngtJbo5SqmACLcBGAs/s320/48419627_2009663039116777_1332606958993145856_n.jpg">
            <div class="camera_caption fadeFromBottom">
                <em>Kisah nabi Muhammad</em> (Dalam Sebuah Ketegasan)
            </div>
        </div>
        <div data-link="https://www.samsulasia.com/2019/05/19-menyambut-malam-lailatul-qadr.html" data-thumb="https://1.bp.blogspot.com/-kgWg6iWIw_s/XOFMRLuEcUI/AAAAAAAAEOo/Hoeu2V9aW7YCWhPS8h19sDojgm033ih8wCKgBGAs/s1600/QK_1558268951505.png" data-src="https://1.bp.blogspot.com/-kgWg6iWIw_s/XOFMRLuEcUI/AAAAAAAAEOo/Hoeu2V9aW7YCWhPS8h19sDojgm033ih8wCKgBGAs/s1600/QK_1558268951505.png">
            <div class="camera_caption fadeFromBottom">
                RAMADHAN 2019<em>Semangat Menyambut Malam lailatul Qodr</em> Ayo bentar lagi idul fitri
            </div>
        </div>
        <div data-link="https://www.samsulasia.com/2019/01/24-cara-belajar-bahasa-madura.html" data-thumb="https://1.bp.blogspot.com/-R6Gar0iQBas/XEjzuHJ9jhI/AAAAAAAABwg/HyoV89JdyNkvVntiTjKIXlnKQUKl8IItACKgBGAs/s1600/belajar%2Bbahasa%2Bmadura.jpg" data-src="https://1.bp.blogspot.com/-R6Gar0iQBas/XEjzuHJ9jhI/AAAAAAAABwg/HyoV89JdyNkvVntiTjKIXlnKQUKl8IItACKgBGAs/s1600/belajar%2Bbahasa%2Bmadura.jpg">
            <div class="camera_caption fadeFromBottom">
                Youk kawan, Belajar Bahasa madura.
            </div>
        </div>
    </div>
    <!-- #camera_wrap_1 -->
</div>
<!-- .fluid_container -->

Silahkan di cobak