Add Animated Scrolling Recent Posts Widget With Thumbnails And Hover Effects To Blogger

Displaying a list of the recent posts in your sidebar is a great way to keep your visitors busy. There are lots of recent posts gadgets you can use but the one we will be covering in this post will definitely grab the attention of people on your blog.This recent posts widget is similar to the standard recent posts with thumbnails but with one twist. It combines jQuery vticker plugin to produce a simple and sleek sliding effect that smoothly scrolls through the posts. This gadget displays your most recent posts and includes a small thumbnail but it has the added extra of using an animated effect that smoothly scrolls through the posts. 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,so that you can easily customize this widget. Now this tutorial will show you How To Add Animated Scrolling Recent Posts Widget  With Thumbnails And Hover Effects To Blogger.

Scrolling Recent Posts Demo

LIVE DEMO

How To Add Scrolling Recent Posts Widget With Thumbnails To Blogger

• Go to Blogger Dashboard --> Layout --> Add A Gadget
• Select HTML/Javascript and paste the code shown below in it

<style type="text/css" >
#spylist-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
    font-family:calibri;
}

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

#spylist-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/AVvXsEicaYwRUG2pVnKBq_DA22gdpSgGZCdTD0-fC2b3RWLH42SyBsXY0oaMEycIrJw4m5HbGJAybd9GO3vsMxRkhlDZLKwWoM7s-nIr-7t3Y8aMCssbkueXRxxJSgATX87cY22-_j4PJ73j9s0/s320/latesthack.com-.jpg) repeat-x;
    border: 1px solid #ddd;
}

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

#spylist-widget img {
    float: left;
    margin-top: 5px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
    -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);
}

#spylist-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;
}

</style>

<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn_yWQ9XTfrK7m_eTfF6DJp7eY-F9i6e23YDQSQPuZwrhDzTVLM8nourSPFx30h-BWm6XwxDcqLtp0pn83NM0nCPepc9_dbELm7Z15WCkW6a5EjUvNiMcPSmkO2PUwZ4Eo_5mqLyNWiUs/s1600/defaultimage.jpg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn_yWQ9XTfrK7m_eTfF6DJp7eY-F9i6e23YDQSQPuZwrhDzTVLM8nourSPFx30h-BWm6XwxDcqLtp0pn83NM0nCPepc9_dbELm7Z15WCkW6a5EjUvNiMcPSmkO2PUwZ4Eo_5mqLyNWiUs/s1600/defaultimage.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn_yWQ9XTfrK7m_eTfF6DJp7eY-F9i6e23YDQSQPuZwrhDzTVLM8nourSPFx30h-BWm6XwxDcqLtp0pn83NM0nCPepc9_dbELm7Z15WCkW6a5EjUvNiMcPSmkO2PUwZ4Eo_5mqLyNWiUs/s1600/defaultimage.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn_yWQ9XTfrK7m_eTfF6DJp7eY-F9i6e23YDQSQPuZwrhDzTVLM8nourSPFx30h-BWm6XwxDcqLtp0pn83NM0nCPepc9_dbELm7Z15WCkW6a5EjUvNiMcPSmkO2PUwZ4Eo_5mqLyNWiUs/s1600/defaultimage.jpg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn_yWQ9XTfrK7m_eTfF6DJp7eY-F9i6e23YDQSQPuZwrhDzTVLM8nourSPFx30h-BWm6XwxDcqLtp0pn83NM0nCPepc9_dbELm7Z15WCkW6a5EjUvNiMcPSmkO2PUwZ4Eo_5mqLyNWiUs/s1600/defaultimage.jpg";
imgr[5] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn_yWQ9XTfrK7m_eTfF6DJp7eY-F9i6e23YDQSQPuZwrhDzTVLM8nourSPFx30h-BWm6XwxDcqLtp0pn83NM0nCPepc9_dbELm7Z15WCkW6a5EjUvNiMcPSmkO2PUwZ4Eo_5mqLyNWiUs/s1600/defaultimage.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;fntsize = 9;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";numposts = 10;
home_page = "http://www.latesthack.com";
limitspy=5;

intervalspy=4000;

</script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script><div id="spylist-widget">
<script src='http://latest-hacks.googlecode.com/svn/gadgets/scrollingrecentposts/scrollingrecentposts.js' type='text/javascript'></script>
</div>

WIDGET CUSTOMIZATION

• Replace http://www.latesthack.com with your blog URL
• To change the width of the widget  Edit width: 295px; and width: 285px;
• fntsize - Font size of the title
• acolor - Color of the title
• aBold - you want bold titles? (true or false) 
• numposts - Total number of posts which is scroll by the widget
• intervalspy=4000; -  Scrolling speed of the widget,if you decreased the value speed of widget will increases.

CREDITS

This widget is bloggerized by Abu Farhan and I reshared on LatestHack

Like it? Share it.