Recent Posts Widget with Thumbnails for Blogger

Today I am going to show you how you can add an amazing and wonderful Recent Posts widget to your blogger blog. This widget fetches the latest posts via JavaScript and show it in a beautiful manner. This widget displays the recent posts with their thumbnails. When hovered we can see CSS transition effect taking place, the box rotates and a box containing the post snippet appears.

This widget is very attractive and eye-catching. It has a custom loading effect too which makes the widget much more awesome. A quick demo of this widget can be seen just below.





Please see the width of the widget will be different in your blog. It is quite big just for demonstration purpose.

To add this widget to your blog just follow the below instructions.

Adding the Widget in Layout

Go to Blog Title → Layout → Add Widget → HTML/JavaScript. Paste the below code.

<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/AVvXsEiv8z1Aqxy4QUfaaJYRbWDxwl2q6dErz58U3UC7jkA1et4u48spaVKh_M2r7-5JAK_FqRHnc3_5DIw-XGGeRAEnCWKmBTELvHcegcEBOoCATryDK3Fakrud6C1Hj-wPACqy9DR1oZQIIux-/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.allbloggertricks.com/";       // Your Blog URL
</script>
<script src="http://files.allbloggertricks.com/Scripts/abt-recent-posts.js" type="text/javascript"></script>

After adding the above code you may change Widget Title, Number of Posts to show and Your Blog URL. After that save the widget and finally save the template.

You are done now. Now you and your visitors can see this awesome Recent Posts widget with Thumbnails in your blogger blog.

[via]