How to add recent post widget with Thumbnails or without Thumbnails or stylish widget in to your blogger blog - The WonderSpot - Business Guide, blogging, Make money online, Tips & tricks
Breaking News:
Loading...

How to add recent post widget with Thumbnails or without Thumbnails or stylish widget in to your blogger blog


How to add recent post widget in blogger


Today we discuss How to add recent post widget with Thumbnails or without Thumbnails or with style into your blogger blog.

By adding recent post widget into your blogger blog you can get a lot of benefits. If you are thinking it is not necessary to add related posts to your blogger blog, then you are wrong. By displaying related posts in your blogger blog You can easily keep your readers engaged with your blogger blog, also it helps them to easily navigate with your blogger related posts links those you have recently written. If your blogger blog homepage has a lot of labeled grids or its posts published as the label or category wise then readers cannot identify what are your recent posts, so if you add that recent post widget into your blogger blog it will help your readers to identify your recent post among the other posts in your homepage. So your readers can find what’s new on your blog.

How to add recent post widget with Thumbnails or without Thumbnails or stylish widget in to your blogger blog
Recent post widget is the very useful widget for our blog like breaking news bar, related post widget, Breadcrumbs navigation and back to top button widgets those we discuss in previous posts.



What are that recent posts?


Recent posts are latest or recent published posts those related to your current reading posts. It displays base on the latest date of the post published in your blogger blog. latest posts are in the top and old post going to down or below the latest posts. So readers can easily find your recent posts quickly among the previous articles in your blogger blog.  


That recent post widget helps you to display your latest posts on your blogger slide bar or footer. There is a different type of recent post widgets. Some will display only post titles, some will display recent post title with image thumbnails or some will display recent post title with image thumbnails with post summary, publish date and amount of post comments.


Below are some benefits of adding recent post widget to your blogger. 

·         Improve blog site performances

·         Improve blog traffic

·         Improve internal links

·         Decrease your blog bounce rate

·         Improve your page views

·         Improve user interaction

·         Improve user experience and improve blogger SEO

·         Readers can quickly identify your latest posts


OK. Then let discuss, 

How to add recent post widget with Thumbnails or without Thumbnails or with stylish in to your blogger blog.




How to add recent post widget with Thumbnails in to your blogger blog


Step 01: Sign into your blogger blog

Step 02: Go to Dashboard >> Layout >> Add a widget >> HTML/JavaScript widget

Step 03: Copy and Paste below code into widget



<style type='text/css'>
img.recent_thumb {padding:1px;width:55px;height:55px;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;}
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='http://recent-post-techkgp.googlecode.com/files/recent%20post_www.techkgp.com.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;</script>
<script src='http://www.yourdomain.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>



Customize – Replace http://www.yourdomain.com with your blogger URL.
                       Replace value var numposts = 2 with number of maximum posts that you want to display.
                       Replace value var numchars = 100 with any number of characters that you want to show in summary of recent posts.
                       By changing true or false you can customize activate or deactivate of any feature of your recent post widget.


Step 04: Save your widget and replace where you want to display your recent post widget.

Step 05: Save layout.


Now process to view your recent post widget.




How to add recent post widget without Thumbnails in to your blogger blog


Step 01: Sign into your blogger blog

Step 02: Go to Dashboard >> Layout >> Add a widget >> HTML/JavaScript widget

Step 03: Copy and Paste below code into widget



<script type=”text/javascript”>
function recentpostslist(json) {
 document.write(‘<ol>’);
 for (var i = 0; i < json.feed.entry.length; i++)
 {
    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == ‘alternate’) {
        break;
      }
    }
var entryUrl = “‘” + json.feed.entry[i].link[j].href + “‘”;//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = “<li>” + “<a href=”+ entryUrl + ‘” target=”_blank”>’ + entryTitle + “</a> </li>”;
 document.write(item);
 }
 document.write(‘</ol>’);
 }
</script>
<script src=”http://www.yourdomain.com/feeds/posts/default?max-results=2&alt=json-in-script&callback=recentpostslist”></script>



Customize – Replace http://www.yourdomain.com with your blogger URL.

                       Replace 2 with number of maximum posts that you want to display.



Step 04: Save your widget and replace where you want to display your recent post widget.

Step 05: Save layout.


Now process to view your recent post widget.




How to add Gallery style recent post widget in to your blogger blog


Step 01: Sign into your blogger blog

Step 02: Go to Dashboard >> Layout >> Add a widget >> HTML/JavaScript widget

Step 03: Copy and Paste below code into widget


