Official Ghostcell Blog: Kode Slideshow Photo di Blogger

Home
Menu
Daftar Isi
Download
Link Exchange
Web Report Operator
- Telkomsel
- Esia
- Flexi
- XL

Sabtu, 11 Februari 2012

Kode Slideshow Photo di Blogger

18.14.00 Author : Unknown
Labels: tutorblogger

Letakkan kode berikut dibawah tag <head>

<script src="http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/slideshowpelajaranblogjquery.min.js" type="text/javascript"> <script type='text/javascript'> //<![CDATA[  $(document).ready(function() {  //Execute the slideShow, set 6 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">          <h3>          </h3></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 h3').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({bottom:-70}, 300, function () { //Display the content $('#slideshow-caption h3').html(title); $('#slideshow-caption p').html(desc); $('#slideshow-caption').animate({bottom:0}, 500); });  //Hide the current image current.animate({opacity: 0.0}, 1000).removeClass('show');  }  //]]> </script><br /> <br /> <style type="text/css"> ul.slideshow { list-style:none; width:600px; height:240px; overflow:hidden; position:relative; margin:0; padding:0; 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:600px; height:240px; border:none; } #slideshow-caption { width:600px; height:70px; position:absolute; bottom:0; left:0; color:#fff; background:#000; z-index:500; } #slideshow-caption .slideshow-caption-container { padding:5px 10px; z-index:1000; } #slideshow-caption h3 { margin:0; padding:0; font-size:16px; } #slideshow-caption p { margin:5px 0 0 0; padding:0; } </style>

Setelah itu ke Dashboard > Tata Letak > klik tulisan Add a Gadget (tambah widget) > pilih HTML/Javascript lalu letakkan kode ini:

<ul class="slideshow"><li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGQ_eSw86zcH6jKbwQRAFak6VaxMDEl3sQKFSyx_9TqZjmwiHV1IJk4eKcrVdY9g7w7fiS6Wn66Bj8q2Cy6RMCT0v19eU1x-C93ViQGrLCy7kXtDz7QkzkrV1aALCwjS4gsqVn9d1oys0/s1600/1.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGQ_eSw86zcH6jKbwQRAFak6VaxMDEl3sQKFSyx_9TqZjmwiHV1IJk4eKcrVdY9g7w7fiS6Wn66Bj8q2Cy6RMCT0v19eU1x-C93ViQGrLCy7kXtDz7QkzkrV1aALCwjS4gsqVn9d1oys0/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li> <li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAbyASRb85-u1UpOEACou31wv2BMhLXZIBZBM6d7IB4DuzKKa1ST5SwSXVUTwx_OKzEoF3XdU8xWQlvWGV-2BaDcLWmtqhRViMwtyOGwQd-GZ3u458gS5m8tkxs4euzj-5fkucjaJ25Qc/s1600/2.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAbyASRb85-u1UpOEACou31wv2BMhLXZIBZBM6d7IB4DuzKKa1ST5SwSXVUTwx_OKzEoF3XdU8xWQlvWGV-2BaDcLWmtqhRViMwtyOGwQd-GZ3u458gS5m8tkxs4euzj-5fkucjaJ25Qc/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li> <li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoaK0dXDO-xzJskEviJNBsswsN9xpkDkwx6Zh55QPr4HC35YS8WZ4ijms9KzxE6dScY-sxOmw8cZn3t01Y42idlI4Q6Duv11t4Xv1CyHoprH5aNovqSkFrYUfZn8h85os0y6X1WMzIBz4/s1600/3.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoaK0dXDO-xzJskEviJNBsswsN9xpkDkwx6Zh55QPr4HC35YS8WZ4ijms9KzxE6dScY-sxOmw8cZn3t01Y42idlI4Q6Duv11t4Xv1CyHoprH5aNovqSkFrYUfZn8h85os0y6X1WMzIBz4/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li> <li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTGlnT7ZWaXCNG705zlf-pOPwmx0n92xbtHd3icM9JzpvdjyJsL0_FCmxYflCVjGul4nubr3uwqVIkfPfwfT8Iy2wIDFgnzYFq0JdJYfb4AMv9YzeKEPQaxhqjtKdI3PArktbKblJWCog/s1600/4.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTGlnT7ZWaXCNG705zlf-pOPwmx0n92xbtHd3icM9JzpvdjyJsL0_FCmxYflCVjGul4nubr3uwqVIkfPfwfT8Iy2wIDFgnzYFq0JdJYfb4AMv9YzeKEPQaxhqjtKdI3PArktbKblJWCog/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li> </ul>

Loading

0 Commentators :

Posting Komentar

Silahkan anda berkomentar, namun tetap jaga kesopanan dengan tidak melakukan komentar spam.

Langganan: Posting Komentar ( Atom )

Copyright 2011 All Rights Reserved Official Ghostcell Blog . Custom Energy Saving . Powered by Blogger