Cara Buat Slide Show Pada Postingan Blogspot

Pada postingan kali ini saya akan berbagi Cara Pasang Widget Postingan Terbaru/Recent Posts Slider Blog dengan tampilan yang cukup menarik dengan animasi slider seperti contoh demo  nyadisini 

Fungsinya hampir sama dengan postingan sebelum nya Cara Memasang Slider Teks Artikel Terbaru Diatas Postingan Blog Cara pasang nya cukup mudah yaitu dengan langkah sebagai berikut :

1. Login dulu ke blogger
2. Pilih Tata Letak
3. Klik Salah satu tambahkan Gadget
4. Pilih HTML/Javascript
5. Masukan Kode di bawah ini ke halaman HTML/Javascript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script><script src='http://secebisilmu.blogspot.com' type='text/javascript'>
</script>
<script type="text/javascript">
$(document).ready(function(){
var first = 0;
var speed = 700;
var pause = 4500;
function removeFirst(){
first = $('ul#listticker li:first').html();
$('ul#listticker li:first')
.animate({opacity: 0}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}
function addLast(first){
last = '<li style="display:none">'+first+'</li>';
$('ul#listticker').append(last)
$('ul#listticker li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}
interval = setInterval(removeFirst, pause);
});
</script>
<style type="text/css">
#listticker{
height:277px;
width:280px;
margin-bottom:15px;
padding:0px;
overflow:hidden;
}
#listticker li{
background:#00FFFFurl(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI1cL463DgxxMaxJ_GjcS3uXyXblcU0WohnKXgXauhUwtZVZWrRwHRuwqn_JWhDrgJenECOhtOtHVDckHAJO5cqfo_uBlo6JOyciK05ssE40hlM28rGDd-2gJdAvZB6iXVmBTyoLXwCePV/s320/gradient.png) repeat-x 0 -100px!important;
border: 1px solid #C6C6C6;
list-style:none;
line-height:0.90em;
height:46px;
margin:3px;
padding:2px;
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}
#listticker li a{
font-family: 'arial';
text-transform:normal;
text-shadow:0 1px 2px rgba(0,0,0,0.6);
letter-spacing:0.05em;
overflow:hidden;
}
#listticker img{
float:left;
margin:3px 3px 4px -7px;
padding:0px;
border:#EAE7E7 solid thin;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
#listticker img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-webkit-transform: scale(1.2);
}
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCaue50-Z3rniUqlaSQFoPn_HYN_qWlmRgLNYg6hpvsqBbch8kd5yeCypXh2KYyo4TFZje6mCTaD8UtTPE9IO35b8uARk6NHv5UC66SRnDscqUjyE2f2bpDQEIEGwWUikC02X66pN_6Pk7/";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCaue50-Z3rniUqlaSQFoPn_HYN_qWlmRgLNYg6hpvsqBbch8kd5yeCypXh2KYyo4TFZje6mCTaD8UtTPE9IO35b8uARk6NHv5UC66SRnDscqUjyE2f2bpDQEIEGwWUikC02X66pN_6Pk7/";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCaue50-Z3rniUqlaSQFoPn_HYN_qWlmRgLNYg6hpvsqBbch8kd5yeCypXh2KYyo4TFZje6mCTaD8UtTPE9IO35b8uARk6NHv5UC66SRnDscqUjyE2f2bpDQEIEGwWUikC02X66pN_6Pk7/";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCaue50-Z3rniUqlaSQFoPn_HYN_qWlmRgLNYg6hpvsqBbch8kd5yeCypXh2KYyo4TFZje6mCTaD8UtTPE9IO35b8uARk6NHv5UC66SRnDscqUjyE2f2bpDQEIEGwWUikC02X66pN_6Pk7/";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCaue50-Z3rniUqlaSQFoPn_HYN_qWlmRgLNYg6hpvsqBbch8kd5yeCypXh2KYyo4TFZje6mCTaD8UtTPE9IO35b8uARk6NHv5UC66SRnDscqUjyE2f2bpDQEIEGwWUikC02X66pN_6Pk7/";
showRandomImg = true;
tablewidth = 250;
cellspacing = 0;
borderColor = "";
bgTD = "#";
imgwidth = 35;
imgheight = 35;
fntsize = 12;
acolor = "#000000";
aBold = true;
icon = "";
text = "no";
showPostDate = false;
summaryPost = 0;
summaryFontsize = 0;
summaryColor = "#";
icon2 = "";
numposts = 15;
home_page = "http://tempatmp3terlengkap.blogspot.com/";
</script>
<script src="http://kabarmalam.googlecode.com/files/postingan-terbaru-slider.js" type="text/javascript"></script>

Keterangan :

• Kode yang berwarna merah silahkan disesuaikan dengan tema blog dan lebar blog
• width:280px;  (lebar widget)
• tablewidth = 250 (Panjang teks)
• background:#00FFFF;  ( background widget)
• acolor = "#000000";  (Warna teks)
• numposts = 15;  (jumlah postingan yang mau di tampilkan)
• home_page = "http://secebisilmu.blogspot.com/";  ( URL blog anda)

6. Terakhir Klik Simpan.

Read more: http://secebisilmu.blogspot.com/2013/04/cara-pasang-widget-recent-post.html#ixzz3pZjGf9zG