<style>
.recent-grid {padding:0;clear:both;}
.recent-grid:after {content:"";clear:both;display:table;}
.recent-grid .galleryview{position:relative;display:inline-block;margin:6px 0;overflow:hidden;}
.recent-grid .galleryview a{text-decoration:none;float:left;position:relative;margin:0 6px}
.recent-grid .galleryview .ptitle{display:block;background:rgba(0,0,0,.7);clear:left;position:absolute;font-size:10px;line-height:1.3em;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;overflow:hidden;padding:5px;word-wrap:break-word;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}
.recent-grid .galleryview:hover .ptitle{visibility:visible;opacity:1}
.recent-grid a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}
.recent-grid a:hover img {border-color:#bbb;}
</style>
<script type='text/javascript'>
//<![CDATA[
// Recent Post Gallery
function gallerygrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-grid">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+recentpost_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+recentpost_thumbs+'" height="'+recentpost_thumbs+'"/>',p=recentpost_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="galleryview">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>
<script>
var recentpost_thumbs = 8;
var recentpost_title = true;
</script>
<script src="/feeds/posts/summary?max-results=9&amp;alt=json-in-script&amp;callback=gallerygrid"></script>



Customize - Replace value var recentpost_thumbs = 8; with number of maximum posts that you want to display.



Step 04: Save your widget and replace where you want to display your recent post widget.

Step 05: Save layout.


Now process to view your recent post widget.



How to add simple stylish recent post widget in to your blogger blog


Step 01: Sign into your blogger blog

Step 02: Go to Dashboard >> Layout >> Add a widget >> HTML/JavaScript widget

Step 03: Copy and Paste below code into widget



<div class="recentpostarea">
<style type="text/css">
.recentpostarea {list-style-type: none;counter-reset: countposts;}
.recentpostarea a {text-decoration: none; color: #49A8D1;}
.recentpostarea a:hover {color: #000;}
.recentpostarea li:before {background: #69B7E2;float: left;counter-increment: countposts;content: counter(countposts,decimal);z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff; padding: 0px 10px; margin: 15px 5px 0px -6px; border-radius: 100%;}
li.r-p-title { padding: 5px 0px;}
.r-p-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.r-p-title a {text-decoration: none;color: #444;font-weight: bold;font-size: 13px; padding: 2px;}
.recent-post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}
.r-p-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}
</style>
<script type = "text/JavaScript">
function showrecentposts(json) {for (var i = 0; i < posts_number; i++) { var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}} posttitle = posttitle.link(posturl);var readmorelink = "... read more";readmorelink = readmorelink.link(posturl); var postdate = entry.published.$t;var showyear = postdate.substring(0,4);var showmonth = postdate.substring(5,7);var showday = postdate.substring(8,10);var monthnames = new Array(); monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec"; if ("content" in entry) {var postcontent = entry.content.$t;}else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; var re = /<\S[^>]*>/g; postcontent = postcontent.replace(re, ""); document.write('<li class="r-p-title">');document.write(posttitle);document.write('</li><div class="r-p-summ">');if (post_summary == true) {if (postcontent.length < summary_chars) {document.write(postcontent);} else { postcontent = postcontent.substring(0, summary_chars);var quoteEnd = postcontent.lastIndexOf(" ");postcontent = postcontent.substring(0,quoteEnd);document.write(postcontent + ' ' + readmorelink);}} document.write('</div>'); if (posts_date == true) document.write('<div class="recent-post-date">' + monthnames[parseInt(showmonth,10)] + ' ' + showday + ' ' + showyear + '</div>'); }}
 </script>
 <script>
 var posts_number = 5;
 var posts_date = true;
 var post_summary = true;
 var summary_chars = 80;
 </script>
 <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script>
 <noscript>Your browser does not support JavaScript!</noscript>
</div>



*Customize - Replace value var posts_number = 5; with number of maximum posts that you want to display.


Step 04: Save your widget and replace where you want to display your recent post widget.

Step 05: Save layout.



Now process to view your recent post widget.


Ok now your blogger blog has a recent post widget with Thumbnails or without Thumbnails or with Gallery style or with Simple Stylish. As I mention above you can get a lot of advantages for your blogger blog.  With above codes you can customize your recent post widget as you prefer. Ok friends thank you for reading my article about How to add recent post widget with Thumbnails or without Thumbnails or stylish widget in to your blogger blog.



For more reading THEWONDERSPOT


Thank you for reading - How to add recent post widget in blogger

Good Luck.

Post a Comment

3 Comments

Thank you for visit www.thewonderspot.com.