Home � � How To Create Animated Recent Posts for Blogger with Thumbnails

How To Create Animated Recent Posts for Blogger with Thumbnails

Unknown | 01:07 | 0 comments

Animated recent post widget is a fantastic way to updates to your readers highlighting what are your recently published post. It will help your readers to find your recent post and it will increase attraction to your site/blog and traffic. The effect of smooth scrolling attract readers and generate more clicks to your site.

This gadget displays your most recent posts and includes a small thumbnail, but has the added bonus of using an animated effect that moves smoothly through the posts.There are a lot of great tutorials discussing on how to add Animated Recent posts for blogger with thumbnails and Simple Spy, but most of the tutorials I've found are not really suitable for a beginner.

Follow below steps to add this widget to your blog

Step 1. Login to your Blogger account and then dashboard. 

Step 2. Go to Layout > Add A Gadget. 

Step 3. In Add A Gadget window, select HTML/Javascript. 

Step 4. Copy the code below and Paste it inside the content box.

Step 5. Pace gadget in a suitable place and save

type="text/javascript"></script>

#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/AVvXsEji9doTWrO5dDcF5u007LllUW9X5mG2MX-2viQXdxiHeRNJwPvfaaBkdSumCdjvL9zeqb8hRnxn3gAl54DIjSRxQFDH1PXDUEIuWy76HPYwrfpudoTSjgop_j24zsUgdymQfmmmy6YWnkuT/s1600/24work-

blogspot-com.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><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and

Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position:

fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow"

target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For

Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a

href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img

src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left:

0%;" /></a><script language='JavaScript'>

imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-B3Us9mjp8aDzpxFUEaL1MjWGZsW2-C0BPWqzwV079MVm_06ihWOtN6ITPLGJVtfdmoi5fUc6IFDBWGvhybvIT5Pxx7HMZmtEn08OM7amgrL56-GkvMOwBF0x40JgVNXNFhq-EGAanPje/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-B3Us9mjp8aDzpxFUEaL1MjWGZsW2-C0BPWqzwV079MVm_06ihWOtN6ITPLGJVtfdmoi5fUc6IFDBWGvhybvIT5Pxx7HMZmtEn08OM7amgrL56-GkvMOwBF0x40JgVNXNFhq-EGAanPje/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-B3Us9mjp8aDzpxFUEaL1MjWGZsW2-C0BPWqzwV079MVm_06ihWOtN6ITPLGJVtfdmoi5fUc6IFDBWGvhybvIT5Pxx7HMZmtEn08OM7amgrL56-GkvMOwBF0x40JgVNXNFhq-EGAanPje/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-B3Us9mjp8aDzpxFUEaL1MjWGZsW2-C0BPWqzwV079MVm_06ihWOtN6ITPLGJVtfdmoi5fUc6IFDBWGvhybvIT5Pxx7HMZmtEn08OM7amgrL56-GkvMOwBF0x40JgVNXNFhq-EGAanPje/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-B3Us9mjp8aDzpxFUEaL1MjWGZsW2-C0BPWqzwV079MVm_06ihWOtN6ITPLGJVtfdmoi5fUc6IFDBWGvhybvIT5Pxx7HMZmtEn08OM7amgrL56-GkvMOwBF0x40JgVNXNFhq-EGAanPje/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://Freedomforbloggingtricks.blogspot.com/";

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

type='text/javascript'></script>

</div>

http://freedomforbloggingtricks.blogspot.co.uk/2013/12/animated-resent-post-widget-for-blogger.html

Category:

About GalleryBloggerTemplates.com:
GalleryBloggerTemplates.com is Free Blogger Templates Gallery. We provide Blogger templates for free. You can find about tutorials, blogger hacks, SEO optimization, tips and tricks here!

How To Create Animated Recent Posts for Blogger with Thumbnails

0 comments

Sponsors

Popular Posts

Followers

Labels

Recent Comments

About Me

Blog Archive

Contact Form

Categories

Visitors