Animated Recent Post Widgets

Animated recent post is a good way to present attract your visitors. This widgets display your recent post articles in animated formats. This widgets is simple to use and helpful to attract more visitors on sites or blog. Here i give your 7 different different animated recent post widgets, you can choose any one of them and simply apply on your blog or sites.

How to use Animated Recent Post Widgets

Login to blogger.
Choose your blog.
Go to Layout.
Choose Add gadget.
Choose HTML/JavaScript.
Paste All the below code.
Save

For More Detail Click Here

Animated Recent Post Widgets Style 1

Live Demo

Jquery CODE

<div dir="ltr" style="text-align: left;" trbidi="on">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

CSS CODE

<style media="screen" type="text/css">
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimypCGfA-hla_oxKOOQAzm2ts3SlUmmrw9_peTkpqj9p8QmuuJyKKONrLVJ0zz4dA9NBlhpCmh_Zg7UMaDyRFQJPOV36__7DRTdobutd5w2oGSqeVkkdwtLBPS-RHm7viTAjzY1qwnGFsI/s1600/line.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist 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>

HTML CODE

<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7DTIogBz0p3zkGb3FrkwNO6LHqeyYPh1LX-EpHDHII-L9ztxe0qPYfK_kxh5eqpiDCcPazMw8wsevBm-gCz-wj5WCKRLSXkMDiUhUCjFoYIIxcvB_aDVJe3u6APwPSCxtxPp568pQe1St/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7DTIogBz0p3zkGb3FrkwNO6LHqeyYPh1LX-EpHDHII-L9ztxe0qPYfK_kxh5eqpiDCcPazMw8wsevBm-gCz-wj5WCKRLSXkMDiUhUCjFoYIIxcvB_aDVJe3u6APwPSCxtxPp568pQe1St/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7DTIogBz0p3zkGb3FrkwNO6LHqeyYPh1LX-EpHDHII-L9ztxe0qPYfK_kxh5eqpiDCcPazMw8wsevBm-gCz-wj5WCKRLSXkMDiUhUCjFoYIIxcvB_aDVJe3u6APwPSCxtxPp568pQe1St/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7DTIogBz0p3zkGb3FrkwNO6LHqeyYPh1LX-EpHDHII-L9ztxe0qPYfK_kxh5eqpiDCcPazMw8wsevBm-gCz-wj5WCKRLSXkMDiUhUCjFoYIIxcvB_aDVJe3u6APwPSCxtxPp568pQe1St/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7DTIogBz0p3zkGb3FrkwNO6LHqeyYPh1LX-EpHDHII-L9ztxe0qPYfK_kxh5eqpiDCcPazMw8wsevBm-gCz-wj5WCKRLSXkMDiUhUCjFoYIIxcvB_aDVJe3u6APwPSCxtxPp568pQe1St/s1600/noimage.png";

showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;

home_page = "http://sites18.blogspot.com/";

limitspy=4
intervalspy=4000
</script>
<br />
<div id="spylist">
<script src="http://dl.dropboxusercontent.com/s/3frdg2yvzmdwsto/animated-recent-posts-ycode-1.js" type="text/javascript"></script>
</div>
</div>

Now Time To Customization

1. homepage address

home_page = “http://sites18.blogspot.com/”;

2. Style

from above style/css, you can change :

width : 220px;

width:208px:

customize base on your template

and

background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimypCGfA-hla_oxKOOQAzm2ts3SlUmmrw9_peTkpqj9p8QmuuJyKKONrLVJ0zz4dA9NBlhpCmh_Zg7UMaDyRFQJPOV36__7DRTdobutd5w2oGSqeVkkdwtLBPS-RHm7viTAjzY1qwnGFsI/s1600/line.jpg) repeat-x;

Customize the colors of backuground

3. image size

thumbwidth = 70;

thumbheight = 70;

Match your needs

4. How many post you will show

numposts = 10;

Base on what you need to show

Animated Recent Post Widgets Style 2

Jquery, CSS And HTML CODE

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<style type="text/css" media="screen">
#workwidget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
}

#workwidget ul {
width: 295px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}

#workwidget li {
width: 282px;
padding: 5px 5px;
margin: 0px 0px 5px 0px;
list-style-type: none;
float: none;
height: 80px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimypCGfA-hla_oxKOOQAzm2ts3SlUmmrw9_peTkpqj9p8QmuuJyKKONrLVJ0zz4dA9NBlhpCmh_Zg7UMaDyRFQJPOV36__7DRTdobutd5w2oGSqeVkkdwtLBPS-RHm7viTAjzY1qwnGFsI/s1600/line.jpg) repeat-x;
border: 1px solid #ddd;
}

#workwidget li a {
text-decoration: none;
color: #4B545B;
font-size: 15px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}

#workwidget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}

#workwidget img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#workwidget img:hover {
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7DTIogBz0p3zkGb3FrkwNO6LHqeyYPh1LX-EpHDHII-L9ztxe0qPYfK_kxh5eqpiDCcPazMw8wsevBm-gCz-wj5WCKRLSXkMDiUhUCjFoYIIxcvB_aDVJe3u6APwPSCxtxPp568pQe1St/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7DTIogBz0p3zkGb3FrkwNO6LHqeyYPh1LX-EpHDHII-L9ztxe0qPYfK_kxh5eqpiDCcPazMw8wsevBm-gCz-wj5WCKRLSXkMDiUhUCjFoYIIxcvB_aDVJe3u6APwPSCxtxPp568pQe1St/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7DTIogBz0p3zkGb3FrkwNO6LHqeyYPh1LX-EpHDHII-L9ztxe0qPYfK_kxh5eqpiDCcPazMw8wsevBm-gCz-wj5WCKRLSXkMDiUhUCjFoYIIxcvB_aDVJe3u6APwPSCxtxPp568pQe1St/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7DTIogBz0p3zkGb3FrkwNO6LHqeyYPh1LX-EpHDHII-L9ztxe0qPYfK_kxh5eqpiDCcPazMw8wsevBm-gCz-wj5WCKRLSXkMDiUhUCjFoYIIxcvB_aDVJe3u6APwPSCxtxPp568pQe1St/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7DTIogBz0p3zkGb3FrkwNO6LHqeyYPh1LX-EpHDHII-L9ztxe0qPYfK_kxh5eqpiDCcPazMw8wsevBm-gCz-wj5WCKRLSXkMDiUhUCjFoYIIxcvB_aDVJe3u6APwPSCxtxPp568pQe1St/s1600/noimage.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;

home_page = "http://sites18.blogspot.com/";

limitspy=4;
intervalspy=4000;
</script>

<div id="workwidget">
<script src='http://dl.dropboxusercontent.com/s/qegice7y4oneszj/animated-recent-posts-ycode-2.js' type='text/javascript'></script>
</div>

Note :If your template already have a jquery do not put again, just copy after it Html from above a few things could be replaced :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Now Replace the http://sites18.blogspot.com with your blog Url.

You Can Also CUSTOMIZE The CODE According to Your Need

numposts = 10; //Total number of posts which you wants to scroll by this widget
limitspy=4; //Number of the posts to appear on the widget
intervalspy=4000; //Scrolling speed of the widget,if you decreased the value speed of widget will increases.