Cara Membuat slide show di blog

4 Apr 201214komentar


 Mungkin sahabat blog mengagumi sesuatu yang pernah ada temukan di blog orang lain, karena mereka mempunyai tampilan slide show, yang bias membuat gambar yang berubah-ubah disatu tempat dengan tampilan yang lebih keren, sehingga sahabat blog  ingin memiliki tampilan slide show tersebut di blog sendiri. Jika tampilan slide show anda belum ada dari dasar template blog anda, maka dengan mengikuti langkah-langkah ini, anda bisa membuatnya di blog anda sendiri.

Caranya seperti dibawah ini :
1.       Masuk ke account blog anda
2.       Pilih Menu Rancangan
3.       Lalu masuk ke edit HTML
4.       Cari kode </head>
Untuk lebih gampang dalam pencariannya, tekan f3 kemudian ketikkan kode diatas !
5.       Copy kode dibawah ini, dan paste sebelum kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

<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><p></p></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>

<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>

6.       Kemudian simpan.
7.       Buat Widget baru (HTML/Java Script)
8.       Copy paste kode dibawah ini kedalamnya !

<ul class="slideshow">

<li><a href="#"><img src="http://i1240.photobucket.com/albums/gg498/tinodo/Pisscor_11.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li>

<li><a href="#"><img src="http://i1240.photobucket.com/albums/gg498/tinodo/Pisscor_8.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li>

<li><a href="#"><img src="http://i1240.photobucket.com/albums/gg498/tinodo/Pisscor_4.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li>

</ul>

9.      Terakhir silahkan anda simpan dan lihat hasilnya.

Catatan : Kode yang berwarna merah diatas, silahkan anda ganti dengan kode/url gambar anda, salah satunya anda bisa mengambil kode gambar anda dari photobucket anda sendiri. Sebelumya saya ucapkan terimakasih atas kunjunganya, semoga postingan saya bermanfaat bagi sahabat. Jika anda berhasil mohon tinggalkan komentarnya, dan jika anda menemukan kesalahan silahkan tinggalkan komentar anda juga, supaya kami dapat memperbaiki kesalahan tersebut.

 (By Pisscor. Terimakasih :)
Share this article :

+ komentar + 14 komentar

2 Mei 2012 05.58

boleh di coba ini gan, terima kasih ya atas tutorialnya. semoga sekses buat yang posting

2 Mei 2012 06.05

thank you gan :)

10 Mei 2012 06.59

Thx sharingnya Gan, nambah ilmu

tq bro.,,,

13 Juni 2012 09.42

tq bro ..
sangat membantu ana ...

5 Juli 2012 07.52

kunjangan malam, nice posting and happy blogging

17 Juli 2012 05.03

Keren gan..

5 Agustus 2012 04.49

Dah Q follow blog mas...!!!


FOLLBACK http://www.zlayerkiller.blogspot.com/

6 Oktober 2012 18.01

gan' untuk nge.cilkan gambarx gimana ya ???? mohon bantuanx !

12 Oktober 2012 00.46

Thanks sudah berbagi infonya, sukses selalu...

13 Oktober 2012 06.26

artikel yg menarik nie, dan saya menyukainya nie, dan salam kenal dari mico ya, makasi atas infonya dan bagi teman2 yg suka film box office,horor,action dan suka download film. silakan kunjungi situsnya ya, makasi

21 Oktober 2012 03.28

terimakasih atas tutorialnya

26 November 2012 02.08

bagus sekali, slider semacam ini bisa makin memperindah tampilan blog selain itu bisa membantu mendapatkan banyak pageview
nice share

12 Desember 2013 06.10

Thanks all

Poskan Komentar

 
Support : Creating Website
Copyright © 2014. Pisscor Berbagi - All Rights Reserved
Template Created by Creating Website
Proudly powered by Blogger