Recent Post Widget with Image Hover effect

Views

This widget has a CSS image hover rotate effect and a rounded borders. You can also customize the color of the text ,size and the number of post displayed. Also, the number of comments will  be displayed (if you wish to) and the post date published. This widget was fully customized by me, I already deleted the bullet style of the post so there will be no visible dots on your widget. If you like this installed on your blog, just keep reading.

LIVE DEMO MY CURRENT RECENT POST

HOW TO INSTALL THE WIDGET ON YOUR BLOG?

• Go to your blogger Dashboard
• Layout
• Add a gadget
• Choose HTML/JAVASCRIPT
• and add this widget code

<style type='text/css'>
img.recent_thumb

{    -moz-transition: all 0.2s ease-in-out;    -webkit-transition: all 0.2s ease-in-out;    -o-transition: all 0.2s ease-in-out;    -ms-transition: all 0.2s ease-in-out;    transition: all 0.2s ease-in-out;} img.recent_thumb:hover {    -moz-transform: rotate(70deg);    -webkit-transform: rotate(70deg);    -o-transform: rotate(70deg);    -ms-transform: rotate(70deg);    transform: rotate(70deg);} img.recent_thumb {    -moz-transition: all 0.8s ease-in-out;    -webkit-transition: all 0.8s ease-in-out;    -o-transition: all 0.8s ease-in-out;    -ms-transition: all 0.8s ease-in-out;    transition: all 0.8s ease-in-out;} img.recent_thumb:hover {    -moz-transform: rotate(360deg);    -webkit-transform: rotate(360deg);    -o-transform: rotate(360deg);    -ms-transform: rotate(360deg);    transform: rotate(360deg);} img.recent_thumb {    -moz-transition: all 0.5s ease-in-out;    -webkit-transition: all 0.5s ease-in-out;    -o-transition: all 0.5s ease-in-out;    -ms-transition: all 0.5s ease-in-out;    transition: all 0.5s ease-in-out;} img.recent_thumb:hover {    -moz-transform: rotate(-360deg);    -webkit-transform: rotate(-360deg);    -o-transform: rotate(-360deg);    -ms-transform: rotate(-360deg);    transform: rotate(-360deg);}
img.recent_thumb {padding:1px;width:55px;height:60px;border:0;
float:left;margin:10px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;list-style-type:none;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:12px;}</style>
<script style='text/javascript' src='http://www.webaholic.co.in/other/recent-posts-widget-with-images.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails =true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;</script>
<script src='http://theyellowbulb.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

CUSTOMIZATION OF YOUR POPULAR POST WIDGET

• Change 12px to the font size that you desired,
• Change the  http://theyellowbulb.blogspot.com  with your website URL
• Change 5; to change the number of post displayed,
• Change True to false and false to true if you want it to be shown or hidden,

CREDITS

This widget was originally from webaholic.co.in and customized by TYB.

YOU CAN SAVE YOUR TEMPLATE NOW

And see it working perfectly on your blog

ARE YOU CONFUSED REGARDING THIS TUTORIAL?

If you have any difficulties implementing and/or following this tutorial, Feel free to keep in touch with me and ill try my best to work it out.