Ads Top

Recent Posts Widget for Blogger / Blogspot with Summary And Read More

Showing the most recent posts widget to the sidebar of your Blogger blog? Recent Posts Widget had this great feature as the posts of his latest show with their titles, abstracts with a publication date. This widget allows you to set the number of posts displayed and also allow you to set the number of s characters.Today let us create our own Custom Blogger Widget to display most recent posts.


Read More :
1. Recent Posts Widget for Blogger Text CSS Hover Effect with jQuery
2. Animated Recent posts for Blogger with Thumbnails - Simple Spy


Recent Posts Widget with post snippets





Recent Posts Widget with post snippets


1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.





<script style="text/javascript" src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts-ot/recent-posts-snippets-ycode.js"></script><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"><img alt="My Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%; top: 0px;"/></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"><img alt="All Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%;"/></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogging Tips"><img alt="All Blogging Tips" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; left: 0%;"/></a><script style="text/javascript">
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;
var standardstyling = true;
var numposts = 5;
</script>
<script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>











Recent Posts Widget with post titles only





Recent Posts Widget with post titles only




<script style="text/javascript" src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts-ot/recent-posts-titles-ycode.js"></script><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"><img alt="My Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%; top: 0px;"/></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"><img alt="All Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%;"/></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogging Tips"><img alt="All Blogging Tips" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; left: 0%;"/></a><script style="text/javascript">
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
var numposts = 10;
</script>
<script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>









Recent Posts Widget with Post Summary And Read More



Recent Posts Widget with Post Summary And Read More




<script style="text/javascript" src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts-ot/recent-posts-more-ycode.js"></script><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"><img alt="My Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%; top: 0px;"/></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"><img alt="All Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%;"/></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogging Tips"><img alt="All Blogging Tips" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; left: 0%;"/></a><script style="text/javascript">
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;
var standardstyling = true;
var numposts = 5;
</script>
<script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>







There are many variables in this script that you need to adjust to blend the widget�s look with that of your blog template. Most of them are self explanatory.

1.In the code, look for the line�

http://bdlab.blogspot.com/feeds/posts/default
and replace the blog address with your own blog address

2.How to change the number of posts

By default, this widget is set to display a maximum of 5 recent posts. To change this number,

var numposts = 5
edit line in the code and replace the number 5 with the number of posts desired:


3.How to change the Number of Characters (Excerpt)


This widget is set to display an excerpt of 100 characters of each post. If you want to change that number, just look for the number 100 in the code and replace it with the number of characters you want to be displayed.

Recommended setting: 50 to 100.

var numchars = 100;

4.How to Show Post Date

If you want to show the post date, look for the line with the word showpostdate in the code. Then change its value from false to true (shown in color red below).

var showpostdate = false;



Happy Blogging! =)










Many thanks to bloggerplugins for making this code and I just tested and modified to work on blogger


No comments:

Categories

adsense adsense optimization adsense tips Animation Announcement Apps Background backlinks Basic blog Blog Design blogger Blogger Design Blogger Hack blogger pages blogger posts Blogger Security Blogger Special Tricks Blogger Templates Blogger Tips Blogger Tips & Tricks Blogger tools blogger tricks Blogger Widgets Blogger Widgets and plugins Blogging Basic Tips Blogging ethics Blogging tips Blogging Tools Blogging Tricks Btemplates 2013 Btemplates 2014 Bugs and Errors click bombing Comments css CSS and HTMLTricks CSS3 Cursors custom domain Design Drop Down Menu Earning Tips Editing emoticons Events Facebook Facebook tricks Featured Content Slider firebug Flash Free Coupons Free Recharge Gadget Generator Google Google AdSense Google Analytics Google Plus Google Plus Tricks Guest Posts Horizontal Menu How To HowTo Tuts HTML Image Image Effects Increase traffic instagram Interesting invalid clicks Java Script javascript jQuery Label labels Link Building Links LOGO Makers Make Money Make Money Online Marketing Menu bar menus Menus for Blogger Multi Tabbed Navigation navigation menu News Numbered Page Optimizing Other Tricks Page Photoshop Pop Out popular posts Post posts presentations Pure CSS Menu recent comments recent posts related posts Responsive Blogger Templates robots Rss Search box SEO SEO Strategy SEO Tips & Tricks sitemap Slide Show slideshows Social Media social media plugins statcounter static pages Style your Blog swf Tab Menu Template Template Designing Template Tricks Templates templates 2016 threaded comments Tips tools Traffic Tips Twitter Unlock modems Vertical bar Video Wallpapers Web Designing web hosting Webmaster Tools Widget Widget Generators Widgets wordpress WordPress Plugins WordPress Themes WordPress Tricks WP Tips
Powered by Blogger.