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
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. Terimakasih.
Sumber : http://pisscor.blogspot.com/2012/04/cara-membuat-slide-show-di-blog.html
0 komentar:
Posting Komentar