Cara Mudah Memasang Slide Show di Blogspot

budi purnomo




Setelah membahas tentang Cara Membuat atau  Memasang Ping disetiap Postingan dan Cara Cepat Update Status PageRank di Google,kali ini saya akan menshare kiat di blogging dengan tema Cara Mudah Memasang Slide Show di Blogspot,tetapi seperti biasa ijinkan saya mencoba menjelaskan sedikit pengertian dari Slide Show itu sendiri,adalah sebuah widget gambar yang tampilannya berubah-ubah menjadikan tampilan blog para sobat menjadi cantik,dan gambar tersebut muncul di halaman awal sebuah blog atau website yang pasangkan di home page,tampilan gambarnya akan muncul silih berganti serta di iringi dengan judul dan deskripsinya.bagaimana tertarik dan berminat untuk mencobanya.ikuti cara berikut di bawah ini: 


1. Login terlebih dulu ke akun blog para sobat.
2. Klik rancangan > Edit HTML
3 .Cari kode  </head>
4. Dan letakkan kode dibawah berikut sebelum 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:600px;
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:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
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. Lalu simpan,
6. Kemudai para sobat buka Elemen Laman
7. Lalu Klik  gadget baru (HTML/JavaScript) dengan kode di bawah ini



<ul class="slideshow">
<li><a href="#"><img src="http://i1235.photobucket.com/albums/ff429/budipurnomo/adult/FOTOMESUMANGGOTADPR1.jpg" title="Video Mesum  Oknum Anggota DPR" alt="Potongan Foto ini di ambil dari video mesum yang beredar di internet,apakah benar?dilakukan oleh orang yang mirip dengan Anggota Dewan Rakyat." /></a></li>
<li><a href="#"><img src="http://i1235.photobucket.com/albums/ff429/budipurnomo/adult/foto-bugil-dewi-persik.jpg" title="foto setengah bugil penyanyi Dewi Persik" alt="Foto tersebut diambil saat Dewi tengah berada di studio,Ia tampak asyik dan menikmati gaya yang tershot oleh kamera." /></a></li>
<li><a href="#"><img src="http://i1235.photobucket.com/albums/ff429/budipurnomo/adult/jpg.jpg" title="Di sukai Para pria,ini Dia salah satunya" alt="Lalu seperti apa sih type wanita yang mempunyai gairah atau hasrst sex yang tinngi itu...hmm ada dalam artikel di blog ini..." /></a></li>
<li><a href="#"><img src="http://i1235.photobucket.com/albums/ff429/budipurnomo/adult/indahbanget.jpg" title="Tehknik Meremas Payudara Wanita" alt="Buat yang satu ini tentunya para sobat tidak perlu belajar..sekedar pengen tahu trik nya ada dalam artikel di blog ini." /></a></li>
</ul>

catatan:
 Para sobat bebas menggant: tulisan tebal dengan URL gambar dan mengganti pula  titledan alt sesuai keinginan para sobat.
8. Selesai.
Demikian kiat di blogging dengan tema Cara Mudah Memasang Slide Show di Blogspot ,semoga bermanfaat.

4 komentar:

  1. Terima kasih kang atas tipsnnya ,,,namun apakah berpengaruh pada kecepatan loading blog kita ?

    ReplyDelete
  2. ea pasti mas ...utk mengakalinya...dpt menguarangi widget yg dianggap kurang perlu.bila ingin memasangnya...

    ReplyDelete
  3. Wah, ini dia cara memasang slide show. Kami berencana memasang slide show untuk variasi tampilan, mas budi...Mohon ijin utk kopi scriptnya...

    ReplyDelete
  4. Keren juga ya mas kalau blog ada slide show nya. Jadi, nantinya akan terlihat profesional seperti webasite kampus/sekolah :D

    Btw gambar posting-nya cukup berbahaya mas untuk anak kecil :)

    ReplyDelete

Terima kasih buat kunjungan dan komentar dari rekan semua...

 

ragam

trans

opini

layanan umum