Latest/Recent Posts Widget With Title, Image And Desc For Blogger

Showing latest post in your sidebar is a good idea to attract your views to view your more posts while landing on a post that will help you to increase your page views that will decrease your bounce rates that is helpful for SEO too. Pageviews will increase then you can earn more too. So an attractive post widget van do this.

So now its time to move a head and add an awesome and attractive latest posts widget that can display posts titles, posts featured images and posts description that is enough to attract a visitor to open that post. Its fully customizeable so that you can edit it more as per you want. Without any more preface, move ahead and use the below code.

Features:

1.) Pure JavaScript Code.
2.) Default CSS Added.
3.) Fully Customizable.
4.) No External File Added.
5.) Will Show Latest/Recent/New Posts From Your Blog.
6.) Will Show Title, Image And Desc.
7.) Easy To Add.
8.) Quick To Load.
9.) No Script Error.
10.) JSON Feed Picker.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog”.
3.) Go To “Layout”.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT”
6.) Click “+” Icon To Add It.
7.) Now “Copy” The Below Code And “Paste” It To There.
8.) Leave The “Title” Empty.
9.) Click “Save”, Now You Are Done.
OR
1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog”.
3.) Go To “Template”.
4.) Click “Edit HTML”.
5.) Now “Click” Within Code Box.
6.) Press [CTRL+F] To Search Code.
7.) Now “Copy” The Below Code And “Paste” It Wheere You Want This Code..
8.) Click “Save Template” And Done.

<!-- Latest/Recent Posts List By EXEIdeas -->
<style type="text/css">
ul.latestPostByEXE{width:300px;text-align:left;}
ul.latestPostByEXE li{list-style-type:none;clear:both;border-bottom:1px solid #efefef;padding:10px 0;}
ul.latestPostByEXE li img{float:left;margin:0 5px 0 0;}
ul.latestPostByEXE li a{color:#FFF;font-weight:bold;text-decoration:underline;display:block;margin-bottom:10px;}
ul.latestPostByEXE li span{color:#efefef;font-size:13px;text-align:justify;display:block;}
</style>
<script type='text/javascript'>
//<![CDATA[
function latestpostlistbyexeideas(json) {
document.write('<ul class="latestPostByEXE">');
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 + "'";
var entryTitle = json.feed.entry[i].title.$t;
var entryImage = json.feed.entry[i].media$thumbnail.url;
var entrySumm = json.feed.entry[i].summary.$t;
var item = "<li><img src='" + entryImage + "'/><a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a><span>" + entrySumm + "</span></li>";
 document.write(item);
 }
 document.write('</ul>');
 }
//]]>
</script>
<script src='/feeds/posts/summary?max-results=10&amp;alt=json-in-script&amp;callback=latestpostlistbyexeideas'/>
<!-- Latest/Recent Posts List By EXEIdeas -->

Customization:

You can change the post count to show at most recent by changing 10 with your desired count under 500 There is nothing rest to edit in this code. Just add it where you want then it will automatically pic that blog latest or recent posts easily.

Last Words:

This is all about the awesome tutorial that we have and want to share with you to make yourself easy to go too. Please post your valuable feedback through comments. We tried my best to explain this tutorial but still if you have any doubt then feel free to ask me. Thanks!