Membuat Galeri slideshow Dengan javascript

1

Saya Mendapatkan artikel ini dari temen blogger juga yg punya kikiyo.co.cc nah artikel ini juga yang sudah sejak lama saya cari tp baru nemuin deh. tp m saya coba di blog saya yg satunya saja, cz kalau disini ntar g muaat hoho.. m liat contohnya bisa Click Disini

Langsung saja ke proses pembuatan


Langkah Pembuatan :

1. Masuk Ke akun Blogger Anda
2. Klik Rancangan Pilih Edit Html
3. Cari Kode <head>
4. Lalu Copy Paste Kode Dibawah Ini Dan Letakan  Tepat diatas kode <head> 



<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() { slideShow(3000); }); function slideShow(speed) { $('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>'); //Script by www.kikiyo.co.cc $('ul.slideshow li').css({opacity: 0.0}); $('ul.slideshow li:first').css({opacity: 1.0}); $('#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}); var timer = setInterval('gallery()',speed); $('ul.slideshow').hover( function () { clearInterval(timer); }, function () { timer = setInterval('gallery()',speed); } ); } function gallery() { var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first')); var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first')); var title = next.find('img').attr('title'); var desc = next.find('img').attr('alt'); next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000); $('#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); }); current.animate({opacity: 0.0}, 1000).removeClass('show'); } //]]> </script> <style type='text/css'> ul.slideshow { list-style:none; width:800px; 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:800px; height:240px; border:none; } #slideshow-caption { width:800px; 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>


5. Klik Save
6. Selanjutnya klik Rancangan klik Tambah Gadget
7. Pilih HTML/Javascript lalu masukan script kode dibawah ini

<center> <ul class="slideshow"> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip2q7vcKcmNJOMzutt1PgaKE2whqpH1HcnrDDs9PY2ruYTLIIdYgnZDwp-61gdjdFJn6b9dBUV9QHMs5g5Y0IUJ9FA5IX6OTOvIpCHe5HK2gtenB5X_-s5TW4S56_sZXkSJ32gZXttKzE/s1600/1.jpg" title="Gambar Slideshow 1" alt="Penjelasan Artikel Pada Gambar 1" /></a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOEK1JlCEDI_iel_1yJ0YKh-fGhVa0p109L6Y5TMOFgCsg93Vvg6-Z-xPnETqeEt8d_2-qod3UBbx9o4b0NnIJMIEQjOeE2eW-l7tEDeiXWv-5u_SFW3mCKVKRddfJtczuMu_eqgQsuNc/s1600/2.jpg" title="Gambar Slideshow 2" alt="Penjelasan Artikel Pada Gambar 2" /></a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3zWknlLGnB6w-CRw-qNy8Yv1d-aLicJiwKstfM4zLh8xwaRrQ5fV66nD56nqzvj2shwBeTk_DZrT5TjVRcSiVTzS4AluNN6dsxupNN9y2gC_i3OPfOhn93bu67cb1fCafhRETFyjppO0/s1600/3.jpg" title="Gambar Slideshow 3" alt="Penjelasan Artikel Pada Gambar 3" /></a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuShrYDybPZ5FohWCMLkLUOg9eBJJXU53H3ygo6ZuuDe9a8FavA8jYLexRYAITWUMbETJaX4lUsgVTZR5m5LMQBNYUJ2fbkFqdGzjR0issPTmkZeyRkw6EV6QGMWX9e4tEdmna6gRbIAY/s1600/4.jpg" title="Gambar Slideshow 4" alt="Penjelasan Artikel Pada Gambar 4" /></a></li> </ul> <center/></center></center>

8. Klik Save
9. Dan Lihat hasilnya