Auto scrolling recent post widget for bloggers
A beautiful Animated or Moving New post or 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 because of the moving nature of the widget. Its 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 and editable, so that you can easily customize this widget asyou wish.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.)
1. Go to Blogger Dashboard > Template
2. Click on Edit HTML
3. Hit Proceed button
4. Find </head> code in your template
5. Add below code just above it </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
Now you have activated jQuery library into your blog. Now lets go to Second Step how to add scrolling recent posts widget to blogger.
Second Step
1. Go to Blogger Dashboard > Layout
2. Add a Gadget
3. Select HTML/JavaScript
Paste below code inside it,
<style type="text/css" media="screen">
<!--
/* ========== Scrolling Recent Posts Widget By santosh143.com ======== */
#santosh143-widget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
}
#santosh143-widget ul {
width: 295px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}
#santosh143-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/AVvXsEjoSXU5Z5kzSSAvdV3nDqWHcjBCP13Dn__SWLnCXKoFuJkZtuT1AJhDl73CvG_IhKUtkuMKr17A6mckp6cwAODS7zFXYrmI6XHDZRogJjhc_sxAZrz05AJFvQbvxAYWx7-5e8SmjLC-ptM/s1600/santosh143.com-post.jpg) repeat-x;
border: 1px solid #ddd;
}
#santosh143-widget li a {
text-decoration: none;
color: #4B545B;
font-size: 15px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}
#santosh143-widget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}
#santosh143-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);
}
#santosh143-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 santosh143.com ======== */
-->
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR9LtRuEg3hDI2jQlfYlo2Psp-sQzo7orQ55tZthhoC9qmDOXhSiLNOLI-zcuYMzz-h9PPM6Fywjdu0EJzz22t68WpnD-8HQx8EB-p3kSSut5L0DP0QSpIaCeA2_mAHnQICFyKYbSPfTY/s1600/santosh143.com-no-thumbnail.png.jpg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR9LtRuEg3hDI2jQlfYlo2Psp-sQzo7orQ55tZthhoC9qmDOXhSiLNOLI-zcuYMzz-h9PPM6Fywjdu0EJzz22t68WpnD-8HQx8EB-p3kSSut5L0DP0QSpIaCeA2_mAHnQICFyKYbSPfTY/s1600/santosh143.com-no-thumbnail.png.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR9LtRuEg3hDI2jQlfYlo2Psp-sQzo7orQ55tZthhoC9qmDOXhSiLNOLI-zcuYMzz-h9PPM6Fywjdu0EJzz22t68WpnD-8HQx8EB-p3kSSut5L0DP0QSpIaCeA2_mAHnQICFyKYbSPfTY/s1600/santosh143.com-no-thumbnail.png.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR9LtRuEg3hDI2jQlfYlo2Psp-sQzo7orQ55tZthhoC9qmDOXhSiLNOLI-zcuYMzz-h9PPM6Fywjdu0EJzz22t68WpnD-8HQx8EB-p3kSSut5L0DP0QSpIaCeA2_mAHnQICFyKYbSPfTY/s1600/santosh143.com-no-thumbnail.png.jpg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR9LtRuEg3hDI2jQlfYlo2Psp-sQzo7orQ55tZthhoC9qmDOXhSiLNOLI-zcuYMzz-h9PPM6Fywjdu0EJzz22t68WpnD-8HQx8EB-p3kSSut5L0DP0QSpIaCeA2_mAHnQICFyKYbSPfTY/s1600/santosh143.com-no-thumbnail.png.jpg";
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.it-taaleem.blogspot.com/";
limitspy=5;
intervalspy=4000;
</script>
<div id="santosh143-widget">
<script src='http://santosh143.googlecode.com/svn/spyeffect.js' type='text/javascript'></script>
</div>
<div arial="arial" helvetica="helvetica" id="mashable" sans-serif="sans-serif" style="background: #EBEBEB; border-image: initial; border-top: 1px solid white; border: 1px solid #EBEBEB; font-size: 10px; padding: 1px 8px 1px 3px; text-align: right;">
<span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;">
<a href="http://www.santosh143.com/2012/11/how-to-add-animated-recent-posts-widget.html" target="_blank"> Get This ?</a>
</span>
</div>
Important : Now replacehttp://www.it-taaleem.blogspot.com/ with your blog URL.
Edit this as per your requirement :
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.
No comments:
Post a Comment