Cara membuat SlideShow pada blog atau website

Assalamualakuuumm....!!!!

Kenapa anda harus ada slideshow di blog atau website baraya? jawabanya adalah karena slideshow punya beberapa manfaat, di antaranya adalah anda dapat mempromosikan iklan anda dengan tampilan yang menarik, anda juga bisa menggunakannya untuk memasang iklan orang lain, atau keuntungan lain dengan slideshow adalah tampilan website atau blog anda terlihat lebih profesional.

ada kelebihan tentu ada kekurangan, salah satu kekurangan yang paling terlihat atau paling dirasakan adalah semakin berkurangnya speed loading saat membuka website atau blog Baraya, karena bisa di pengaruhi script, dan bisa juga dipengaruhi ukuran gambar.
jika anda ingin melihat contoh tampilan slideshow nya, klik dibawah ini


CONTOH TAMPILAN SLIDESHOW

DISINI BARAYA

jika Baraya ingin membuat slideshow seperti pada contoh tersebut, anda dapat mengikuti langkah-langkah cara membuatnya berikut ini :

1. anda login dulu di blog anda jika belum masuk

2. pilih template

3. selanjutnya klik edit HTML

4. jangan lupa centang "Expand Template Widget" agar semua kode bisa terlihat

5. cari kode </head>

6. selanjutnya copy kode dibawah ini dan paste kan tepat di atas kode </head> tadi..

<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> </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 :
pada script di atas, terdapat kode seperti dibawah ini

width:500px
height:200px

kode diatas berfungsi mengatur ukuran panjang dan lebar/tinggi slideshow, Baraya bisa merubah angkanya untuk menyesuaikannya dengan ukuran blog Baraya.

7. setelah itu klik Save template

8. sekarang anda pilih Tata Letak, kemudian klik Tambah Gadget, kemudian pilih HTML/Javascript

9. copy kode di bawah ini dan paste kan

<ul class="slideshow"> <li><a href="1"><img src="2" title="3" alt="4" /></a></li> <li><a href="1"><img src="2" title="3" alt="4" /></a></li> <li><a href="1"><img src="2" title="3" alt="4" /></a></li> <li><a href="1"><img src="2" title="3" alt="4" /></a></li> </ul>




Keterangan :
Angka 1 Baraya ganti dengan URL/Link Tujuan apabila gambar di klik
Angka 2 Baraya ganti dengan URL gambar yang ingin di tampilkan
Angka 3 Baraya ganti dengan Judul yang mewakili dari gambar/iklan anda
Angka 4 Baraya ganti dengan keterangan atau deskripsi dari gambar



10. save/simpan

sekarang lihat hasilnya...

Semoga Bermanfaat...

Silahkan Tinggalkan jejak atau komentarnya Disini, Diantos baraya..!!