Monday, August 20, 2012

How To Show Recent Post Titles By Labels In Blogger Blog

Author: Gagan Masoun
How To Show Recent Post Titles By Labels In Blogger BlogLabels are very important for any blog.These are keywords that categorizes your blog posts in easy way. They should be mostly based on common and specific keywords.See example If I am a Singer and I write a blog, I will make sure I label all posts written on Lyrics as "Lyrics" and those on Video Songs as "Video Songs" and so on.

This will help my blog visitors to read all posts written on Lyrics by simply hitting the Lyrics label link.

Some times you want to display recent post titles by labels in blogger blog widgets.But unfortunately blogger has not any official widget for this purpose.You can do this work manually.But manually work is so bored.Don't worry, I have a easy solution for you to add your recent posts automatically under different Labels. After installing this widget the list will automatically update itself.

Before moving on, you may like to read:

1. Installing The First list

  • Go to Blogger Dashboard > Layout Design > Click Add A Gadget
  • In Add A Gadget Window, Select HTML/Javascript
  • Give A Label As The Title Of Your Widget
  • Copy The Code Below and Paste It Inside The Content Box
  • Click Save and Its Done
 <!-- Recent Posts by Label Start -->
<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul>');
 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('</ul>
');
 }
</script>
<script src="Blog_URL_HERE/feeds/posts/summary/-/BLOG_LABEL_NAME?max-results=POST_COUNT&amp;alt=json-in-script&amp;callback=recentpostslist">
</script>
<span style="float: right; font-size: 80%;">Get this <a href="http://www.blogsdaddy.com/2012/08/how-to-show-recent-post-titles-by.html" target='_blank' rel='nofollow'>widget</a></span><!-- Recent Posts by Label End -->

Customization  

  • Replace Blog_URL_HERE with your own blog URL. For example if you were to list posts from BlogsDaddy.Com, you would have to replace it with http://www.blogsdaddy.com (without the trailing slash). 
  • Replace BLOG_LABEL_NAME with the label.Be careful about Labels, they are case sensitive, make sure you get it right. 
  • Replace the value of POST_COUNT with the number of posts you want to display.

2. Adding Subsequent Lists

You need to add a HTML/JavaScript gadget for each label. Repeat the same steps above for each label, with a slight difference: 
  • You don’t have to copy the whole code. Just copy the below code into each gadget. 
<script src="Blog_URL_HERE/feeds/posts/summary/-/BLOG_LABEL_NAME?max-results=POST_COUNT&amp;alt=json-in-script&amp;callback=recentpostslist">
</script>
<span style="float: right; font-size: 80%;">Get this <a href="http://www.blogsdaddy.com/2012/08/how-to-show-recent-post-titles-by.html" target='_blank' rel='nofollow'>widget</a></span>
  • Make sure your first list (which contains the full code) is positioned on top of all other lists. 
So add this widget to your blog right now and enjoy blogging with a different way.If you have any question about this widget.Ask in comments.

6 comments:

  1. pls provide tutorials with examples....so that it will be helpful for us to know before implementing...

    ReplyDelete
    Replies
    1. Hello Mr Prabakaran C,

      You can check demo here, Here In this website you can see One label of " Hindi Songs Lyrics" on sidebar and other is "Bollywood Box Box" in the footer... :)

      Delete
  2. I put it in my blog but it doesn't display any posts.

    "http://a-kalyptos.blogspot.com/feeds/posts/summary/-/style?max-results=1&alt=json-in-script&callback=recentpostslist">



    http://a-kalyptos.blogspot.gr can you plz check? Thanx in advance!

    ReplyDelete
    Replies
    1. copy whole code and try it again...Hope it will work..

      Delete
  3. its not working

    ReplyDelete
    Replies
    1. Give Label name carefully: for example if my exact label name is "Blogger", I can not write this label as "blogger". So, do everything properly..

      Delete