Cara Membuat "Slideshow" Di Blog Yang Keren

Panduan blogger yang akan membahas,menjelaskan serta membantu sobat blogger semua khususnya yang masih pemula dalam dunia blog tentang "Panduan Cara Membuat Slideshow Di Blog".SlideShow merupakan salah satu feature content yang bisa diaplikasikan/di tempatkan pada sebuah blog.Gunanya SlideShow adalah untuk menampilkan beberapa gambar secara bergantian dan kita juga bisa membuat link yang terhubung dengan  gambar SlideShowtersebut dan apabila diklik gambar tersebut maka akan menuju ke link yang telah dipasang atau ditentukan tersebut.

Dalam perkembangannya,slideshow banyak dipakai dan digunakan untuk iklan.Baik iklan pribadi maupun iklan dari pihak ketiga.Menurut akoe,memasang SlideShow di sebuah blog dapat mempercantik tampilan sebuah blog sehingga blog tersebut tampil lebih menarik.

Dan jika sobat tertarik untuk measang atau membuatnya,silahkan ikuti langkah-langkah seperti berikut ini :

• Login ke Blogger
• Klik Tata Letak atau Rancangan
• Klik Edit HTML
• Cari Kode </head> (gunakan tombol ctrl+f atau tombol f3 untuk memudahkan pencarian)
• Copy kode di bawah ini dan letakkan tepat di atas 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:500px;
height:200px;
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:500px;
height:200px;
border:none;
}
#slideshow-caption {
width:500px;
height:60px;
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>

• Keterangan :
  Membuat ukuran dengan lebar Gambar 500px dan Tinggi 200px. sobat bisa merubahnya dengan cara merubah kode yang ditandai diatas
• Klik Pratinjau
• Jika Berhasil klik Simpan dan jika gagal klik aja Bersihkan Edit.

Sumber

Yang Ini Nggak Kalah Seru Friends :

Posted in: Blog