Slide Show Foto Untuk Blogger

 Hallo Sobat Blogger semuanya,.. Selamat datang kembali di Rifai's Blog. Pada kesempatan ini Saya akan berbagi sebuah informasi mengenai Cara Membuat Slide Show Foto Di Blogger, dimana Slide Show Foto ini sangatlah Responsive dan juga memiliki efek transisi yang menarik, pastinya sangat cocok bila dipasang di blog maupun website Sobat Blogger semuanya.

Cara Membuat Slide Show Foto Untuk Blogger

Untuk membuat slide show foto ini sangatlah mudah, hanya dengan menyalin/copy script di bawah ini dan bisa langsung kita masukkan ke widget HTML blog kita, berikut script/kodenya :

    

<!---------------------------------------------
    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="LINK KALIAN" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/1.jpg" data-src="LINK GAMBAR KALIAN">
            <div class="camera_caption fadeFromBottom">
                TEKS KALIAN
            </div>
        </div>
        <div data-link="LINK KALIAN" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/2.jpg" data-src="LINK GAMBAR KALIAN">
            <div class="camera_caption fadeFromBottom">
               TEKS KALIAN
            </div>
        </div>
        <div data-link="LINK KALIAN" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/3.jpg" data-src="LINK GAMBAR KALIAN">
            <div class="camera_caption fadeFromBottom">
                TEKS KALIAN
            </div>
        </div>
        <div data-link="LINK KALIAN" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/4.jpg" data-src="LINK GAMBAR KALIAN">
            <div class="camera_caption fadeFromBottom">
               TEKS KALIAN
            </div>
        </div>
        <div data-link="LINK KALIAN" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/5.jpg" data-src="LINK GAMBAR KALIAN">
            <div class="camera_caption fadeFromBottom">
                TEKS KALIAN
            </div>
        </div>
    </div>
    <!-- #camera_wrap_1 -->
</div>
<!-- .fluid_container -->

 

Catatan :

Silahkan sesuaikan pada teks yang berwarna :

• Merah : untuk direct link ketika gambar di klik (opsional) bisa diisi atau pun tidak;
• Biru : untuk link gambar kalian, ini wajib. Silahkan gunakan link gambar Sobat Blogger untuk ditampilkan; dan
• Ungu : untuk teks/tulisan yang menjadi keterangan dari masing-masing gambar tersebut, contohnya bisa Sobat Blogger lihat pada gambar di atas.

Cara Memasang Script Slide Show Di Blogger

Setelah semuanya sudah disesuaikan dengan kebutuhan, silahkan tempelkan/paste kode/script tersebut kedalam widget HTML dengan cara login ke blog Sobat Blogger, kemudian simpan.

Demikian artikel mengenai Slide Show Foto Untuk Blogger, mudah-mudahan apa yang sudah Saya sampaikan pada kesempatan ini bisa bermanfaat untuk kita semuanya.