How To Add Animated Recent Post widget For Blog

Animated Recent Posts for Blogger with Thumbnails good way to show your recent posts in side bar with animation effect to your readers. This is very fantastic way to get more clicks on your recent posts and present your new post in headlines update for your readers. Animated Recent Posts gadget shows your most recent posts with animated effect to move smoothly through the posts. We are giving you full tutorial about Animated Recent Posts for Blogger with Thumbnails. We also give you different types of recent post widget for your blog. You can simply add our code on your sidebar and it will show recent posts on your blog. We give you also demo of recent posts widget to show how to look this on your blog.
To Add Sliding OR Animated Recent Post Widget Just Follow these step

1.log in Onto You Account

2.Then Click on the layout

3.Click on the Add Widget

4.Select  HTML/JAVASCRIPT

5.After that Copy the following cod and past it

<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:230px;

background: #1ed2f2;

list-style-type: none;

margin:0 0 5px 0px;

padding:5px 5px 1px 10px !important;

-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border: 0 none !important;-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;

}

#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 li:hover {

background: #84f6f5;

}

#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>

<a href=”http://nafisflahi.blogspot.com/” rel=”dofollow” target=”_blank” title=”Grab this”><img src=”https://bitly.com/24workpng” alt=”Blogger Tips And Tricks|Latest Tips For Bloggers” border=”0″ style=”position: fixed; bottom: 10%; right: 0%; top: 0px;” /></a><a href=”http://nafisflahi.blogspot.com/” rel=”dofollow” target=”_blank” title=”Free Backlinks”><img src=”https://bitly.com/24workpng” alt=”Free Backlinks” border=”0″ style=”position: fixed; bottom: 10%; right: 0%;” /></a><a href=”http://nafisflahi.blogspot.com/” rel=”dofollow” target=”_blank” title=”Free”><img src=”https://bitly.com/24workpng” alt=”Blogger Tips And Tricks” border=”0″ style=”position: fixed; bottom: 10%; left: 0%;” /></a>

<script language=’JavaScript’>

imgr = new Array();

imgr[0] = “http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png”;

imgr[1] = “http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png”;

imgr[2] = “http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png”;

imgr[3] = “http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png”;

imgr[4] = “http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/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 = “https://www.nafisflahi.com/”;

limitspy=4;

intervalspy=4000;

</script>

<div id=”workwidget”>

<script src=’http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com-3.js’ type=’text/javascript’></script>

</div>

6. Just change home page URL with your site URL 

7.Click on the save gadget

You have successfully installed animated recent post widget to your blog