How to add beautiful Scrolling Recent Posts Widget For Blogger

Share

This tutorial will show you how to add beautiful Scrolling Recent Posts Widget For Blogger.to add this recent post widget to your blogger you First backup your template and follow these simple steps..


FRIST PART

1. Go to Blogger Dashboard > Template
2. Click on Edit HTML
3. Hit Proceed button
4. Find below code in your template

</head>

And add the below code just ABOVE/BEFORE it

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

and save template


SECOND PART

1. Go to Blogger Dashboard > Layout
2. Click on Add a Gadget
3. Select HTML/JavaScript
4. and put following below script in it

<style type="text/css" media="screen">
<!--

/* ========== Scrolling Recent Posts Widget By 1vikash.blogspot.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/AVvXsEhmp8s6JhZ-EcHgSsQTxyyM6lG_DYNq6K_gjg63MY0P-tZFDsk7m1ctXqtlGVv3CxIVXba4EyKlo0ZVgwKxN7E5PuxJ05b6V40dAMaomuxpVM64azbBmTvtQK0Cyhw3otZFHYV8e-Rmq3Q/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/AVvXsEiBT49I7n06vrBhTxUCGzp49eAGcMbwfFY3WiXRWEIZNVSJzIU4eHJRBEusDRko7HITN64oTZcR_-snM5t_c65aReq4a07_zr9J24MFlB5qfFRm1_d9ou9xFPFAjMtiGHraFMJCuOfbfAQ/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBT49I7n06vrBhTxUCGzp49eAGcMbwfFY3WiXRWEIZNVSJzIU4eHJRBEusDRko7HITN64oTZcR_-snM5t_c65aReq4a07_zr9J24MFlB5qfFRm1_d9ou9xFPFAjMtiGHraFMJCuOfbfAQ/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBT49I7n06vrBhTxUCGzp49eAGcMbwfFY3WiXRWEIZNVSJzIU4eHJRBEusDRko7HITN64oTZcR_-snM5t_c65aReq4a07_zr9J24MFlB5qfFRm1_d9ou9xFPFAjMtiGHraFMJCuOfbfAQ/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBT49I7n06vrBhTxUCGzp49eAGcMbwfFY3WiXRWEIZNVSJzIU4eHJRBEusDRko7HITN64oTZcR_-snM5t_c65aReq4a07_zr9J24MFlB5qfFRm1_d9ou9xFPFAjMtiGHraFMJCuOfbfAQ/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBT49I7n06vrBhTxUCGzp49eAGcMbwfFY3WiXRWEIZNVSJzIU4eHJRBEusDRko7HITN64oTZcR_-snM5t_c65aReq4a07_zr9J24MFlB5qfFRm1_d9ou9xFPFAjMtiGHraFMJCuOfbfAQ/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://1vikash.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>

Place the wedget where you want and Save

NOTE:-Replace http://1vikash.blogspot.com/ with your URL

YOU CAN ALSO CUSTOMIZE THE CODE ACCORDING TO YOUR NEED

1. numposts = 10; Total number of posts which you wants to scroll by this widget
2. limitspy=4; Number of the posts to appear on the widget
3. intervalspy=4000; Scrolling speed of the widget,if you decreased the value speed of widget will increases.

Like this Post ??? Then Pls Support Me LIKE ME ON FACEBOOK OR Follow my Blog 

THE END