Membuat widget slide foto di blog

 FITUR - FITUR

1. FULLY RESPONSIVE
2. Tidak hanya gambar tapi jika video bisa diletakkan
3. Gambar akan menyesuaikan dengan kotak slider.
4. Berbagai macam efek Transisi (pergantian Gambar) yang keren.
5. Jika ukuran gambar lebih besar daripada box slider / container ,maka gambar akan tercrop otomatis dari tengah.
6. Support HTML 5
7. Kustom jQuery Mobile untuk kompatibilitas perangkat seluler.

Cara Membuat :

1. Buka Blog sobat.
2. Pilih Menu Tata Letak >> Tambah Gadget Baru (Admin sarankan  letakan diside bar).
   
3. Pilih Html/Javascript
   
4. Salin Script yang ada dibawah  Scrilalu Letakan ke dalam kolom seperti digambar
   

Berikut Scriptnya ,

 

<!---------------------------------------------

    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="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/1.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/1.jpg">

            <div class="camera_caption fadeFromBottom">

                Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>

            </div>

        </div>

        <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/2.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/2.jpg">

            <div class="camera_caption fadeFromBottom">

                It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>

            </div>

        </div>

        <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/3.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/3.jpg">

            <div class="camera_caption fadeFromBottom">

                <em>It's completely free</em> (even though a donation is appreciated)

            </div>

        </div>

        <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/4.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/4.jpg">

            <div class="camera_caption fadeFromBottom">

                Camera slideshow provides many options <em>to customize your project</em> as more as possible

            </div>

        </div>

        <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/5.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/5.jpg">

            <div class="camera_caption fadeFromBottom">

                It supports captions, HTML elements and videos.

            </div>

        </div>

    </div>

    <!-- #camera_wrap_1 -->

</div>

<!-- .fluid_container -->
 

Untuk Mengubah Gambar Cari Code data-src="Url Gambar Kalian"

Src code :https://bloggerslider.shuvojitdas.com

search

1. Widget Image Slider di blog.
2. Cara membuat slider di blog.