Animated recent post widget with thumbnail for blogger


Writing the quality posts and engaging users with the content available on website is the key of success in blogging platforms. There are lots of tricks to achieve these goals. Here I am going to post one of the way which will surely engage your users with content available on website using animated recent post widget with thumbnails!

Animated recent post widget with thumbnail for blogger
Animated recent post widget with thumbnail for blogger


Demo

Steps you have to perform
1. Log in to blogger dashboard!
2. Navigate to "Layout" section of your blog.

Animated recent post widget with thumbnail for blogger

3. Click on "Add a Gadget". Select "HTML/JavaScript".

Animated recent post widget with thumbnail for blogger4. Copy down below code (Press Ctrl+A to select entire code)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<body>
<style type="text/css" media="screen">
#spylist {
overflow:hidden;
margin-top:4px;
padding:0px 0px;
height:400px;
}
#spylist ul{
width:300px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:295px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:85px;
overflow: hidden;
background: #000
url(https://lh6.googleusercontent.com/-A6a829gqfDQ/T-3xppy6MlI/AAAAAAAACFE/RrOao4P11Uk/s1600/helperblogger.com-post.jpg)
repeat-x;
border: 1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#000;
font-size:12px;
height:17px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#f4eeee;
border:0;
}
#spylist img { float: left; margin-top: 10px; margin-right: 15px; background: #EFEFEF; border: 0; }
#spylist 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);
}
#spylist 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:11px;
color:#007cb5;
padding: 3px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:9px;
color:#272b2e;
padding:2px 0px;
margin:0px 0px;
}
/* -------Animated Scrolling Recent Posts Widget By FunWithTricks.Com------ */
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://lh6.googleusercontent.com/-GCuCGK_Vqno/UqSAbG2jZqI/AAAAAAAAAQk/WjlPsKrXZWQ/s88-no/thumb.png";
imgr[1] = "https://lh6.googleusercontent.com/-GCuCGK_Vqno/UqSAbG2jZqI/AAAAAAAAAQk/WjlPsKrXZWQ/s88-no/thumb.png";
imgr[2] = "https://lh6.googleusercontent.com/-GCuCGK_Vqno/UqSAbG2jZqI/AAAAAAAAAQk/WjlPsKrXZWQ/s88-no/thumb.png";
imgr[3] = "https://lh6.googleusercontent.com/-GCuCGK_Vqno/UqSAbG2jZqI/AAAAAAAAAQk/WjlPsKrXZWQ/s88-no/thumb.png";
imgr[4] = "https://lh6.googleusercontent.com/-GCuCGK_Vqno/UqSAbG2jZqI/AAAAAAAAAQk/WjlPsKrXZWQ/s88-no/thumb.png";
showRandomImg = true;
boxwidth = 300;
cellspacing = 5;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 69;
thumbheight = 72;
fntsize = 13;
acolor = "#555";
aBold = false;
icon = " ";
text = "comments";
showPostDate =true;
summaryPost = 39;
summaryFontsize = 9;
summaryColor = "#555";
icon2 = " ";
numposts = 12;
home_page = "http://www.funwithtricks.com/";
limitspy=7;
intervalspy=3000
</script>
<div id="spylist">
<script src='https://googledrive.com/host/0B_1mqJd2tC8qLUJMTGZqTE1qTUU' type='text/javascript'></script>
</div>
<a href="http://www.funwithtricks.com/2013/12/animated-recent-post-widget-for-blogger.html" target="_blank">Get this widget!</a>

5. paste into "HTML/JavaScript" section. Enter any title line "Recent Posts". Click on "Save".

Animated recent post widget with thumbnail for blogger

6. Done now check out your block whether it's working or not!

Customization
  • Change http://www.funwithtricks.com/ with your blog address.
  • Change the value in numposts = 12 with the number of posts that will be shown in one rotation.
  • Change the value in limitspy=7 with the number that you want to show in one time.
  • Modify width according to your needs.

Troubleshooting
  • Thumbnails are not displaying according to posts
Make sure you have set the site feed length as "Full", not short or custom. This can be changed from Settings - Others - Set "Allow blog feed" to "Full". Click on "Save settings".



  • Scrolling effect is not working
This is due to conflicting versions of JQuery scripts. Do check the head section to verify no other version of JQuery exists or any other widget requires higher version than the version we have iintegrated here. We have used here the JQuery version 1.3.2.


Link your website with us for free!



author

About Author

I’m Vinay Vernekar , a young Entrepreneur and a Technology blogger, currently living in Kolhapur, Maharashtra, India. Founder and Main author of Fun With Tricks. I am also running web hosting services at Host With Us and King Of Web Host. if you like this article, pin it with social media, subscribe to our newsletter. Follow me on Google Plus, Facebook, Linkedin and Twitter.

Know more about me!

Mail me your quries at admin@funwithtricks.com

Get Free Email Updates to your Inbox!

1 comments:

thanks You are great bro..........

Reply

Post a Comment

You are always welcome to leave valuable feedback!