Cara membuat slideshow Website | Blogger

Melihat blog aja sudah malas apalagi posting nya karena tampilan blog nya begitu begitu aja Untuk menghilangkan kejenuhan ngeblog, Saya punya ideu, langsung aja jalan malam, sama siom Google keinginan saya untuk menampilak gambar supaya enak dipandang eh akhir nya jalan jalan sama siom menemukan juga Ideu nih, untuk membuat slideshow banyak juga pareasi dan kreatif Design para senior Blog maupun Design Website. Nah disini saya mau berbagi sama sahabat Blogger bagi yg ingin memasang slideshow seperti yang ada-

disini Silahkan tinggal Copy paste Script dibawah ini,Cara nya cukup mudah tinggal ikuti saja langkah berikut ini: Tentunya sahabat sudah lebih mengerti untuk login keblog sendiri saya disini akan menerangkan dimana meletakan scrip nya : silahak sahabat masuk ke edit HML lalu cari kode </head>  letakan script nya yg ada dibawah ini lalu letakan diatas kode </head> tapi ingat jangan centang kotak Expand Template Widget biarkan saja seperti gambar dibawah ini setelah disimpan script nya langsung aja disave/Simpan  template

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() { //Execute the slideShow, set 5 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"><h1></h1><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 h1').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({left:450},200, function () { //Display the content $('#slideshow-caption h1').html(title); $('#slideshow-caption p').html(desc); $('#slideshow-caption').animate({left:0},1000); });

Langkah kedua :
1.Langkah selanjutnya kembali ke Rancangan dan pilih Elemen Halaman.
2. Silahkan tambah Gadget'.
3. Pilih 'HTML / Javascript' dan masukkan kode dibawah ini :
<ul class="slideshow"> <li><a href="http://ujang-suryadi.blogspot.com/p/jasa-akun-adsense-plus-blogspot.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidhEbJyzsbtqLMTZpHPX-FImOEI2Kx9JIPFLFLBay_PJ6hPvjJvQVqfvi16e4DHHFaa6WvXbtEeMA9hwQBfItdsFUCGZ6Zz2wLNSKhYcOJBrcwl4F4P6rn_i1KQUsgIna3UwMPIkrXLHM/s1600/004.jpg" title="JASA PEMBUATAN AKUN ADSENSE" alt="BLOG SAJA BISA MENDAPATKAN DOLAR" /></a></li> <li><a href="http://belajar66.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqr7Nvw722FKxUqChPyOPv4YXBdylf6mQCDg1KEXkCN9RtCI-PtI26xt2Gl3K1LPIYgqfxHSeoLirsjnvLMd7c_f85Ou2LgvElmHB4g936uWRlxa8BuXVYpaJ67OlL6ghk3fNorU9Cdyw/s1600/100.JPG" title="BELAJAR MEMBACA AL-QUR'AN" alt="BELAJAR SAMBIL CARI DONASI" /></a></li> <li><a href="http://ujang-suryadi.blogspot.com/p/contoh-tempelat.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBLam0FhYSnrIqYPWF9aXzs60qpGdoAyg45fnFDzRRHFNzGOrjUdDahtznOAWyG7y6MJJwoUzO8cy3-W1eAWqAom8X0gfqysy2pn2GIk0DhTdhFJAJWKlqzASrSp6oUHtC7G40v0MzfOM/s1600/007.JPG" title="GALERY TEMPELAT BLOG" alt="TERIMA PEMBUATAN BLOG - WEBSITE" /></a></li> <li><a href="http://www.multiteknik66.net"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpN9Prs7enZKKRx67RdvSkcpLzUUtfL2gsPmHLzZ3OsWNUM5GgbbuqZtgMm-kJ6Dx6K-6J76HM7Dl6sXmeNCiVcP-PCxh25RNl73KMsSQ22KNmcDGu0xmhpf5n4EZwbUqhOh8vamByEhc/s1600/001.jpg" title="SERVICE ONLINE SIAP DIPANGGIL" alt="Air Conditioner-Computer dan Elektronika Tlp.021 - 715 944 85" /></a></li> </ul>
Ket. Untuk Url. gambar dan Tek silahkan ganti sendiri mungkin sahabat lebih mengerti dari pada saya ,Bagi sahabat yang pasang script ini tidak berhasil silahkan Kontak saya,Selesai sudah selamat mencoba semoga sukses selalu.Salam persahabatan dari saya