How to add animated recent posts with thumbnails or pictures widget in blogger blogspot is a recent question search in Google recently. I've not added this in my blogger but I've recently removed this from my blogger because there is no space for this widget in my blog. So i decide to tell the world that how to add animated recent posts with thumbnails or pictures widget in blogger. This is better a SEO technique to increase your page views and increase the time duration to stay the user at your site.
1. Go to blogger with signing in.
2. Click on Layout.
3. Add a Gadget where you want (its better to add in sidebar)
4. Select HTML/JavaScript from the list.
5. Paste this below code into HTML/JavaScript and Name the Title Recent Posts then click on Save.
<div class='widget-content' div style='padding-left:1px;'>
<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;padding-left:30px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script style='text/javascript' src="http://stylifyyourblog1.googlecode.com/svn/trunk/recentpostticker.js" ></script>
<script style='text/javascript' src='http://tavristasos.googlecode.com/svn-history/r100/trunk/recentpostswiththumbnailsv3.js'></script>
<script style='text/javascript'>
var numposts = 50;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 70;
$(document).ready(function () {$('#sai').vTicker({
speed: 1500,
pause: 4000,
showItems: 7,
animation: 'fade',
mousePause: false,
height: 0,
direction: 'up'
});});
</script>
<div id="sai">
<script src='http://learnhackz.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'>
</script>
</div><div style align='right'><a href="http://learnhackz.blogspot.com/">Get This</a></div></div>
You have added this widget successfully into your blogger. Now you can modify the colored text in the above code. The red colored are the necessary changes that you made changes in them and the pink are the extra changes that if you want then change or leave them as it is.
1. Change your site name from http://learnhackz.blogspot.com.
2. Change the Direction from UP to Down or leave it same.
3. If you want to change mouse pause function then change the false into true then when the user move the cursor into this widget then the animation is going to be stopped.
4. Change the Show items from 7 to what you want.
1. speed function is used to change the animation speed, you want to increase or decrease by changing the numeric value.
2. If you want to show post summary then remain it same or don't want then change it to false.
3. If you want to show post date then change it to true.
4. If you want to show comment number then change it to true.
5. If you want to show display more in post title the change it to true.
6. var number posts is the total number of posts that shown in the list.
If you like this then remember to write comments.
