In this post I will try to show you how to create simple recent post in Blogger. This Recent Post has feature to display the latest article you have been published. The latest article simply, will only display title, you can set the number of newest articles you want to display, you can add this recent post somewhere on the blogpage, in example at the right sidebar.Recent post on blog is also a way to attract visitors to learning or reading the most recent or newest article, and might be can increase more pageview. Actually there are many version of recent post widget/gadget for blogger you can find on the internet, so this is not the only one, but if you want something simple, then you might want to try this version.
This element needs a few line of JavaScript to works, but as always you can also modify the CSS style as you desired, and control how many post you want to show. Only take a few minute to add recent post to your blog, and its not hard at all. If you are interested, then follow the instructions 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
.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 {
padding-bottom:7px;
padding-top:7px;
border-bottom:1px dashed #DADADA;
}
.recent-post-title a {
color: #0000D3;
}
.recent-post-title a:hover {
color: #444;
}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 =7;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);document.write('<div class="recent-post-title">');document.write(posttitle);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 {padding-bottom:7px;padding-top:7px;border-bottom:1px dashed #DADADA}
.recent-post-title a{color: #0000D3;}
.recent-post-title a:hover{color: #444;}
</style>
<script style='text/javascript'>//<![CDATA[
var numposts =7;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);document.write('<div class="recent-post-title">');document.write(posttitle);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.
