Jangan malas baca, ya Telusuri!

Cara Membuat Widget Gambar Slider Di Blogger (Responsive)

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
See the Pen
eYmEpgo
by Andri Rahmadani (@andri-rahmadani)
on CodePen.

Lihat langsung,tekan tombol demo dibawah




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.

About the Author

Haus akan ilmu

3 comments

  1. Kak gimana ya cara menghilangkan tulisan-tulisan bawaannya? Soalnya ada tulisan2 bawaan di stiap slidenya. Kaya tulisan "camera is responsive" dst?
    1. izin menjawab.....
      Silahkan dihapus deskripsi yang muncul pada setiap gambar setelah kode caption fadeFromBottom"> pada tiap gambarnya sampai kode

  2. Kenapa saya tidak berhasil ya? Saya sudah ikuti langkah-langkahnya tapi tidak muncul di blog hasilnya
Nambah ilmu setelah membaca? Yuk, tulis komentar mu!
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.