✔ Cara Menciptakan Slideshow Website | Blogger

Melihat blog aja sudah malas apalagi posting nya alasannya ialah tampilan blog nya begitu begitu aja Untuk menghilangkan kejenuhan ngeblog, Saya punya ideu, pribadi aja jalan malam, sama siom Google keinginan saya untuk menampilak gambar supaya lezat dipandang eh selesai 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 menyebarkan sama sobat Blogger bagi yg ingin memasang slideshow seperti yang ada-

disini Silahkan tinggal Copy paste Script dibawah ini,Cara nya cukup gampang tinggal ikuti saja langkah berikut ini: Tentunya sobat sudah lebih mengerti untuk login keblog sendiri saya disini akan menunjukan dimana meletakan scrip nya : silahak sobat masuk ke edit HML kemudian cari isyarat </head>  letakan script nya yg ada dibawah ini kemudian letakan diatas isyarat </head> tapi ingat jangan centang kotak Expand Template Widget biarkan saja menyerupai gambar dibawah ini sesudah disimpan script nya pribadi 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 isyarat 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/AVvXsEibyyNjrQ4-KSzuR8e90AAEbSyrcwzUCtYjCJBLID60v56HVBDyRQaBFNOt3VbTJs5c8lXge5TQZeCL8wyeDxG_kPeo42NsO8QlsiAMox-jnWFXiyf7YredEPZ62v1uZKA3OjxU41qoOXo/s1600/004.jpg" title="✔ Cara menciptakan slideshow Website | Blogger" alt="Melihat blog aja sudah malas apalagi posting nya alasannya ialah tampilan blog nya begitu begitu aj ✔ Cara menciptakan slideshow Website | Blogger" /></a></li> <li><a href="http://belajar66.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT6cylJ814vJxfngCmN2Hh3k7EVcNeQ-fkgxo6sXTsW1ZVsvZXmU2aQisdbKHgJS9xgHWr1pTngaOrrOaSa2ffS7H4KHDjxY4bR65xgxCzF2vlUa9XzObOAkNg7eSNmcUx4celcalfWsI/s1600/100.JPG" title="✔ Cara menciptakan slideshow Website | Blogger" alt="Melihat blog aja sudah malas apalagi posting nya alasannya ialah tampilan blog nya begitu begitu aj ✔ Cara menciptakan slideshow Website | Blogger" /></a></li> <li><a href="http://ujang-suryadi.blogspot.com/p/contoh-tempelat.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNhA0rHQW-5Y9S9Goyj3bUMKS6s0Mt-8X8EZSaPm9vnugkd1dnXfReLiQnHViuOMhiWo0Iz3CrwZeCswj3R8tZLQLvCUBb5fPPeWKtKHu71S7-_XQmCg4v5AzmWcCTAq5hHbnuTyWffe8/s1600/007.JPG" title="✔ Cara menciptakan slideshow Website | Blogger" alt="Melihat blog aja sudah malas apalagi posting nya alasannya ialah tampilan blog nya begitu begitu aj ✔ Cara menciptakan slideshow Website | Blogger" /></a></li> <li><a href="http://www.multiteknik66.net"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ4BSZm8Ivsa8vKVk-UzO8H0g7QX75XcjzHSLmv7w59fJxhcnBCsHU1-jhqw-013oBxaeSK-s5XuFabgXveMzJzIyJupWv_Xzb43JVop1uLWnVJ8kV0HtSd4pzjOYfytYVzHvXdOp-0kU/s1600/001.jpg" title="✔ Cara menciptakan slideshow Website | Blogger" alt="Melihat blog aja sudah malas apalagi posting nya alasannya ialah tampilan blog nya begitu begitu aj ✔ Cara menciptakan slideshow Website | Blogger" /></a></li> </ul>
Ket. Untuk Url. gambar dan Tek silahkan ganti sendiri mungkin sobat lebih mengerti dari pada saya ,Bagi sobat yang pasang script ini tidak berhasil silahkan Kontak saya,Selesai sudah selamat mencoba semoga sukses selalu.Salam persahabatan dari saya

Bagikan Artikel ini