Cara Membuat Slide Show di Blog

Hallo Sahabat Berbagi Ilmu, ketemu lagi kita. Gimana ni kabar Sahabat? Ku harap kalian baik-baik saja sama seperti saya. Dalam kesempatan ini, saya akan berbagi ilmu tentang Cara Membuat SlideShow di Blog. Langsung saja.

• Login ke Blogger.com
• Klik template => Edit HTML => Lanjutkan
• Copy script dibawah ini, paste diatas kode </head>
  
  
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() { //Execute the slideShow, set 5 seconds for each images slideShow(3000); }); function slideShow(speed) { //append a LI item to the UL list for displaying caption $('ul.slideshow').append(' <li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"> <h1> </h1> </div> </li> '); //Set the opacity of all images to 0 $('ul.slideshow li').css({opacity: 0.0}); //Get the first image and display it (set it to full opacity) $('ul.slideshow li:first').css({opacity: 1.0}); //Get the caption of the first image from REL attribute and display it $('#slideshow-caption h1').html($('ul.slideshow a:first').find('img').attr('title')); $('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt')); //Display the caption $('#slideshow-caption').css({opacity: 0.7, bottom:0}); //Call the gallery function to run the slideshow var timer = setInterval('gallery()',speed); //pause the slideshow on mouse over $('ul.slideshow').hover( function () { clearInterval(timer); }, function () { timer = setInterval('gallery()',speed); } ); } function gallery() { //if no IMGs have the show class, grab the first image var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first')); //Get next image, if it reached the end of the slideshow, rotate it back to the first image var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first')); //Get next image caption var title = next.find('img').attr('title'); var desc = next.find('img').attr('alt'); //Set the fade in effect for the next image, show class has higher z-index next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000); //Hide the caption first, and then set and display the caption $('#slideshow-caption').animate({left:500}, 300, function () { //Display the content $('#slideshow-caption h1').html(title); $('#slideshow-caption p').html(desc); $('#slideshow-caption').animate({left:0},1000); }); //Hide the current image current.animate({opacity: 0.0}, 1000).removeClass('show'); } //]]> </script> <style type='text/css'> ul.slideshow { list-style:none; width:500px; height:320px; overflow:hidden; position:relative; margin:5; padding:5; font-family:Arial,Helvetica,Trebuchet MS,Verdana; ; } ul.slideshow li { position:absolute; left:0; right:0; } ul.slideshow li.show { z-index:500; } ul img { width:500px; height:300px; border:none; } #slideshow-caption { width: 500px; height: 100px; margin-left: 5px; padding-left: 20px; padding-top: 10px; color:#000; background:#fff; z-index:500; } #slideshow-caption .slideshow-caption-container { margin-left: 5px; padding-left: 0px; z-index:1000; } #slideshow-caption h1 { margin-left: 20px; padding-left: 10px; font-size: 30px; } #slideshow-caption p { margin-left: 20px; padding-left: 10px; padding-bottom: 10px; } </style>
• Selanjutnya simpan
• Jika sudah tersimpan, klik Tata Letak => Tambah Gadget => HTML/JavaScript
• Copy paste script dibawah ini
  
  
  <ul class="slideshow"> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq7aX-4UPREfKB5N3Zu2un5qY9Qnxvx-LMfBesUMbJYuWtXvms1cWBJOrCQbcVv3HIqAOd5_g_ixKRjRa4aim1KoI9QgJoaMXYLmYWNZNWfHUwIJQdbhTRj6r9PFbW4lrkNPExSoyyk4M/s1600/1.jpg" title="Judul Description/uraian ke 1" alt="Ganti tulisan ini dengan Description/uraian 1 anda" /></a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnUkYK6nVriFwRve4mjG5eqKkeqX8JypJiFHWmpWi32Hvk6s6vsiVgHexWoN1AnoB-lD2WcQrivuHps_lZM7p4AYuMeV6Yn_3A0MWjw1jcySuc7D1svGEy9T7jVZL2gzqgRdnDuDtV1R4/s1600/2.jpg" title="Judul Description/uraian ke 2" alt="Ganti tulisan ini dengan Description/uraian ke 2 anda" /></a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXQMEEFgcln6NFty2h-CIqkxHHXFjsqOHt_Cvn83eOI1QxwNOeobRzF2pgySAuikAbnzhD4FP2VF7B-V8kmsmev27Svlc1AzBZoxtj2FvB3QNqGBU2wLTn3JE9jfNq3NO5aAekJoB6ukY/s1600/3.jpg" title="Judul Description/uraian ke 3" alt="Ganti tulisan ini dengan Description/uraian ke 2 anda" /></a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVt4G1ESvWcldRPDV-G8Ymwbs48O3V7GRt61V7lcuGDNljG4gGBur0Gpd-_A6Q3Cq6XhNQRZX8j0TOu97Vr9J30qYktrKS6mRfzUga2HkW_U31n3Jy6RRMuadP-n00D1wt_NrPNSfh4oc/s1600/4.jpg" title="Judul Description/uraian ke 4" alt="Ganti tulisan ini dengan Description/uraian ke 2 anda" /></a></li> </ul> </style>
  
  
• Simpan dan Lihat Hasilnya

Oke gan, tunggu informasi terbaru seputar blogging hanya di http://rendy-cyber4rt.blogspot,com
Semoga bermanfaat bagi sahabat. Jika ada kata yang kurang dimengerti, silahkan berkomentar dibawah postingan ini.
Jika ingin copas "copy paste" sertakan dengan sumbernya
http://rendy-cyber4rt.blogspot.com