» » New Beautiful Scrolling Recent Posts Widget For Blogger

on
No Comment

To day I share another Blogger Trick about Widgets.My last post is about Floating Facebook like box Widget.But Today Share Scrolling Recent Posts Widget For Blogger.
I share this post because you get more traffic with this widget.Many Peoples Want to Modify blog.This is best for that Peoples.This widget is built-in jQuery and JavaScript.
This Widget is in dynamic not in simple.You see beautiful dynamic Recent Posts in you Blog.Now let's Start Work.Please follow the following steps.



How to add Scrolling Recent Posts Widget?



  • Go to Blogger Dashboard .
  • Now go to Template >> HTML >> Proceed.
  • And find <head> tag inside your template using CTRL+F.
  • After <head> tag insert following jQuery Codes.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

Now Save Template and NOW Take Next step.

Now Adding the Widget to blogger.


  • Go to Blogger >> Layout >> Add Gadget >> Select an HTML/JavaScript Gadget
  • Copy the Below codes 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/AVvXsEhnEBiqEhRX5cTGtiKdZG5s3OU1qOqzqLXiWa3Y2HPOCQIh5NKqOpbCytBvt9dEYg6cHvQP1l1yzDed1D0ADuLRDUKCvsgZLROnhOi99WLlcULvCJyfbz3KOZx12iHAPxwBTXLjicZR2jI/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/AVvXsEi10V4g0hDSA5TTXkuCDr2cFwtE2eoWFH5lBxvKUC9XWV20lgOHvSvV2K07GwKiMuTEXZTz0bkfeYIPbiaQdlsoGBJbw3kMYatmPpKpCaSr8TIOtPwFZ2zKb7fYl_dcfk6umVBvQclO9SM/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10V4g0hDSA5TTXkuCDr2cFwtE2eoWFH5lBxvKUC9XWV20lgOHvSvV2K07GwKiMuTEXZTz0bkfeYIPbiaQdlsoGBJbw3kMYatmPpKpCaSr8TIOtPwFZ2zKb7fYl_dcfk6umVBvQclO9SM/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10V4g0hDSA5TTXkuCDr2cFwtE2eoWFH5lBxvKUC9XWV20lgOHvSvV2K07GwKiMuTEXZTz0bkfeYIPbiaQdlsoGBJbw3kMYatmPpKpCaSr8TIOtPwFZ2zKb7fYl_dcfk6umVBvQclO9SM/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10V4g0hDSA5TTXkuCDr2cFwtE2eoWFH5lBxvKUC9XWV20lgOHvSvV2K07GwKiMuTEXZTz0bkfeYIPbiaQdlsoGBJbw3kMYatmPpKpCaSr8TIOtPwFZ2zKb7fYl_dcfk6umVBvQclO9SM/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10V4g0hDSA5TTXkuCDr2cFwtE2eoWFH5lBxvKUC9XWV20lgOHvSvV2K07GwKiMuTEXZTz0bkfeYIPbiaQdlsoGBJbw3kMYatmPpKpCaSr8TIOtPwFZ2zKb7fYl_dcfk6umVBvQclO9SM/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.premiumpctips.blogspot.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.premiumpctips.blogspot.com/" With your Blog Address and Save Widget.And See Your Blog a New Beautiful Scrolling Recent Posts Widget is added.

Note:: This widget is originally shared by Rahul And I just reshared it for you.
Thanks You.
Share: