Cara membuat Widget Slider di blog
Postingan kali ini Admin akan membagikan Tutorial bagaimana cara membuat widget gambar slider di blog.
Widget ini sangat tepat untuk kalian gunakan untuk memperindah blog dengan gambar-gambar menarik dengan efek slider yang sangat keren sekali menurut Admin.
Kalian bebas meletakan gambar yang kalian suka.Tak perlu khawatir widget ini sudah fully responsive jadi tidak masalah jika tampil di device yang berbeda karena akan menyesuaikan ukuran layar.
Tentunya tidak hanya gambar yang bisa kalian letakan melainkan video juga bisa Nah untuk lebih lengkapnya,berikut beberapa keunggulan widget gambar slider ini.
Demo
Lihat langsung,tekan tombol demo dibawah
Fitur-fitur :
- FULLY RESPONSIVE
- Tidak hanya gambar tapi jika video bisa diletakkan
- Gambar akan menyesuaikan dengan kotak slider.
- Berbagai macam efek Transisi (pergantian Gambar) yang keren.
- Jika ukuran gambar lebih besar daripada box slider / container ,maka gambar akan tercrop otomatis dari tengah.
- Support HTML 5
- Kustom jQuery Mobile untuk kompatibilitas perangkat seluler.
Cara Membuat :
- Buka Blog sobat.
- Pilih Menu Tata Letak >> Tambah Gadget Baru (Admin sarankan letakan diside bar).
- Pilih Html/Javascript
- 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
- Widget Image Slider di blog.
- Cara membuat slider di blog.