Add Scrolling Recent Posts Widget To Your Blog
Step 1. In Your Blogger Dashboard Click > Template > Edit HTML > Proceed button:
Step 2. Using Ctrl+F Search For <head> and just below it paste the following Code:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
Step 3. In the Blogger dashboard click the drop down menu for your blog > Choose 'Layout' > Click 'Add A Gadget' > Choose 'Html Javascript':
<style type="text/css" media="screen">Step 4. Replace http://www.tweakyourblog.info/ With your blog URL.
<!--
/* ========== Scrolling Recent Posts Widget By helperblogger.com ======== */
#helperblogger-widget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
}
#helperblogger-widget ul {
width: 295px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}
#helperblogger-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/AVvXsEgfqWlkrlgjGOYWDPiTxPjuT_yg9nxFHtgsqhxZZZiQ7zn-bZpuIdhR9RdNYr9P0OVKC5w4xzRodXoJ3mbVFHVBPRoSHAUM3BCTEkfuKc4LUl1rED-FQA_bwcXhk3nCgMkk3KA1mGVcIqg/s1600/helperblogger.com-post.jpg) repeat-x;
border: 1px solid #ddd;
}
#helperblogger-widget li a {
text-decoration: none;
color: #4B545B;
font-size: 15px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}
#helperblogger-widget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}
#helperblogger-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);
}
#helperblogger-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 helperblogger.com ======== */
-->
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIOEH2efmClVJqH3XhcBGJi1yc30JBwt1q4V8QydlYHWUvEMqmyXpexmjPP9skHvt-iacFXCOnVjbA3XlM2v-TS7Evb4ppx8BxyUDCVNFWNFCgeWbYrUlVujCn7agK6fqUF5m1wlmo4jk/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIOEH2efmClVJqH3XhcBGJi1yc30JBwt1q4V8QydlYHWUvEMqmyXpexmjPP9skHvt-iacFXCOnVjbA3XlM2v-TS7Evb4ppx8BxyUDCVNFWNFCgeWbYrUlVujCn7agK6fqUF5m1wlmo4jk/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIOEH2efmClVJqH3XhcBGJi1yc30JBwt1q4V8QydlYHWUvEMqmyXpexmjPP9skHvt-iacFXCOnVjbA3XlM2v-TS7Evb4ppx8BxyUDCVNFWNFCgeWbYrUlVujCn7agK6fqUF5m1wlmo4jk/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIOEH2efmClVJqH3XhcBGJi1yc30JBwt1q4V8QydlYHWUvEMqmyXpexmjPP9skHvt-iacFXCOnVjbA3XlM2v-TS7Evb4ppx8BxyUDCVNFWNFCgeWbYrUlVujCn7agK6fqUF5m1wlmo4jk/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIOEH2efmClVJqH3XhcBGJi1yc30JBwt1q4V8QydlYHWUvEMqmyXpexmjPP9skHvt-iacFXCOnVjbA3XlM2v-TS7Evb4ppx8BxyUDCVNFWNFCgeWbYrUlVujCn7agK6fqUF5m1wlmo4jk/s1600/no-thumbnail.png";
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.tweakyourblog.info/";
limitspy=4;
intervalspy=4000;
</script>
<div id="helperblogger-widget">
<script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'></script>
</div>
Note: numposts = 10 Shows the number of posts that will be scrolled and limitspy=4 Shows the number of posts that appear on the widget at once.
That's it you now have an awesome scrolling recent posts widget on your blog.
Drop Your Comments And Questions Below.
Nice article but only good for those newbies out there using blogger for their blogging platform. We cant deny that people are already using wordpress. but still a good widget.
ReplyDeleteI love this widget you have created. I'm looking to customize it however so that the color theme matches my blog. I'm not 100% familar with cahnging around HTML code and I don't want to screw the functionality of the widget up. Please let me know how I would be able to customize some things like color theme, size (width) of the column, and the text content options. Thanks so much!
ReplyDelete