Recent Posts Widget with Thumbnails

Recent Posts Widget with Thumbnails

This widgets is helpful to show your all recent post on your home page, or you can display your recent post any specify pages. This widget is very attractive and eye-catching. It has a custom loading effect too which makes the widget much more awesome. A demo of this widgets you can seen just click on Live Demo.

How to use this widgets.

 Go Dashboard > Layout > Add Gadget > HTML /JavaScript > Save

Recent Posts Widget with Thumbnails Style 1


Recent Posts Widget with Thumbnails
Live Demo

<div dir="ltr" style="text-align: left;" trbidi="on">
<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/AVvXsEiKxGdwNQ22Z-T6aZxJ7cUHJE0XTESJbbnk3RJN2ayDwOzoIaALZalgJDxDslRjxATfRllaajzyj59nBG1z9pcE1dHmKizEVjkkBDYxv55Gq-rur-aC1Zs-UDJv1tPmcUbQyj4FNt-DtmJf/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.sites18.com/"; // Your Blog URL
</script>
<script src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-recent-posts.js" type="text/javascript"></script></div>


Recent Posts Widget with Thumbnails Style 2

Recent Posts Widget with Thumbnails



<div dir="ltr" style="text-align: left;" trbidi="on">
<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/AVvXsEiKxGdwNQ22Z-T6aZxJ7cUHJE0XTESJbbnk3RJN2ayDwOzoIaALZalgJDxDslRjxATfRllaajzyj59nBG1z9pcE1dHmKizEVjkkBDYxv55Gq-rur-aC1Zs-UDJv1tPmcUbQyj4FNt-DtmJf/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;border-radius: 3px 34px 34px 34px}
#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://sites18.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>
</div>

Recent Posts Widget with Thumbnails Style 3


Recent Posts Widget with Thumbnails 
Live Demo


<div dir="ltr" style="text-align: left;" trbidi="on">
<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/AVvXsEiKxGdwNQ22Z-T6aZxJ7cUHJE0XTESJbbnk3RJN2ayDwOzoIaALZalgJDxDslRjxATfRllaajzyj59nBG1z9pcE1dHmKizEVjkkBDYxv55Gq-rur-aC1Zs-UDJv1tPmcUbQyj4FNt-DtmJf/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;border-radius: 3px 34px 3px 34px}
#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://sites18.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></div>

Settings

  1. Replace my Blog URL with your own Blog URL Which is http://sites18.blogspot.com/.
  2. You can also manage Number of post
  3. Number of character to display
  4. Speed

facebook
google-plus
twitter
pinterest
Posted by hitesh kumar
Tutorial ID:
at 17:43
Labels:

1 comment

  1. Arka Softwares15 September 2014 at 03:38

    Thank for visit us:

    ARKA Softwares & Outsourcing is an IT Company focusing on software & Web development and providing offshore outsourcing solutions to enterprises worldwide..net solutions and development

    ReplyDelete

Subscribe to: Post Comments ( Atom )