Scrolling Recent Posts widget for Blogger

Scrolling Recent Posts widget is best for your site's new visitors as it quickly grabs your visitor's attention and will also increase your pageviews.

Follow the steps below to implement it on your blog :

1) Go to your blogger account.

Go to Template --> Edit html. Find <head> using ctlr+f and paste the following line of code after <head>

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

2) Go to layout.

3) From one of the sidebars, add a HTML / Javascript Gadget.

4) Copy the code below and paste it.

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

#blogtipscodes-scroll {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
}

#blogtipscodes-scroll ul {
    width: 295px;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}

#blogtipscodes-scroll 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/AVvXsEiJ8Wvc9crO4JDvdGjq1jfTPkUB64QBiDkPT2es96R7FjcVrrQmA-pA7pVL5TzhfDjXUdKcWGiPH9cAIowMZIcEVxkUeZFRZHqjFNMxhjkvwdZa6yPF9XR37Xdj-liPXRgbKCFKbLepGSA/s1600/helperblogger.com-post.jpg) repeat-x;
    border: 1px solid #ddd;
}

#blogtipscodes-scroll li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}

#blogtipscodes-scroll img {
    float: left;
    margin-top: 10px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
}

#blogtipscodes-scroll 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);
}

#blogtipscodes-scroll 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;
}

</style>

<script language='JavaScript'> 
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrIK1k4OjzrX-Ux-zaZ8qAak5adRjWcuKA_I0Ny08_gPAnDqQ_iBo1zBQTDu31MWEvNivWCojUeVKbZ7WeRT6HN8EGyA0Y4UgD41ppA59sC63n5q0MUZi8sgACCKS7beaPoJuGK9oJG9Q/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrIK1k4OjzrX-Ux-zaZ8qAak5adRjWcuKA_I0Ny08_gPAnDqQ_iBo1zBQTDu31MWEvNivWCojUeVKbZ7WeRT6HN8EGyA0Y4UgD41ppA59sC63n5q0MUZi8sgACCKS7beaPoJuGK9oJG9Q/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrIK1k4OjzrX-Ux-zaZ8qAak5adRjWcuKA_I0Ny08_gPAnDqQ_iBo1zBQTDu31MWEvNivWCojUeVKbZ7WeRT6HN8EGyA0Y4UgD41ppA59sC63n5q0MUZi8sgACCKS7beaPoJuGK9oJG9Q/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrIK1k4OjzrX-Ux-zaZ8qAak5adRjWcuKA_I0Ny08_gPAnDqQ_iBo1zBQTDu31MWEvNivWCojUeVKbZ7WeRT6HN8EGyA0Y4UgD41ppA59sC63n5q0MUZi8sgACCKS7beaPoJuGK9oJG9Q/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrIK1k4OjzrX-Ux-zaZ8qAak5adRjWcuKA_I0Ny08_gPAnDqQ_iBo1zBQTDu31MWEvNivWCojUeVKbZ7WeRT6HN8EGyA0Y4UgD41ppA59sC63n5q0MUZi8sgACCKS7beaPoJuGK9oJG9Q/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.blogtipscodes.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="blogtipscodes-scroll">
<script src='https://dl.dropbox.com/s/9ztrbkqn0x507ua/scroll.js?dl=1' type='text/javascript'></script>
</div>

5) Change the home_page url to your own blog url.

numposts controls how many posts the code will scroll.

limitspy controls the no. of thumbs.

6) Save it.

7) View your blog to see the effect.

You can modify the above css code to suit your blog's needs.