How to Make a Featured Post by Lable on Blogger

Featured Post on Blog or Website. Source:Pixabay

Featured Post is a collection of featured article links/Post entries with a grid or checkerboard style. In addition to beautifying the appearance of a website, the featured post grid is also useful for increasing page views and also lowering bounce rates on a website. In general, this featured post grid appears on the Homepage and its position is above the post.

In this article we will discuss about featured posts, curious how? Let's take a look at the full review below.

How to Make a Responsive Featured Post Grid on Blogger

The steps:

• Log in to Blogger account => Themes => Edit HTML
• Put the CSS / Javascript code below before or above the code </style>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
div#featured-posts-section{max-height:350px;overflow:hidden;background:#fff;}
#featured-posts-section{max-height:350px;overflow:hidden;margin:0 auto 20px}
.featured-post a{font-size:1.2em;color:#fff;}
.featured-post a:hover{color:#fff;text-decoration:underline;}
.main-post.featured-post a{margin:0;font-size:17px}
.featured-post .col-post{float:left;position:relative;overflow:hidden;margin:0 25px 0 0}
.featured-post .secondary-post{background:#dadada;width:32%;margin:0 0 20px 0;transition:all .4s}
.featured-post .main-post{background:#dadada;width:65%;padding:0;transition:all .4s}
.featured-post .main-post:before,.featured-post .secondary-post:before{bottom:0;content:&quot;&quot;;display:block;height:50%;width:100%;position:absolute;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%)}
.featured-post .main-post:after,.featured-post .secondary-post:after{content:&#39;&#39;;z-index:1;height:100%;width:100%;background:rgba(0,0,0,0.2);opacity:0;position:absolute;top:0;left:0;border-radius:50%;transform:scale(0,0);transition:all .4s}
.featured-post .main-post:hover:after,.featured-post .secondary-post:hover:after{opacity:1;transform:scale(1.5,1.5)}
.featured-post span{background:#c00;display:inline-block;color:#fff;font-style:normal;position:absolute;transition:all .4s;font-size:11px;line-height:1.4;padding:3px 6px;top:10px;left:10px;z-index:2}
.featured-post .main-post:hover span,.featured-post .secondary-post:hover span{background:#4aa3df;}
.featured-post img{height:100%;transition:all .5s}
.featured-post .main-post img{height:350px;width:100%;object-fit:cover;}
.featured-post .secondary-post img{height:165px;object-fit:cover;width:100%;}
.featured-post .main-post:hover img,.featured-post .secondary-post:hover img{backface-visibility:hidden;transform-style:preserve-3d;}
.featured-post header{position:absolute;bottom:0;left:0;right:0;padding:20px;z-index:2;background:url(http://4.bp.blogspot.com/-bp2HK6MdDXg/T5aB6vI5GPI/AAAAAAAAF98/gwCsmb8Fcks/s1600/transparant.png);}
.featured-post .secondary-post header{padding:10px}
.featured-post header h3{font-size:22px;}
.featured-post h4{font-size:15px;}
span.label-info a.label-block:nth-child(n+2),.showpageOf {display:none;}
@media screen and (max-width:768px) {}
@media screen and (max-width:640px) {}
@media only screen and (max-width:1024px){
div#featured-posts-section{padding:0}
}
@media only screen and (max-width:800px){
div#featured-posts-section{max-height:none}
.featured-post .main-post{width:100%;margin-bottom:10px}
.featured-post .secondary-post{width:50%}
.featured-post .secondary-post img{width:100%}
}
@media only screen and (max-width:600px){
.featured-post .main-post img{height:250px}
.featured-post .secondary-post{width:100%}
.featured-post .main-post h3.entry-title{font-size:16px;margin:0 10px;line-height:normal}
.featured-post .main-post h3.entry-title a{line-height:1.3em}
.featured-post header{padding:10px 0 5px}
}
@media only screen and (max-width:300px){
.featured-post .main-post h3.entry-title {font-size: 20px;}
}
</style>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(e,t){for(var s=e.split("<"),r=0;r<s.length;r++)-1!=s[r].indexOf(">")&&(s[r]=s[r].substring(s[r].indexOf(">")+1,s[r].length));return s=s.join(""),s=s.substring(0,t-1)}function sliderposts(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,numposts1<=e.feed.entry.length?maxpost=numposts1:maxpost=e.feed.entry.length;for(var t=0;t<maxpost;t++){var r,i,n=e.feed.entry[t],l=n.category[0].term,o=n.title.$t;if(t==e.feed.entry.length)break;for(var m=0;m<n.link.length;m++)if("alternate"==n.link[m].rel){i=n.link[m].href;break}for(var m=0;m<n.link.length;m++)if("replies"==n.link[m].rel&&"text/html"==n.link[m].type){r=n.link[m].title.split(" ")[0];break}if("content"in n)var g=n.content.$t;else if("summary"in n)var g=n.summary.$t;else var g="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[t]=imgr[j],s=g,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[t]=d);for(var h=[1,2,3,4,5,6,7,8,9,10,11,12],p=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],f=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),u=(postdate.split("-")[0],0);u<h.length;u++)if(parseInt(f)==h[u]){f=p[u];break}if(0==t){var v='<div class="main-post col-post"><a href="'+i+'"><span class="blue">'+l+'</span><img src="'+img[t]+'" height="350" width="640" alt=""></img></a><header><h3 class="entry-title"><a href="'+i+'" title="">'+o+"</a></h3></header></div>";document.write(v)}else{var v='<div class="secondary-post col-post" style="margin-right:0"><span class="blue">'+l+'</span><a class="hover_play_small" href="'+i+'"><img src="'+img[t]+'" height="200" width="320"></img></a><header><h4><a href="'+i+'">'+o+"</a></h4></header></div>";document.write(v)}j++}}imgr=new Array,imgr[0]="http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif",showRandomImg=!0,aBold=!0,summaryPost=150,summaryTitle=50,numposts1=10,featured_numposts="3";
//]]>
</script>
</b:if>

• Then Copy the following HTML code under the closing code of your blog menu navigation, or above the code like <div class='main-wrapper'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='ct-wrapper' id='featured-posts-section'>
<div class='featured-post padding clearfix'>
<script type='text/javaScript'>
document.write(&quot;&lt;script src=&quot;/feeds/posts/default/-/Featured?max-results=&quot;+featured_numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=sliderposts&quot;&gt;&lt;/script&gt;&quot;);
</script>
</div>
</div>
</b:if>
<div class='clear'/>

So, those are the steps on how to create a Featured Post on Blogger. How easy isn't it? Hopefully this article can be useful for all of you. Good luck and good luck!