Thursday, August 23, 2012

Stylish Animated Blogger Recent Posts Widget

In this post will help you to create a recent post widget for your blogger. Its animated widget with thumbnail and Include with nice back ground. So you can try to add it to your blog.

Stylish Animated Blogger Recent Posts Widget

1. Log in to blogger  Design > Page Element.

2. Click Add Gadget and select 'HTML/Javascript

3.Now Paste Below code.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>     
<style type="text/css" media="screen">      
<!-- 
#spylist {     
overflow:hidden;      
margin-top:5px;      
padding:0px 0px;      
height:350px;      
}      
.spydate{      
overflow:hidden;      
font-size:10px;  }

#spylist ul{      
width:350px;      
overflow:hidden;      
list-style-type: none;      
padding: 0px 0px;      
margin:0px 0px;      
}      
#spylist 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; 
}     

#spylist li:hover { 
background: #84f6f5;

} 

#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;
margin-top:3px;       
background:none;      
border:0;      
}      

.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] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://bloggertrix.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
    <script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
</div><a style=" float:right;font-size:8px; color:#3B78CD; text-decoration:none;" href="http://bloggertrix.com">Blogger widget</a>



After paste above code
* Replace http://bloggertrix.com/ with your Site URL

4. Now save your HTML/Javascript'.

    You are done...

21 comments:

  1. Congratulations for the blog, I like it very much.
    It´s very interesting. Thank you very much.
    TIGRA from Argentina.

    ReplyDelete
  2. Thanks you very much for this awesome widget.
    With a little customization, it works perfectly for my.

    Thanks and keep up the good work!

    ReplyDelete
  3. Hi, nice & its working on my blog...may i have your permission to share your widget on my blog for my malaysian fellow, since some of theme r not very good in english & trouble to finding a perfect widget for their own blog (newbie blogger). I'm volunteer to help them & traslate into my language. In return i will put your blog domain on my blog to promote yours. Of course i will tell them this widget are belong to you (not mine). I hope my shared idea will bring a good for both of us. Tq.

    ReplyDelete
  4. Thanks you all.
    @Sang Biru
    yes. you can do like that.
    thanks.

    ReplyDelete
  5. thanks to admin for nice tip
    How To Add Free SMS Service into your website/blog
    http://www.feeds9.com/2012/10/Free-SMS-Service-into-your-site-blog.html

    ReplyDelete
  6. For some reason it doesn't work for me.
    I have no idea why

    ReplyDelete
  7. Bro how to remove the thumbnail in this widget..?

    ReplyDelete
    Replies
    1. I cannot explain it with few words. you should contact me. i will help you.

      Delete
  8. Thank!
    Work great for my site: http://www.our-scholarships.com/

    ReplyDelete
  9. Before it was working with my blog, and now it just stopped loading anything. I've read from some other sites about that "api" thing that it gets a problem when the loads of links are a bit too much? Sorry for the wrong term or any, I just can't explain what really happen. I haven't change the code either. thanks in advance

    ReplyDelete
  10. It didn't worked for me. Just a blank widget only appears.

    ReplyDelete
    Replies
    1. what is your blog URL?
      Just leave a message via contact form.

      Delete
  11. i heard that such widget also helps in reducing the bounce rate so i think that recent post widget should be more attractive so that it can engage the user and we can get more pageviews.and i think your widget will do this job for me.thanks for sharing.ringtones

    ReplyDelete
  12. it is a not working my blog plz help me

    ReplyDelete
    Replies
    1. Sorry for late reply.
      What is your blog URL?

      Delete