Demen Kerokan: Cara Membuat Tampilan Poto Bergerak/SlideShow

Dipagi hari ini saya akan menulis cara tentang SlideShow Photo!

Tau ga sob bila album poto kita diblog tampil secara bergantian dengan sendirinya kan lebih menarik prhatian tuch...?

Jadi pengunjung tidak perlu repot-repot buka satu persatu poto kita ia kan sob...?

Kalau sobat berminat untuk ingin tau bagaimana caranya simak penjelasan saya dibawah ini:

Pertama-tama sobat login dulu keblog/blogger.
Lalu sobat klik Desain yang ada dipojok kanan atas.
Lalu soba klik editHTML.
Berikutnya sobat cari kode <head> kalau sudah ketemu lalu sobat kopi paste kode dibawah tepat dibawah kode <head> tadi.

$(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:-50}, 300, function () {
//Display the content
$('#slideshow-caption h1').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').animate({bottom:0}, 640);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>
</script>

Lalu sobat klik simpan.
Langkah selanjutnya sobat klik TataLetak lalu pilih tambah gadget lalu pilih HTMLjavascript kemudian paste kode dibawah ini kedalam kotak gadget.
<ul class="slideshow"> <li><a href="URL BLOG"><img src="URL GAMBAR" title="JUDUL YANG AKAN DITAMPILKAN" alt="KETERANGAN POTONYA"/></a></li> <ul class="slideshow"> <li><a href="URL BLOG"><img src="URL GAMBAR" title="JUDUL YANG AKAN DITAMPILKAN" alt="KETERANGAN POTONYA"/></a></li> <ul class="slideshow"> <li><a href="URL BLOG"><img src="URL GAMBAR" title="JUDUL YANG AKAN DITAMPILKAN" alt="KETERANGAN POTONYA"/></a></li> <ul class="slideshow"> <li><a href="URL BLOG"><img src="URL GAMBAR" title="JUDUL YANG AKAN DITAMPILKAN" alt="KETERANGAN POTONYA"/></a></li> </ul>
Sebelum disimpan sobat ganti dulu
URL BLOG, URL GAMBAR, JUDUL YANG AKAN DITAMPILKAN, KETERANGAN GAMBAR.

CATATAN: Url blog ganti dengan alamat blog sobat, url gambar ganti dengan alamat poto dimana sobat upload contohnya di facebook sobat buka gambar lalu klik kanan dan pilih salin/copy url gambar. nah kode yg telah sobat COPY tadi dari facebook pastekan ke Url gambar.
Judul gambar ini adalah judul apa saja terserah sobat.
Keterangan gambar ini maksudnya adalah kata-kata tentang poto sobat.
Lalu klik simpan gadget.
Atau lebih baik sobat perhatikan contoh dibawah ini

Lalu klik simpan

Demen Kerokan

Minggu, 14 April 2013

Cara Membuat Tampilan Poto Bergerak/SlideShow

Tidak ada komentar: