Add Animated Scrolling Recent Post Widget In Blogger V 2

Published By: Ashu Insan Published On: 8:12 PM

Scrolling recent posts gadget is a best widget to show off recent posts from your blog with a jQuery scroll effect,which grabs attention of of visitors very quickly. Previously I shared a Animated scrolling recent posts widget and today we are come with new scrolling recent posts widget, which works a with a jQuery spy effect, this is the best feature of this widget. Each snippets of this widget contains title of post, thumbnail of post, date when that post was published and number of comments on that post.Also all of the above options are fully customizable, so that you can easily customize this widget as you wish. Above are the some features of this widget now lets see how to add it into your blogger blog.

Live Demo

Add this cool widget through below widget Generator

You need to enter your blog url in below application  click generate button after that click add to blogger. you can also the preview by clicking preview button.  See Our Other Widget Generator

 Installing It On Your Blog:

  • Go to blogger > Open layout tab
  • Now Add A new HTML/JavaScript widget
  • Now paste the code given below : 

Add this cool widget manually through below code:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<style type="text/css" media="screen">
<!--
/* ========== Scrolling Recent Posts Widget By NewBloggerTips.com ======== */

#NBT-widget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
}
#NBT-widget ul {
width: 295px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}
#NBT-widget li {
width: 282px;
padding: 5px 5px;
margin: 0px 0px 5px 0px;
list-style-type: none;
float: none;
height: 80px;
overflow: hidden;
background: #fff url(http://4.bp.blogspot.com/-n-c0E1EolLQ/UNgwiGzaTEI/AAAAAAAAI08/QlG8dKfnY0g/s1600/NewBloggerTips.com-post.jpg) repeat-x;
border: 1px solid #ddd;
}
#NBT-widget li a {
text-decoration: none;
color: #4B545B;
font-size: 15px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}
#NBT-widget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}
#NBT-widget 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);
}
#NBT-widget 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;
}

/* ========== Scrolling Recent Posts Widget By NewBloggerTips.com ======== */

-->
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "http://1.bp.blogspot.com/-_Ka22NXTcw8/UNROKxLh64I/AAAAAAAAIxQ/na4pvgRt9Mw/s1600/No+Image+1.gif";
imgr[1] = "http://1.bp.blogspot.com/-_Ka22NXTcw8/UNROKxLh64I/AAAAAAAAIxQ/na4pvgRt9Mw/s1600/No+Image+1.gif";
imgr[2] = "http://1.bp.blogspot.com/-_Ka22NXTcw8/UNROKxLh64I/AAAAAAAAIxQ/na4pvgRt9Mw/s1600/No+Image+1.gif";
imgr[3] = "http://1.bp.blogspot.com/-_Ka22NXTcw8/UNROKxLh64I/AAAAAAAAIxQ/na4pvgRt9Mw/s1600/No+Image+1.gif";
imgr[4] = "http://1.bp.blogspot.com/-_Ka22NXTcw8/UNROKxLh64I/AAAAAAAAIxQ/na4pvgRt9Mw/s1600/No+Image+1.gif";
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 = "http://www.NewBloggerTips.com/";
limitspy=4;
intervalspy=4000;
</script>
<div id="NBT-widget">
<script src='https://dl.dropbox.com/s/gviv5r1iksjfvj3/Scrolling_recent-posts-Spy-NBT.js' type='text/javascript'></script>
</div>

  • Now Replace the http://www.NewBloggerTips.com/ with your blog Url.
  • numposts = 10; Total number of posts which you wants to scroll by this widget
  • limitspy=4; Number of the posts to appear on the widget
  • intervalspy=4000; Scrolling speed of the widget,if you decreased the value speed of widget will increases.

Finally save your all changes and visit you blog to see the working widget.
Please let us know your thoughts on this widget. Leave Your comments below if you need any help.
Happy Blogging
Share this article :

Stay Connected To Get Free Updates!

Subscribe via Email

Follow us!

 

+ comments + 15 comments

April 26, 2013 at 12:32 PM

Thanks i believe that related post widget plays an important role in engaging the user and also to increase traffic.even those posts that did not get good amount of traffic gets clicked because of the same labels and hence hardwork of admins and writer gets rewarded.so i will say it is like a traffic booster.Related post widget for blogger

May 4, 2013 at 2:55 AM

Can you help me. I installed it as indicated but the scrolling feature is not working.

May 4, 2013 at 1:20 PM

@Melissa Llado Sorry for your inconvenience. I just updated the code & widget generator. Now add the entire code again on your blog. It ll be working for you.

May 8, 2013 at 1:01 PM

popular post widget is the key to engage user for the longer period of time along with it increases pageviews and helps to reduce bounce rate too.so this widget must be overwhelming and attractive and i think your widget has that quality and will work for me .thanks for sharing.seo tips for traffic

May 8, 2013 at 1:10 PM

recent post widget is the key to engage user for the longer period of time along with it increases pageviews and helps to reduce bounce rate too.so this widget must be overwhelming and attractive and i think your widget has that quality and will work for me .thanks for sharing.seo tips for traffic

May 21, 2013 at 9:23 PM

Owe Some Dear Nice Work SuperB

May 22, 2013 at 4:09 PM

scrolling feature is not working

July 12, 2013 at 8:16 PM

The widget works beautifully. thank u. One question. After each post there comes a narrow band. How can I get those off please?

July 21, 2013 at 4:56 PM

Thank you so much

July 21, 2013 at 4:59 PM

And I would love to know how you put facebook like button,and google +1 button on the side of this website..Please let me know...:)

August 18, 2013 at 5:52 PM

please help scrolling feature is not working mainly image is not show

August 27, 2013 at 11:17 AM

scrolling feature is not working please help me

August 28, 2013 at 6:34 PM

thanks a lot

gossip lanka

August 31, 2013 at 8:19 PM

Your blog are impressive to each other.I read your blog its very good and friendly, Helpful for all.Garment Merchandiser

September 21, 2013 at 3:49 AM

wow,this is awesome! thank you for the help and great tut!

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. Please "Do Not Add Links" to the body of your comment as they will not be published.
4. Only "English" comments shall be approved.
5. If you have a problem check first the comments, maybe you will find the solution there.

 
Copyright © 2012-13. NewBloggerTips - All Rights Reserved
Home | About | Disclaimer | Privacy Policy
Supported by : BharatNewsPortal | IBPSExamsPaper | BharatJobsPortal
Designed by: Ashok Lothia | Proudly powered by Blogger
DMCA.com