What is Featured Posts?
You belike stimulate got seen many blogs that displays featured posts on their homepage providing highlight to content together with bringing it about the users. This is a technique to pick out to a greater extent than attending to a hot topic, inexpensive bargain offering or a novel production launch. This characteristic is highly used inwards premium blogger templates but today nosotros volition live adding featured posts content inwards blogger that could live applied to whatever template costless or paid too.Display Featured Posts inwards Blogger:
The whole featured posts functions through Labels together with whenever a post is labeled alongside a specific label it shows that posts inwards the featured expanse on the blog. The really start affair you lot demand to produce is to become to Blogger >> Template >> Edit HTML >> together with add together the next slice of coding inwards a higher identify pare tag..label_with_thumbs {
float: left;
padding: 0px;
}
.label_with_thumbs li {
float: left;
margin-bottom: 20px;
border-bottom: 1px company #d2d2d2;
padding-bottom: 20px;
}
.label_with_thumbs img {
float: left;
margin-right: 10px;
border: 1px company #ddd;
}
.label_with_thumbs h2 {
font-size: 16px;
margin: 0px;
font-weight: bold;
}
.label_with_thumbs br {
margin: 0px;
padding: 0px;
}
Now you lot stimulate got to add together the script that would fetch featured posts from labels. Add the next slice of code inwards a higher identify the </head> tag. Since, it plant alongside jQuery, hence expire on inwards hear if JavaScript is turned off or non supposed yesteryear a browser this script volition halt working.
<script>
//<![CDATA[
role 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;
endeavor {
j = f.media$thumbnail.url
} grab (q) {
second = 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/AVvXsEjVJZhhO3nPlA8yXEdlqmYoyl1eGFafTJlFkQAaHqF8Y3slOREUSg6P_mMag8q8nAaScBiQuDgLopIHu_PTZqsyUz_bS2kJ0LUyyNOLFpWzguTJZKqLSj_U8cX3y64sWEbemsVlaZs3Bo0/s1600/no_image.jpg"
}
}
var x = f.published.$t;
var 1000 = 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" inwards f) {
var y = f.content.$t
} else {
if ("summary" inwards 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 stimulate got technically setup everything the solely affair left is to add together the code that volition display featured posts. Now, only glue the next slice of code wherever you lot would similar to display your featured posts inwards your spider web log either inwards the Sidebar or inwards 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" alongside the Label of your alternative (that you lot stimulate got used piece writing a post). Remember: The spelling should live right or else it would non work, fifty-fifty stimulate got attention of upper together with lower degree letters.
We promise this tutorial may stimulate got assisted you lot inwards learned how to add together featured posts inwards blogger, portion your thoughts close the tutorial inwards the comments below. In illustration you lot are shucked inwards some pace or you lot meet errors experience costless to ask.
Comments