Blogger.com is an easy platform for creating free blogs and making them stunning. Actually, now you can stylize your blog with tons of free widgets by different \designers. Now You're not alone; there are thousands of great guys [including me, lol] who are just working for you.
We previously shared some beautiful widgets aboutblogger blogs and thus we're coming up with another stylish widget which is Recent Posts Scrolling Widget. This widget will give your a blog a new dynamic look which will be looking awesome. This widget is built-in jQuery and JavaScript.
And this is not a simple static widget, this is a dynamic widget which works like charm on your blog. Your recent posts will be looking great with this new widget.
Now let's start adding this beautiful widget to your blogger blogs..
- Go to Blogger Dashboard
- Now Template >> HTML >> Proceed
- And find <head> tag inside your template by using CTRL+F
- Right after <head> tag insert following jQuery link
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
Save your template And you're done...
Adding the widget to blogger
Now after adding the JavaScript library into your blog's HTML section, do the following to add this cute widget into your blog:
- Go to Blogger >> Layout >> Add Gadget >> Select an HTML/JavaScript Gadget
- Copy the following code and paste inside an HTML/JavaScript widget
<style type="text/css" media="screen">
<!--
/* ========== 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/AVvXsEhRQQUjnTps2qpsHQ7jM6z6nd1Quof0bpdQl3hVS5BmSJlxdM7tq0bJCIVcIXlVFCoc-4Z_t9_p8ZYsww824ewpEaaufN7wWwupFNaUo-Fqk70_BocLvB4c3x1GvxVkuC6EE544CB3uPfk/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/AVvXsEibGk-9DQ_4bYRhyphenhyphenjfRMKrrLHvwsG7BiSXZy3V7IE7XDOfpYPuN88aAEfB66Aj0EOqfboRNv0DwfgXMYY7x0sf60O9DoeLE7CVLkF8PyWOBjEpFHCKBPyOJNbaZyTbO_itWjga3YDoiBWk/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibGk-9DQ_4bYRhyphenhyphenjfRMKrrLHvwsG7BiSXZy3V7IE7XDOfpYPuN88aAEfB66Aj0EOqfboRNv0DwfgXMYY7x0sf60O9DoeLE7CVLkF8PyWOBjEpFHCKBPyOJNbaZyTbO_itWjga3YDoiBWk/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibGk-9DQ_4bYRhyphenhyphenjfRMKrrLHvwsG7BiSXZy3V7IE7XDOfpYPuN88aAEfB66Aj0EOqfboRNv0DwfgXMYY7x0sf60O9DoeLE7CVLkF8PyWOBjEpFHCKBPyOJNbaZyTbO_itWjga3YDoiBWk/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibGk-9DQ_4bYRhyphenhyphenjfRMKrrLHvwsG7BiSXZy3V7IE7XDOfpYPuN88aAEfB66Aj0EOqfboRNv0DwfgXMYY7x0sf60O9DoeLE7CVLkF8PyWOBjEpFHCKBPyOJNbaZyTbO_itWjga3YDoiBWk/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibGk-9DQ_4bYRhyphenhyphenjfRMKrrLHvwsG7BiSXZy3V7IE7XDOfpYPuN88aAEfB66Aj0EOqfboRNv0DwfgXMYY7x0sf60O9DoeLE7CVLkF8PyWOBjEpFHCKBPyOJNbaZyTbO_itWjga3YDoiBWk/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.bestbloggercafe.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>
Just replace the URL "http://www.bestbloggercafe.com" with your own blog address and save the widget. That's all done. And now view your blog with a new stylish addition. Enjoy!
Note: This widget is originally shared by Rahul And we just reshared it for you. Thanks Rahul.
Post a Comment
Thanks You For FeddBack! :)