In this article i will try to show you how to create recent post with snippet in Blogger. As we know Recent Post has feature to display the latest article you have been published automaticaly. The latest article will display title and a few line of description below, you can set the number of newest articles you want to display, you can add recent post somewhere on your blogpage, in example at the sidebar section.Recent post on blog is also known as a way to attract visitors to learning or reading the newest or latest article, and this element might be can increase more pageview to your blogpage. There are so many version of recent post for blogger and you can find on the internet, so this is not the only version, but if you intereted, then you might want to try this version.
This element will works after we add a few line of JavaScript, but you can also modify the style of CSS as you want, and set the number of post you want to display. To Add this recent post to your blog only take a few minutes, and its not hard at all. If you are interested, then follow step by step described below.
Method 1
1. Log in to Blogger.
2. Click the Template then Edit HTML.
3. Click with the left button mouse one time in the box template.
4. Press Ctrl + F for quick search.
5. Add the following style code above
]]></b:skin> or </style>CSS Recent Post With Snippet
.recent {
background:#7793FF;
width:100%;
height:23px;
padding:5px 0 5px 10px;
font:bold 17px "Arial Narrow";
color:#fff;
text-transform:uppercase;
}
#recent-posts {
background:#FAFAFA;
padding:10px;
}
.recent-post-title {
margin-bottom:5px;
padding:0;
}
.recent-post-title a {
color: #0000D3;
}
.recent-post-title a:hover {
color: #444;
}
.recent-post-snippet {
color:#8B8B8B;
line-height:1.3em;
font:12px Arial;
margin-bottom:10px;
}6. Add the following HTML and JavaScript code somewhere in the sidebar section, could be after
<div class='sidebar-wrapper'> or <div class='right-sidebar'> or something similar.HTML and JavaScript Recent Post
<div class='recent'>Recent Post</div>
<div id='recent-posts'>
<script style='text/javascript'>//<![CDATA[
var numposts =5;var showpostsummary = true;var numchars = 100;var standardstyling = true;function showrecentposts(json) {for (var i = 0; i < numposts; 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);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('<div class="recent-post-title">');document.write(posttitle);document.write('</div><div class="recent-post-snippet">');if (showpostsummary == true) {if (standardstyling) document.write('');if (postcontent.length < numchars) {document.write(postcontent);}else {if (standardstyling) document.write('');postcontent = postcontent.substring(0, numchars);var quoteEnd = postcontent.lastIndexOf(" ");postcontent = postcontent.substring(0,quoteEnd);document.write(postcontent + ' ' );if (standardstyling) document.write('');}}document.write('</div>');}}
//]]></script>
<script src='http://YOURBLOG-NAME.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts'/>
</div>Blue color is number of post you wan to display, and don't forget Green color is Your Blog Name.
7. Save Template and see the results.
Method 2
1. Log in to Blogger.
2. On Blogger Dashboard click/Select Layout.
3. Add a Gadget and then Select HTML/JavaScript.
4. Fill the title as you desired, example Recent Post.
5. Add the following code in the box content.
<div id='recent-posts'>
<style type='text/css' scoped='scoped'>
#recent-posts {background:#FAFAFA;padding:10px;}
.recent-post-title {margin-bottom:5px;padding:0;}
.recent-post-title a {color: #0000D3;}
.recent-post-title a:hover {color: #444;}
.recent-post-snippet {color:#8B8B8B;line-height:1.3em;font:12px Arial;margin-bottom:10px;}
</style>
<script style='text/javascript'>//<![CDATA[
var numposts =5;var showpostsummary = true;var numchars = 100;var standardstyling = true;function showrecentposts(json) {for (var i = 0; i < numposts; 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);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('<div class="recent-post-title">');document.write(posttitle);document.write('</div><div class="recent-post-snippet">');if (showpostsummary == true) {if (standardstyling) document.write('');if (postcontent.length < numchars) {document.write(postcontent);}else {if (standardstyling) document.write('');postcontent = postcontent.substring(0, numchars);var quoteEnd = postcontent.lastIndexOf(" ");postcontent = postcontent.substring(0,quoteEnd);document.write(postcontent + ' ' );if (standardstyling) document.write('');}}document.write('</div>');}}
//]]></script>
<script src='http://YOURBLOG-NAME.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts'/>
</div>Blue color is number of post you wan to display, and don't forget Green color is Your Blog Name.
6. Save and see the results.
