Awesome Recent Posts Widget With Thumbnail for Blogger/Blogspot

Today iam Going to show how to make a gorgeous recent posts widgets for blogger blog! Just follow the Steps Below,Before going on to the Step by step process Just Look into the Live Demo of this widget.

Step 1: Goto Blogger dashboard--> Layout--> Add Element--> HTML/Javascript and Paste the below code in the Space give on the HTML/Javascript

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

<style type="text/css">

#post-gallery {width:100%; margin:0px auto;font:normal 11px Arial,Sans-Serif;color:##000000;padding:8px;}

#post-gallery .rp-item {float:left;display:inline;  position:relative;  margin:2px;  padding:0px 0px;  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7_cRPn6AOT6U69_kZpMNY2O1EiWTT3m2mdA2FWqR1BcGcFX8v6OqhdNqVBUZ02CKU6uJnsSkhEus-bO7I4AV-PgEWfMIG26K5qNZRX0o08Jgh8hKUu9-0qyzvKFVfRVJb0kixTCgOJCxy/s1600/LOAD+(66).gif') no-repeat 50% 50%;  width:79px;  height:79px;}

#post-gallery .rp-item img {  width:69px;  height:69px;  border:none !important;  margin:0px 0px !important;  padding:0px 0px !important;  background:transparent !important;  display:none;}

#post-gallery .rp-item 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);}

#post-gallery .rp-item .rp-child {  position:relative;  top:10%!important;  left:10%!important;  z-index:1000;  width:200px;  background-color:white;  border-bottom:5px solid #1BA1E2;  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  padding:10px 15px;  overflow:hidden;  word-wrap:break-word;  display:none;  opacity: 0.9;}

#post-gallery .rp-item .rp-child h4 {  font-size:12px;  margin:0px 0px 5px;  color:#1BA1E2;}

#post-gallery .rp-item:hover .hidden {display:block;}</style>

<script type="text/javascript">

var rpTitle     = "Recent Posts",       // Widget Title

    numposts    = 14,      // Number of Posts to show

    numchar     = 200,      // Number of Characters to be displayed

    rcFadeSpeed = 600,      // Speed

    pBlank      = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",      // If No Image

    blogURL     = "http://www.wwesnaps.blogspot.com/";       // Your Blog URL

</script>

<script src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-recent-posts.js" type="text/javascript"></script>

Now change the  wwesnaps to your blog name to make your blog recent posts appear correctly

That's all your are now ready to view your awesome recent posts widget on your blog :) ,