Saturday, 3 January 2015

Top 5 Recent Posts Widget with Thumbnails for Blogger

Recent Posts Widget with Thumbnails for Blogger

 5 Recent Posts Widget with Thumbnails

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('http://4.bp.blogspot.com/-0E2ZARxMyAo/UZwiR3XjlvI/AAAAAAAAKDc/3Z8WjltqbCQ/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="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/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.



Recent post widget is the most essential blogger widget for any blogger blog.because it is only blogger widget through which reader can read about your latest posts.so every blogger or web developer wants to make it beautiful and attractive.you can find lots of recent post widget for blogger on the internet so there is no need to make the new one and some of them are very beautiful blogger widgets in category of recent post.so what we did we collected all of them and put it here at the one place so you do not need to go somewhere else to find the other one.blogger widget for recent post is very indispensable for blogspot blog.if you want clicks and traffic for your new post then you must try to make blogger widget of recent post very attractive .


Few Things to keep in mind before inserting recent post widget in your blogger blog.


There are lots of blogger widget which rely on third party javascript and hence their loading sped is too low.so always check all widgets and their loading speed after applying to your blogger blog.



What kind of recent post widget you should use
If you have entertainment related blog or website than you must use Recent post widget with thumbnails for your blogger blog.because visitors landing on your page will like photos but if you are running a tech savvy blog or knowledge related blog than you must avoid recent post widget with thumbnails and must use recent post widget with snippets or recent post widget without snippets because it will cover less space and also will load faster than the other recent post widget.


ALL The gadget below are very easy to add.
No coding or template editing is required.



How to add Recent post widget/gadget in blogger blog.




Log into Blogger.com
Go to Blogger Dashboard.
Click on Layout
Than Click on Add a Gadget.



Recent Posts Widget with Thumbnails for Blogger
5 Type of Recent Post Widget Blogger Widgets/Gadgets


Now choose html/Javascript .
Now copy paste your desired code from below.

Recent Posts Widget with Thumbnails for Blogger
5 Type of Recent Post Widget Blogger Widgets/Gadgets





Scrolling/Ticker Recent Post Widget


It is a scrolling recent post widget for blogger blog.this recent post widget with thumbnails will show images on the right hand side and post titles in the left side with details or snippets.there are lots of options for customization if you want.i think it is the best animated recent post widget with thumbnails.
Recent Posts Widget with Thumbnails for Blogger
5 Type of Recent Post Widget Blogger Widgets/Gadgets

<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}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:10px;}</style> <script style='text/javascript' src="https://dl.dropbox.com/s/ercbfzxm41o63i4/NBTjQuery-scrolling-ticker.js" ></script> <script style='text/javascript' src='https://dl.dropbox.com/s/mzcmuhcas156xhx/NBTscrollingRP.js'></script> <script style='text/javascript'> var numposts = 10; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = true; var numchars = 100; $(document).ready(function () {$('#sai').vTicker({ speed: 500, pause: 3000, showItems: 3, animation: 'fade', mousePause: false, height: 0, direction: 'up' });}); </script> <div id="sai"> <script src='http://www.rohanmod.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script> </div>

Stylish Animated Recent Post Widget


It is a animated recent post widget for blogger blog as blogger widget.this recent post widget shows thumbnails or images on the left side and post titles on the right side along with it shows the number of comments for the specific posts.best blogger widget in category of animated recent post widget with thumbnails.
Recent Posts Widget with Thumbnails for Blogger
5 Type of Recent Post Widget Blogger Widgets/Gadgets

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
.spydate{
overflow:hidden;
font-size:10px; }

#spylist ul{
width:350px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:230px;
background: #1ed2f2;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 1px 10px !important;
-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border: 0 none !important;-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;
}

#spylist li:hover {
background: #84f6f5;

}

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

#spylist li img {
float:left;
margin-right:5px;
margin-top:3px;
background:none;
border:0;
}

.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] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 5;

home_page = "http://rohanmod.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
</div><a style=" float:right;font-size:8px; color:#3B78CD; text-decoration:none;" href="http://rohanmod.blogspot.in/2013/03/5-type-of-recent-post-widget-blogger.html">Blogger widget</a>

Recent Post Widget With snippets and without snippets

This recent post widgets has two variations first blogger widget recent post widget is with snippets or details of post and second recent post widget is with post titles only.both are very fast in loading.best simple recent post widget in category of blogger widget.
Recent Posts Widget with Thumbnails for Blogger
5 Type of Recent Post Widget Blogger Widgets/Gadgets

<div id="hlrpsa">
<script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="YOUR-BLOG/SITE-URL/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://rohanmod.blogspot.in/2013/03/5-type-of-recent-post-widget-blogger.html" target="_blank" title="Rohanmod">Recent Posts Widget</a> by <a href="http://rohanmod.blogspot.com" title="Recent Posts Widget">rohanmod</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#hlrpsa a {color: #0B3861; font-size: 13px;} #rpdr {background: url(http://3.bp.blogspot.com/-WM-QlPmHc6Y/T5wJV58qj9I/AAAAAAAACAk/1kULxdNyEyg/s1600/blogger.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsa { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>

Recent Postw widget without snippets

<div id="hlrpsb">
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://rohanmod.blogspot.in/2013/03/5-type-of-recent-post-widget-blogger.html" title="Grab this" target="_blank">Recent Posts Widget</a> by <a href="http://rohanmod.blogspot.com" title="Recent Posts Widget">rohanmod</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #0B3861; font-size: 13px;} #rpdr {background: url( http://3.bp.blogspot.com/-WM-QlPmHc6Y/T5wJV58qj9I/AAAAAAAACAk/1kULxdNyEyg/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

Recent Post Widget with thumbnails.


It is most widely used recent post widget with thumbnails for blogger blog.you can see this recent post widget with thumbnails or images in many websites and blogs.it is very fast in loading and attractive also.these are reasons why most of the bloggers using this recent post widget with thumbnails. This recent post widget with thumbnails has images on the left side and post titles and descriptions below the post title.so it is covering every aspect of a post like image/thumbnails,Post title,Snippets/Description.fast in loading and attractive.A complete recent post widget with thumbnails.
Recent Posts Widget with Thumbnails for Blogger
5 Type of Recent Post Widget Blogger Widgets/Gadgets

<div class="eggTray">
<script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"pipe_params":{"URL":"YOUR-BLOG/SITE-URL/feeds/posts/default"},
"hideHeader":"false","height":"500","count": 8 }</script>
<div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://rohanmod.blogspot.in/2013/03/5-type-of-recent-post-widget-blogger.html" target="_blank" title="Grab this widget">Recent Posts Thumbnails</a> <a href="http://rohanmod.blogspot.com/" target="_blank">Blogger Widget</a></div><noscript>Your browser does not support JavaScript!</noscript></div>
<style type=text/css>
.eggTray {margin:10px 0px;padding:0px;}
.ybr li {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}
.pipesTitle {padding-top:0px;}
.pipesDescription {display:true;}
.ycdr {background:transparent url(http://3.bp.blogspot.com/-oxTuqVj1ziA/T6P6wtxqsgI/AAAAAAAACBE/wWR0bb2gfuE/s1600/logo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 4px 0px 0px 0px;line-height:14px;}
.ycdr, .ycdr a {color:#999999;}
.widget .popular-posts ul {padding-left:0;}
</style>
Blogger widget customizationInsert your blog url where YOUR-BLOG/SITE-URL is present.
Previous Post
Next Post

post written by: