Cara Pasang Widget Posts Slider Blog

Postingan kali ini berbagi Cara Pasang Widget Postingan Terbaru Posts gaya Slider Blog dengan tampilan yang cukup menarik dengan animasi slider seperti contoh >>>  demo  nya     DISINI 

 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 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/AVvXsEicJrqxWHM3Gp_8E0HiNHFv8NpD6Sy4OLtmsP6RoT8f-0BbsQiV9_CeooJq4o4ev6ch3ptF3QeCANa_qzkcL2a8itkcQ4raUvB6N3wjeRVBtRE-4uEDWlJhaJmJf8BBrxLBmEuUD9OchV-I/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/AVvXsEhCoNmkJuqnNusTPjZLfIpVKeMD8GDM7TWjmBRl8mgS40YEDwjn-BuV04PhRrEUzrjtq9POwYctEErcstsDBWxqrH-8kFFL2K1sQkLgVtT_gbSXqHD8w7WmYngY6NZ_ueTk814UANOst0ob/";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCoNmkJuqnNusTPjZLfIpVKeMD8GDM7TWjmBRl8mgS40YEDwjn-BuV04PhRrEUzrjtq9POwYctEErcstsDBWxqrH-8kFFL2K1sQkLgVtT_gbSXqHD8w7WmYngY6NZ_ueTk814UANOst0ob/";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCoNmkJuqnNusTPjZLfIpVKeMD8GDM7TWjmBRl8mgS40YEDwjn-BuV04PhRrEUzrjtq9POwYctEErcstsDBWxqrH-8kFFL2K1sQkLgVtT_gbSXqHD8w7WmYngY6NZ_ueTk814UANOst0ob/";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCoNmkJuqnNusTPjZLfIpVKeMD8GDM7TWjmBRl8mgS40YEDwjn-BuV04PhRrEUzrjtq9POwYctEErcstsDBWxqrH-8kFFL2K1sQkLgVtT_gbSXqHD8w7WmYngY6NZ_ueTk814UANOst0ob/";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCoNmkJuqnNusTPjZLfIpVKeMD8GDM7TWjmBRl8mgS40YEDwjn-BuV04PhRrEUzrjtq9POwYctEErcstsDBWxqrH-8kFFL2K1sQkLgVtT_gbSXqHD8w7WmYngY6NZ_ueTk814UANOst0ob/";
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://widgetcool.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://widgetcool.blogspot.com/";  ( URL blog anda)

6. Terakhir Klik Simpan.

Kalau ada kesalahan kode mohon berika pemberitahuan melalui form komentar di bawah ini  , Sekian dan terima kasih.