Home » , » Add Animated Scrolling Recent Post Widget In Blogger

Add Animated Scrolling Recent Post Widget In Blogger

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.
Installing it on your blog:










  • Go to blogger > Open layout tab
  • Dashboard > Template> Edit HTML> Hit Proceed button
  • Add below code just above the </head> tag,
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>



Now you have implemented jQuery library into your blog. Now lets see how to add scrolling recent posts widget to blogger. If you've already inserted jQuery code then don't put it again.

  • Now Add A new HTML/JavaScript widget
  • Then paste the code given below:
<style type="text/css" media="screen">
<!--
/* ========== Scrolling Recent Posts Widget By iHowMore.blogspot.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvu9w90fmrqU6_GPQ0qhjQxEFXyr09N39As6nrdSacC1J6mXoL970osiFiZ01CIq8lYcQYCKT5HKQso7FttmAIShw0fGy2Z8Yw7Vs6PSn2qE9A_3n5OqSw9KyyimHjIHZzRRJC9eSpuIf-/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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaNTKRYGrlx5bKCibQQ5BJyGv3qaT0mN1AhlCttb3MyE7emQ6Ej5odUCdzUwnDJMMXDpCjunlD0BVKp4SVwa8GfcWRafrb_9eOt-hxY2Vfk69I9cVm5WOO0SmkkyiTVPbBZ7kcoOz7ydQ_/s1600/No+Image+1.gif";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaNTKRYGrlx5bKCibQQ5BJyGv3qaT0mN1AhlCttb3MyE7emQ6Ej5odUCdzUwnDJMMXDpCjunlD0BVKp4SVwa8GfcWRafrb_9eOt-hxY2Vfk69I9cVm5WOO0SmkkyiTVPbBZ7kcoOz7ydQ_/s1600/No+Image+1.gif";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaNTKRYGrlx5bKCibQQ5BJyGv3qaT0mN1AhlCttb3MyE7emQ6Ej5odUCdzUwnDJMMXDpCjunlD0BVKp4SVwa8GfcWRafrb_9eOt-hxY2Vfk69I9cVm5WOO0SmkkyiTVPbBZ7kcoOz7ydQ_/s1600/No+Image+1.gif";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaNTKRYGrlx5bKCibQQ5BJyGv3qaT0mN1AhlCttb3MyE7emQ6Ej5odUCdzUwnDJMMXDpCjunlD0BVKp4SVwa8GfcWRafrb_9eOt-hxY2Vfk69I9cVm5WOO0SmkkyiTVPbBZ7kcoOz7ydQ_/s1600/No+Image+1.gif";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaNTKRYGrlx5bKCibQQ5BJyGv3qaT0mN1AhlCttb3MyE7emQ6Ej5odUCdzUwnDJMMXDpCjunlD0BVKp4SVwa8GfcWRafrb_9eOt-hxY2Vfk69I9cVm5WOO0SmkkyiTVPbBZ7kcoOz7ydQ_/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://ihowmore.blogspot.ru/";
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://ihowmore.blogspot.com/ with your blog Url.
  • numposts = 10Total number of posts which you wants to scroll by this widget
  • limitspy=4Number of the posts to appear on the widget
  • intervalspy=4000Scrolling 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.
Enjoy!
Share this article :

6 comments:


  1. There is definitely a great deal to find out about this topic. I like all the points you have made.
    Banfield Pet Hospital
    Esso
    Subaru Owners'

    ReplyDelete
  2. https://alltechbeauty.blogspot.com

    ReplyDelete
  3. Your texts on this subject are correct, see how I wrote this site is really very good. cryptocurrency website widget

    ReplyDelete
  4. Very informatory and important blog for those who want to design and develop a website in coming time.
    We have the details of some of the best and useful website development for those who want to make websites
    come to us we will help you out from any type web designing.
    Get the best Website designing services in Delhi, Mumbai with trending technology.
    Digital marketing is very interesting work and SEO is also a part of digital marketing.
    In SEO we have Off page, on page and keyword research. Through SEO we can ranking of any website

    ReplyDelete
  5. Good Its is better to get some Dell services.
    Our vision is to provide clear, honest laptop advice and repairs to customers at the best and lowest possible price. We are a highly-recommended laptop repair .
    Get the best dell servics repaire with trending technology.

    ReplyDelete

 
Copyright © Online Business - All Rights Reserved
Proudly powered by Blogger