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 scrolling/ticker recent posts widget but some of you faced some problems while installing it,that's why here I am sharing a 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.
--------------------------------------------------------------------
Step 1 -:
This widget works with jQuery spy effect so that we have to add jQuery library to our blog first (Note - Ignore this step if you have already added jQuery library to your blog.)
- Go to Blogger Dashboard > Template
- Click on Edit HTML
- Hit Proceed button
- Find below code in your template
</head>add below code just above it,
<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.
Step 2 -:
- Go to Blogger Dashboard > Layout
- Click on Add a Gadget
- Select HTML/JavaScript
Paste below code inside it,
<style type="text/css" media="screen"><!--
======= Scrolling Recent Posts Widget By helperblogger.com ======== */
hel
#/* ==
=perblogger-widget {
overflow: hidden;
margin-top: 5px;
t ul { width: 295 padding: 0px 0px;
height: 385px;
}
#helperblogger-widg
epx;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
ding: 5px 5px; m margin: 0px 0px;
}
#helperblogger-widget li {
width: 282px;
pa
dargin: 0px 0px 5px 0px;
list-style-type: none;
float: none;
height: 80px;
9gqfDQ/T-3xppy6MlI/AA overflow: hidden;
background: #fff url(https://lh6.googleusercontent.com/-A6a8
2AAAAAACFE/RrOao4P11Uk/s1600/helperblogger.com-post.jpg) repeat-x;
border: 1px solid #ddd;
}
height: 18px; overflo#helperblogger-widget li a {
text-decoration: none;
color: #4B545B;
font-size: 15px;
w: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}
#helperblogger-widget img {
float: left;
img { -webkit-tra margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}
#helperblogger-widget
nsition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
)); background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa); -webkit-border-radius: 4px;
-moz-border-radiu background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aa
as: 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);
}
#helperblogger-widget img:hover {
-moz-transform: scale(1.2) rotate(-350deg);
x rgba(255,255,255,1); -moz-box-shadow: 0 0 20 -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 20
ppx 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;
ogger.com ======== */
-->
</style>
<script langu 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 helperb
lage='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfbBagER1gqOhu0XyRniNYE_bKsk5n-MxTjyvEysHqdeS4T7Bo2TsZNcBfjovNXP79wg5xf94dNIU7EFGRloC3a0ON5LdgZTAbUduWDnctLZW5XT2aAXPC5-uFDZuF7f4E14amnXeL1n4/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfbBagER1gqOhu0XyRniNYE_bKsk5n-MxTjyvEysHqdeS4T7Bo2TsZNcBfjovNXP79wg5xf94dNIU7EFGRloC3a0ON5LdgZTAbUduWDnctLZW5XT2aAXPC5-uFDZuF7f4E14amnXeL1n4/s1600/no-thumbnail.png";
.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";showRandomImg = true;
boxwidth = 255;
cimgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfbBagER1gqOhu0XyRniNYE_bKsk5n-MxTjyvEysHqdeS4T7Bo2TsZNcBfjovNXP79wg5xf94dNIU7EFGRloC3a0ON5LdgZTAbUduWDnctLZW5XT2aAXPC5-uFDZuF7f4E14amnXeL1n4/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfbBagER1gqOhu0XyRniNYE_bKsk5n-MxTjyvEysHqdeS4T7Bo2TsZNcBfjovNXP79wg5xf94dNIU7EFGRloC3a0ON5LdgZTAbUduWDnctLZW5XT2aAXPC5-uFDZuF7f4E14amnXeL1n4/s1600/no-thumbnail.png";
imgr[4] = "https://lh6.googleuserconten
tellspacing = 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.helperblogger.com/";limitspy=4;intervalspy=4000;</script>
div id="helperblogger-widget">
<<script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'></script></div>Now replace http://www.helperblogger.com/ with your blog URL.
Widget Customizations
As I mentioned above this widget is fully customizable,you can also customizing it at your own just by reading the properties of the values such as
numposts meansnumber of posts.In above code I am highlighting some values which you can simply edit them.Also I highly recommend you that,done all the changes in our HTML Editor.With using the html editor you can simply customize this widget as you wish with watching preview of your chnages.Below I am describing some important values,
numposts = 10;Total number of posts which you wants to scroll by this widgetlimitspy=4;Number of the posts to appear on the widgetintervalspy=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.Peace and Blessings Buddies :)
--------------------------------------------------------------------------------------------------------------------
be vigilant and careful while doin html / javascript duties
coz it may lead to info leaks or slowing down or unworkability.
also check out google blogger terms and conditions.
--------------------------------------------------------------------------------------------------------------------
no video for this stuff.
