Cara Pasang Widget Postingan Terbaru/Recent Posts Slider Blog

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  nya disini 
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 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:#00FFFF url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/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] = "http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png";
imgr[1] = "http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png";
imgr[2] = "http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png";
imgr[3] = "http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png";
imgr[4] = "http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png";
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://kabarmalam.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.

Anda baru saja membaca artikel yang berkategori Widget Blog dengan judul Cara Pasang Widget Postingan Terbaru/Recent Posts Slider Blog. Anda bisa bookmark halaman ini dengan URL http://kabarmalam.blogspot.com/2013/01/cara-pasang-widget-postingan.html. Terima kasih!

Ditulis oleh: Unknown -