Cara Pasang Recent Posts Slider

Recent posts slider versi 2 seperti yang boleh anda lihat pada blog ini (silakan klik) sememangnya widget yang sangat menarik. Widget tersebut akan memaparkan tajuk post beserta thumbnail (image) yang berefek slider.

Untuk memasang widget recent post slider ini pada blog anda, silakan ikuti langkah-langkah berikut.

Langkah 1

Log in blog > Dashboard > Layout > Add A Gadget lalu klik pada +HTML/Javascript.

Langkah 2

Salin kode di bawah dan paste pada ruang content 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:#FDE1E1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6y5mBcvzOALl2c5IgyuDh5-gQ7fFQGwZaDfruaenoqANYwMfvbzCOVpW14UzpiuU9n1H205ohWzOKINFjuKr4JSR1GDjkK4AWQKEPhDPSAXhS-eP22XlR0Hi9ZDKkHx6ZLyaNRcQm3BB_/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/AVvXsEini5jBiEpW9QM2mT2EUaWkoMwWLYRDTX5FGmGuIr-AZnCIt_5xZiOmaZerVnzr8CaBc-GzQ_TgLZ730QBAjhKZa59LswjlYipTYE198OYuvfzY56gFmjcUYvOLBe0Or2WMecY2g-yKNtwh/";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEini5jBiEpW9QM2mT2EUaWkoMwWLYRDTX5FGmGuIr-AZnCIt_5xZiOmaZerVnzr8CaBc-GzQ_TgLZ730QBAjhKZa59LswjlYipTYE198OYuvfzY56gFmjcUYvOLBe0Or2WMecY2g-yKNtwh/";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEini5jBiEpW9QM2mT2EUaWkoMwWLYRDTX5FGmGuIr-AZnCIt_5xZiOmaZerVnzr8CaBc-GzQ_TgLZ730QBAjhKZa59LswjlYipTYE198OYuvfzY56gFmjcUYvOLBe0Or2WMecY2g-yKNtwh/";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEini5jBiEpW9QM2mT2EUaWkoMwWLYRDTX5FGmGuIr-AZnCIt_5xZiOmaZerVnzr8CaBc-GzQ_TgLZ730QBAjhKZa59LswjlYipTYE198OYuvfzY56gFmjcUYvOLBe0Or2WMecY2g-yKNtwh/";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEini5jBiEpW9QM2mT2EUaWkoMwWLYRDTX5FGmGuIr-AZnCIt_5xZiOmaZerVnzr8CaBc-GzQ_TgLZ730QBAjhKZa59LswjlYipTYE198OYuvfzY56gFmjcUYvOLBe0Or2WMecY2g-yKNtwh/";
showRandomImg = true;
tablewidth = 250;
cellspacing = 0;
borderColor = "";
bgTD = "#";
imgwidth = 35;
imgheight = 35;
fntsize = 12;
acolor = "#262626";
aBold = true;
icon = "";
text = "no";
showPostDate = false;
summaryPost = 0;
summaryFontsize = 0;
summaryColor = "#";
icon2 = "";
numposts = 15;
home_page = "http://happyday4ever.blogspot.com/";
</script>
<script src="http://javscript-code.googlecode.com/files/recent_posts_slider.js" type="text/javascript"></script>

Sila edit kode yang berwarna biru mengikut kesesuaian blog anda.

width:280px;  (lebar kotak)
tablewidth = 250 (lebar teks pada kotak)
background:# FDE1E1;  ( background kotak)
acolor = "#262626";  (Warna teks)
numposts = 15;  (Bilangan tajuk post yang ingin ditampilkan)
home_page = "http://happyday4ever.blogspot.com/";  ( URL blog anda)

Akhir sekali, klik Preview dan jika tiada pesan Error yang tampil, klik Save.