Cara Membuat Gadget/Widget Slide Foto Responsive di Blogger

Bupega.sch.id - Memiliki blog yang cantik, keren dan menarik merupakan keinginan semua blogger, namun tidak semua orang bisa melakukakannya. Tampilan blog yang cantik akan membuat pengunjungnya merasa betah berlama-lama membaca berita dan menikmati kecantikan blog yang sedang dikunjunginya.

Agar tampilan desain blog menjadi cantik, keren dan menarik pengunjung, salah satunya adalah memasang Slide Foto Otomatis. Berikut ini tangkapan layar Slide Foto yang dimaksud.

Adapun kelebihan dari Slide Foto ini

Di bawah ini merupakan beberapa kelebihan dari Slide Foto antara lain:

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

Kode HTML atau Script Gadget/Widget Slide Foto Responsive di Blogger

Kode html berikut ini yang akan kita pasang di Gadget/Widget. Silahkan Anda Copy kode html/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 ('#') diganti link direction dari gambar. Jelasnya alamat/link jika gambar diklik akan mengarah ke link berita tertentu sesuai kehendak Anda, misalnya ke masing-masing blog yang ada di foto slide tersebut. Tanda pagar ('#') ini bisa diisi link bisa juga tidak, atau dibiarkan saja (opsional);

Teks yang berwarna merah (LINK GAMBAR ANDA) diganti dengan link gambar Anda masing-masing. Bisa kita upload melalui blogger atau pun lainnya; dan

Teks yang berwarna biru (TEKS ANDA) diganti 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 gadget/widget dan pilih HTML;
4. Lalu tempel/paste kode/script di atas ke dalam widget HTML tersebut;
5. Langkah terakhir klik tombol Simpan.

Untuk melihat hasilnya klik menu Lihat Blog di blogger bagian kiri bawah pada blog Anda atau klik di sini.

Selamat mencoba. Jika ada pertanyaan, tuliskan pada kolom komentar.