Animated Recent Post merupakan antara widget yang mampu memaparkan artikel anda yang terkini dalam bentuk yang lebih menarik lagi. Ia memaparkan artikel terkini yang disertakan dengan timer untuk bertukar ke artikel yang lain dalam bentuk animasi. Sebelum ini saya ada berkongsi tutorial menghasilkan recent post tanpa gambar.
Widget ini akan memaparkan jumlah artikel terkini anda iaitu tajuk artikel, serta jumlah komen pada artikel tersebut. Anda boleh tetapkan seberapa banyak kandungan artikel terkini yang anda mahu ianya animated pada blog anda.
Cara Meletekan Widget Animated Recent Post Dengan Gambar
Langkah 1:Login ke akaun blogspot anda
Langkah 2:
Dashboard >> Layout
Langkah 3:
Klik add gadget pada side bar anda
Langkah 4:
Add Html/Javascript
Langkah 5:
Copy kode di bawah kemudian Pastekan pada Html/JavaScript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#rahmadgraphic {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#rahmadgraphic ul{
width:298px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#rahmadgraphic li {
width:298px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://1.bp.blogspot.com/-6Yrt9wUoCCA/UsiNzs49iVI/AAAAAAAAA44/NsEEdO5WBdc/s1600/easytins-com.jpg) repeat-x;
border:1px solid #ddd;
}
#rahmadgraphic li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#rahmadgraphic li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "http://1.bp.blogspot.com/-Zw_qVJpyqUI/Uq8VbD5YZEI/AAAAAAAAAsE/VN-TEDq0Y3Y/s1600/no+image.png";
imgr[1] = "http://1.bp.blogspot.com/-Zw_qVJpyqUI/Uq8VbD5YZEI/AAAAAAAAAsE/VN-TEDq0Y3Y/s1600/no+image.png";
imgr[2] = "http://1.bp.blogspot.com/-Zw_qVJpyqUI/Uq8VbD5YZEI/AAAAAAAAAsE/VN-TEDq0Y3Y/s1600/no+image.png";
imgr[3] = "http://1.bp.blogspot.com/-Zw_qVJpyqUI/Uq8VbD5YZEI/AAAAAAAAAsE/VN-TEDq0Y3Y/s1600/no+image.png";
imgr[4] = "http://1.bp.blogspot.com/-Zw_qVJpyqUI/Uq8VbD5YZEI/AAAAAAAAAsE/VN-TEDq0Y3Y/s1600/no+image.png";
showRandomImg = true;
boxwidth = 600;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://seo.rahmadgraphic.my/";
limitspy=4
intervalspy=4000
</script>
<div id="rahmadgraphic">
<script style="text/javascript" src="https://googledrive.com/host/0B7pOQPLcBrlSdFU4SjRZTEl1QUE"></script></div>
<a href="http://goo.gl/0394O4" style="font-size: 8px; text-decoration:none; color: #cccccc; target="_blank">Get This Widget</a>
Langkah 6:
Ubah Suai
width:298px ~ Lebar widget, tukar 298 kepada lebar yang anda mahukan.
numposts = 10 ~ Jumlah post yang akan animated
http://seo.rahmadgraphic.my/ ~ Tukar kepada url Blog Anda
limitspy=4 ~ Jumlah paparan post yang statik
intervalspy=4000 ~ Speed animasi recent post ke post yang lain
Langkah 7:
Klik Save dan Lihat hasilnya
