How to Display Featured Posts in Blogger

Advertisements
You would certainly have some stories or articles in your blog that you would like to highlight to your readers. It could be anything, a cheap deal offer, launch of new product and more. This is not a new feature for blogs, more commonly known as “Featured Posts” or “Featured Content” that is displayed mostly on homepage at the very top of the homepage of the blog. If you are a Blogger user and have seen those premium Blogger templates that displays featured post in various ways then you have arrived to the right place. Today in this article, we will show you how to display featured posts in blogger.


What is Featured Posts?

You probably have seen many blogs that displays featured posts on their homepage providing highlight to content and bringing it close to the users. This is a technique to bring more attention to a hot topic, cheap deal offer or a new product launch. This feature is highly used in premium blogger templates but today we will be adding featured posts content in blogger that could be applied to any template free or paid too.

Display Featured Posts in Blogger:

The whole featured posts functions through Labels and whenever a post is labeled with a specific label it shows that posts in the featured area on the blog. The very first thing you need to do is to go to Blogger >> Template >> Edit HTML >> and add the following piece of coding above skin tag.

.label_with_thumbs {
    float: left;
    padding: 0px;
}
.label_with_thumbs li {
    float: left;
    margin-bottom: 20px;
    border-bottom: 1px solid #d2d2d2;
    padding-bottom: 20px;
}
.label_with_thumbs img {
    float: left;
    margin-right: 10px;
    border: 1px solid #ddd;
}
.label_with_thumbs h2 {
    font-size: 16px;
    margin: 0px;
    font-weight: bold;
}
.label_with_thumbs br {
    margin: 0px;
    padding: 0px;
}

 Now you have to add the script that would fetch featured posts from labels. Add the following piece of code above the </head> tag. Since, it works with jQuery, so keep in mind if JavaScript is turned off or not supposed by a browser this script will stop working.

<script>
//<![CDATA[
function labelthumbs(w) {
    document.write('<ul class="label_with_thumbs">');
    for (var v = 0; v < numposts; v++) {
        var f = w.feed.entry[v];
        var g = f.title.$t;
        var z;
        if (v == w.feed.entry.length) {
            break
        }
        for (var r = 0; r < f.link.length; r++) {
            if (f.link[r].rel == "replies" && f.link[r].type == "text/html") {
                var n = f.link[r].title;
                var o = f.link[r].href
            }
            if (f.link[r].rel == "alternate") {
                z = f.link[r].href;
                break
            }
        }
        var j;
        try {
            j = f.media$thumbnail.url
        } catch (q) {
            s = f.content.$t;
            a = s.indexOf("<img");
            b = s.indexOf('src="', a);
            c = s.indexOf('"', b + 5);
            d = s.substr(b + 5, c - b - 5);
            if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
                j = d
            } else {
                j = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipAXlMgj7N-IzFGtikyLfASGyP1q39HPnp3_XAlTNa_mdSoiHYQXaMsbwL_d5dnUDsSkb5gkQs8pLLcRJTTuScGA-6P5Biv-a3zrr-zzbrWVg2vFw8fnTJX0JvaqdT_vv-lpMZ_IRuQ7c/s1600/no_image.jpg"
            }
        }
        var x = f.published.$t;
        var m = x.substring(0, 4);
        var l = x.substring(5, 7);
        var t = x.substring(8, 10);
        var h = new Array();
        h[1] = "Jan";
        h[2] = "Feb";
        h[3] = "Mar";
        h[4] = "Apr";
        h[5] = "May";
        h[6] = "Jun";
        h[7] = "Jul";
        h[8] = "Aug";
        h[9] = "Sep";
        h[10] = "Oct";
        h[11] = "Nov";
        h[12] = "Dec";
        document.write('<li class="clearfix">');
        if (showpostthumbnails == true) {
            document.write('<a class="picturelabela" href="' + z + '" target ="_top"><img class="label_thumb" src="' + j + '"/></a>')
        }
      document.write('<strong><h2><a class="titlelabel" href="' + z + '" target ="_top">' + g + "</a></h2></strong><br>");
        if ("content" in f) {
            var y = f.content.$t
        } else {
            if ("summary" in f) {
                var y = f.summary.$t
            } else {
                var y = ""
            }
        }
        var p = /<\S[^>]*>/g;
        y = y.replace(p, "");
        if (showpostsummary == true) {
            if (y.length < numchars) {
                document.write("");
                document.write(y);
                document.write("")
            } else {
                document.write("");
                y = y.substring(0, numchars);
                var e = y.lastIndexOf(" ");
                y = y.substring(0, e);
                document.write(y + "...");
                document.write("")
            }
        }
        var A = "";
        var u = 0;
        document.write("<br>");
        if (showpostdate == true) {
            A = A + h[parseInt(l, 10)] + "-" + t + " - " + m;
            u = 1
        }
        if (showcommentnum == true) {
            if (u == 1) {
                A = A + " | "
            }
            if (n == "1 Comments") {
                n = "1 Comment"
            }
            if (n == "0 Comments") {
                n = "No Comments"
            }
            n = '<a href="' + o + '" target ="_top">' + n + "</a>";
            A = A + n;
            u = 1
        }
        if (displaymore == true) {
            if (u == 1) {
                A = A + " | "
            }
            A = A + '<a href="' + z + '" class="url" target ="_top">More »</a>';
            u = 1
        }
        document.write(A);
        document.write("</li>");
        if (displayseparator == true) {
            if (v != (numposts - 1)) {
                document.write("")
            }
        }
    }
    document.write("</ul>")
};
//]]>
</script>

At this stage, we have technically setup everything the only thing left is to add the code that will display featured posts. Now, just paste the following piece of code wherever you would like to display your featured posts in your blog either in the Sidebar or in post body.

<div class="MBL-Featureposts">
<script type='text/javascript'>
var numposts = 4;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Featured?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
</div>

However do not forget to replace "Featured" with the Label of your choice (that you have used while writing a post). Remember: The spelling should be correct or else it would not work, even take care of upper and lower class letters.

We hope this tutorial may have assisted you in learned how to add featured posts in blogger, share your thoughts about the tutorial in the comments below. In case you are shucked in some step or you see errors feel free to ask.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

9 comments

April 10, 2014 at 10:30 PM

This is a recent post by labels, but thanks i were looking for this!

Editorial Team MOD
April 11, 2014 at 3:01 AM

Glad it helped you!

Anonymous
April 13, 2014 at 9:52 AM

@Syed Faizan Ali,

Just small notice: In Google search results your profile picture doesn't displaying. So check why its not showing your picture and share it with us. Because our picture is also not displaying since many days and we tested it by changing picture but it doesn't work. So please focus on this topic.

December 12, 2015 at 10:09 AM

finally solve my problem..tq

May 7, 2016 at 2:09 PM

I have trouble with this line:

src="/feeds/posts/default/-/Featured?orderby=updated&alt=json-in-script&callback=labelthumbs"

cause FEED get oversaturated (Error 503) is therre a way to do this with feedburner or an alternative. I have ALL site made with this script help

Editorial Team MOD
May 27, 2016 at 11:33 PM

Hi,

This problem is from Blogger. It will get resolved, do not worry about this error.

aaa
June 28, 2016 at 11:35 PM

its work so nice on my blog...
my blog is in urdu how can i change its rotation left to right? please answer me

aaa
June 29, 2016 at 12:11 AM

how to increase the size of photo thumb

Editorial Team MOD
July 26, 2016 at 11:39 PM

Please read this tutorial:

http://www.mybloggerlab.com/2014/06/how-to-improve-image-quality-issue-in.html

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.