Thursday, September 1, 2016

How to Displaying Recent Post Titles by Label in Blogger

How to list recent post titles by label

Do you want to list all or your most recent posts according to categories/labels? Well then, you’ve come to the right tutorial. To do follow below steps


1. Installing the first list

  1. Go to Layout Design > Page Elements.
  2. Click Add A Gadget.
  3. In Add A Gadget window, select HTML/Javascript .
  4. Enter a label as the title of your widget.
  5. Copy the code below and paste it inside the content box.
  6. Click Save.

<!-- 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="YOUR_BLOG_URL/feeds/posts/summary/-/YOUR_LABEL?max-results=SHOW_HOW_MANY&alt=json-in-script&callback=recentpostslist"></script>
<span style="font-size: 80%; float:right;">Get this <a href="http://guidelinks.blogspot.com/2016/09/how-to-displaying-recent-post-titles-by.html">widget</a></span>
<!-- Recent Posts by Label End -->

Replace YOUR_BLOG_URL in code line 21 with your own blog URL. For example if you were to list posts from BloggerSentral.com, you would have to replace it with http://www.bloggersentral.com (without the trailing slash).
Replace YOUR_LABEL (line 21) with the label. Labels are case sensitive, make sure you get it right.
Replace the value of SHOW_HOW_MANY (line 21) with the number of posts you want to display. To show all posts, use 500 (I believe 500 is the maximum. If you have more than 500 posts under a certain label, do leave a comment, we’ll work something out).
The titles are bulleted due the use of ordered list <ul>. If you want them numbered instead, just replace ul (in line 5 and 18) with ol.

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 codes in lines 21 and 22 into each gadget.
Make sure your first list (which contains the full code) is positioned on top of all other lists.

1 comment:

  1. https://photo-wonder-lite.blogspot.com/2019/09/photo-wonder-lite.html

    ReplyDelete