Membuat Widget Slide Foto Responsive Di Blogger - Mas Operator
Skip to content Skip to sidebar Skip to footer
Home  ›  Info

Membuat Widget Slide Foto Responsive Di Blogger

Posted by: Mas Operator Post a Comment

 Assalamu'alaikum Wr. Wb. Salam sejahtera, selamat datang kembali di Blog Mas Operator. Saya ucapkan terimakasih kepada Anda semuanya yang sudah mengunjungi blog sederhana Saya ini, pada kesempatan ini Saya akan berbagi sebuah informasi mengenai Cara Membuat Slide Foto Responsive Di Blogger.

Untuk membuat slide foto ini sangatlah mudah, karena kita hanya Copas kode/script dan kita tempelkan ke dalam widget HTML blog kita. Dan berikut merupakan Screenshot dari Slide Foto tersebut :

Membuat Widget Slide Foto Responsive Di Blogger

Adapun kelebihan dari Slide Foto ini adalah sebagai berikut :

  1. Responsive (otomatis menyesuaikan layar device);
  2. Memiliki efek transisi yang bagus/menarik;
  3. Mudah dalam memasangnya; dan
  4. Bisa kita ganti baik foto atau pun teksnya.

Script Widget Slide Foto Responsive Di Blogger

Silahkan Sobat Blogger Copy script di bawah ini :

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

Keterangan :

  • Teks yang berwarna hijau ('#') silahkan ganti link direction dari gambar. Jelasnya alamat/link jika gambar di klik (opsional);
  • Teks yang berwarna biru (LINK GAMBAR ANDA) silahkan ganti dengan link gambar Anda masing-masing. Bisa kita upload melalui blogger atau pun lainnya; dan
  • Teks yang berwarna merah (TEKS ANDA) silahkan ganti dengan teks/tulisan sesuai dengan keinginan/kebutuhan Anda.

Cara Memasang Widget Slide Foto Di Blogger

1. Login ke blogger;
2. Klik pada menu tata letak/layout;
3. Klik tombol tambahkan widget dan pilih HTML;
4. Silahkan tempel/paste kode/script di atas ke dalam widget HTML tersebut;
5. Klik Simpan.

Bagaimana, mudah bukan?

Mungkin hanya itu saja artikel mengenai Membuat Widget Slide Foto Responsive Di Blogger, mudah-mudahan apa yang sudah Saya sampaikan pada kesempatan ini bisa bermanfaat untuk kita semuanya. Terimakasih atas kunjungan Anda, Wassalamu'alaikum Wr. Wb. dan Salam Mas Operator!!!.

Post a Comment for "Membuat Widget Slide Foto Responsive Di Blogger"

Silahkan Tinggalkan Komentar Anda Disini :