How to Display Featured Posts in Blogger - US Blogger Lab

Tuesday, 7 October 2014

Browse » Home » Blogger Tips » How to Display Featured Posts in Blogger

How to Display Featured Posts in Blogger

Posted by Unknown at 04:14

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.

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/AVvXsEhEl36-YXdxZYjJpkrF29foV2KtNiXhMUDsflgeAYKD325QT_ftCq3wlRuuYyuEUYY6g5qSnlUubh5kiCHCDlNfqdFEa0Ali5t2MvNY5dSwZFK5YduT4Dkxa7lkEAe-3Q3qelBadxBlvNw/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.

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.

Autor : Mian Fx

Share this article

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Copyright © 2014 US Blogger Lab • All Rights Reserved.

Design By Professional Blogger Lab | • Powered by UrduInformaionsite.com

back to top