Friday, April 6, 2007

How To Display Featured Posts Inward Blogger

You would for sure get got some stories or articles inward your weblog that you lot would similar to highlight to your readers. It could live anything, a inexpensive bargain offer, launch of novel production too more. This is non a novel characteristic for blogs, to a greater extent than unremarkably known every bit “Featured Posts” or “Featured Content” that is displayed by too large on homepage at the really superlative of the homepage of the blog. If you lot are a Blogger user too get got seen those premium Blogger templates that displays featured post inward diverse ways too then you lot get got arrived to the right place. Today inward this article, nosotros volition demonstrate you lot how to display featured posts inward blogger.


What is Featured Posts?

You in all likelihood get got seen many blogs that displays featured posts on their homepage providing highlight to content too bringing it about the users. This is a technique to convey to a greater extent than attending to a hot topic, inexpensive bargain offering or a novel production launch. This characteristic is highly used inward premium blogger templates but today nosotros volition live adding featured posts content inward blogger that could live applied to whatsoever template costless or paid too.

Display Featured Posts inward Blogger:

The whole featured posts functions through Labels too whenever a post is labeled amongst a specific label it shows that posts inward the featured expanse on the blog. The really kickoff affair you lot demand to produce is to acquire to Blogger >> Template >> Edit HTML >> too add together the next slice of coding higher upwards peel tag.

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

 Now you lot get got to add together the script that would fetch featured posts from labels. Add the next slice of code higher upwards the </head> tag. Since, it industrial plant amongst jQuery, therefore cash inward one's chips on inward heed if JavaScript is turned off or non supposed yesteryear a browser this script volition halt working.

<script>
//<![CDATA[
business office 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;
        endeavour {
            j = f.media$thumbnail.url
        } grab (q) {
            sec = 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/AVvXsEjWjeShwit_is94KHhS0W_Gw6ycP9LKysnCa7nSJ8ad4WfT6iNhJiNRqMjH6-xuFIfWg_ogZZhuP_OFYrtbzyxDsA9TSc8K_k_vIDBp6mhDxffXbfKwVTTj4JjVb9bMWk_S5GULRycFSm8/s1600/no_image.jpg"
            }
        }
        var x = f.published.$t;
        var k = x.substring(0, 4);
        var l = x.substring(5, 7);
        var t = x.substring(8, 10);
        var h = novel 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" inward f) {
            var y = f.content.$t
        } else {
            if ("summary" inward 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 Influenza A virus subtype H5N1 = "";
        var u = 0;
        document.write("<br>");
        if (showpostdate == true) {
            Influenza A virus subtype H5N1 = Influenza A virus subtype H5N1 + h[parseInt(l, 10)] + "-" + t + " - " + m;
            u = 1
        }
        if (showcommentnum == true) {
            if (u == 1) {
                Influenza A virus subtype H5N1 = Influenza A virus subtype H5N1 + " | "
            }
            if (n == "1 Comments") {
                n = "1 Comment"
            }
            if (n == "0 Comments") {
                n = "No Comments"
            }
            n = '<a href="' + o + '" target ="_top">' + n + "</a>";
            Influenza A virus subtype H5N1 = Influenza A virus subtype H5N1 + n;
            u = 1
        }
        if (displaymore == true) {
            if (u == 1) {
                Influenza A virus subtype H5N1 = Influenza A virus subtype H5N1 + " | "
            }
            Influenza A virus subtype H5N1 = Influenza A virus subtype H5N1 + '<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, nosotros get got technically setup everything the entirely affair left is to add together the code that volition display featured posts. Now, merely glue the next slice of code wherever you lot would similar to display your featured posts inward your weblog either inward the Sidebar or inward 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 produce non forget to supersede "Featured" amongst the Label of your choice (that you lot get got used field writing a post). Remember: The spelling should live right or else it would non work, fifty-fifty get got attention of upper too lower shape letters.

We promise this tutorial may get got assisted you lot inward learned how to add together featured posts inward blogger, portion your thoughts virtually the tutorial inward the comments below. In illustration you lot are shucked inward some footstep or you lot run into errors experience costless to ask.

No comments:

Post a Comment