Membuat Slide Show / Slider Foto dengan jQuery di Blog

Slide Show atau yang biasa disebut slider adalah sebuah widet yang akan menampilkan gallery foto berderet secara slide (meluncur). Dengan widget ini kita dapat menampilkan beberapa foto guna mempercantik dan menghias penampilan blog kita, akan lebih menarik lagi jika kita memasang gambar pemandangan-pemandangan yang indah. Fitur ini berjalan secara manual, jadi anda harus memasang foto dan URL tujuanya sendiri, berbeda dengan widget slider artikel otomatis yang akan update slide otomatis setiap ada artikel yang baru dipublikasikan.

Mengenai masalah tampilan juga widget ini tak usah diragukan lagi kebagusanya, karena widget ini telah dilengkapi dengan fitur jQuery smooth yang akan membuat pergantian slide terlihat lebih "lembut", dan yang menarik dari widget ini adalah page numbernya yang simple dan elegan, berwarna merah dan muncul layaknya karpet merah dari balik kanan gambar, jadi widget ini akan terlihat minimalis sekali.

Cara Membuat Slide Show / Slider Foto dengan jQuery

1. Login ke Blogger.

2. Pilih Tata Letak.

3. Klik Add Gadget.

4. Pilih HTML/JavaScript.

5. Letakkan kode dibawah ini kedalamnya.

Judul Spoiler:

<style type="text/css"> .container1 { width: 660px;padding: 0;margin: 0 auto; } .folio_block { position: absolute;left: 50%; top: 50%;margin: -140px 0 0 -395px;} .main_view {float: left;position: relative;} /*--Window/Masking Styles--*/ .window {-moz-box-shadow: 0px 0px 5px #303030; -webkit-box-shadow: 0px 0px 5px #303030; box-shadow: 0px 0px 5px #303030;border:1px solid #000000;height:240px; width: 660px; margin-top:15px;overflow: hidden; /*--Hides anything outside of the set width/height--*/ position: relative; } .image_reel { position: absolute;top: 0; left: 0; } .image_reel img {float: left;} .paging_btrix { position: absolute;bottom: 10px; right: -7px;width: 178px; height:47px;z-index: 100; /*--Assures the paging stays on the top layer--*/text-align: center; line-height: 40px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ZnBHHdUjCPM0GqnTcHAkaChzV1PhLVw7aRZX1iXNl9OVbEVJSdOelKpbrY7SWZegcTT5bgV62QMhXiy0PXrWZprHXXJxbeOWLxu6xxsEsw_GU70x1pEOO4UnJVobTUjeMXWUUflrL8U/s1600/paging_btrix_bg2.png) no-repeat; display: none; } .paging_btrix a { padding: 5px;text-decoration: none;color: #fff; } .paging_btrix a.active { font-weight: bold; background: #920000; border: 1px solid #610000; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; } .paging_btrix a:hover {font-weight: bold;} </style> <!-- bof Automatic Image Slider w/ CSS & jQuery from Soh Tanaka --> <div class="container1"> <div class="main_view"> <div class="window"> <div class="image_reel"> <a href="URL Tujuan Gambar"><img src="URL Gambar"/></a> <a href="URL Tujuan Gambar"><img src="URL Gambar"/></a> <a href="URL Tujuan Gambar"><img src="URL Gambar" /></a> <a href="URL Tujuan Gambar"><img src="URL Gambar" /></a> </div> </div> <div class="paging_btrix"> <a href="#" rel="1">1</a> <a href="#" rel="2">2</a> <a href="#" rel="3">3</a> <a href="#" rel="4">4</a> </div> </div> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //Set Default State of each portfolio piece $(".paging_btrix").show(); $(".paging_btrix a:first").addClass("active"); //Get size of images, how many there are, then determin the size of the image reel. var imageWidth = $(".window").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; //Adjust the image reel to its new size $(".image_reel").css({'width' : imageReelWidth}); //paging_btrix + Slider Function rotate = function(){ var triggerID = $active.attr("rel") - 1; //Get number of times to slide var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide $(".paging_btrix a").removeClass('active'); //Remove all active class $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) //Slider Animation $(".image_reel").animate({ left: -image_reelPosition }, 500 ); }; //Rotation + Timing Event rotateSwitch = function(){ play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds $active = $('.paging_btrix a.active').next(); if ( $active.length === 0) { //If paging_btrix reaches the end... $active = $('.paging_btrix a:first'); //go back to first } rotate(); //Trigger the paging_btrix and slider function }, 5000); //Timer speed in milliseconds (3 seconds) }; rotateSwitch(); //Run function on launch //On Hover $(".image_reel a").hover(function() { clearInterval(play); //Stop the rotation }, function() { rotateSwitch(); //Resume rotation }); //On Click $(".paging_btrix a").click(function() { $active = $(this); //Activate the clicked paging_btrix //Reset Timer clearInterval(play); //Stop the rotation rotate(); //Trigger rotation immediately rotateSwitch(); // Resume rotation return false; //Prevent browser jump to link anchor }); }); </script>

Keterangan:

• 660 = Lebar Slide Show / Slider Foto
• 240 = Tinggi Slide Show / Slider Foto

6. Klik "Save/Simpan", dan selesai.