How to Install a Featured Post by Label Widget in Blogger, Cool
Hello, fellow Bloggers wherever you are, I hope you are in good health. On this occasion, Enblog.us will share tips on How to Install a Cool Featured Post in Blogger. This Featured Post widget functions to display a series of the latest posts from the blog with an attractive image display that will grab visitors' attention.
We often find this Featured Post widget on large sites that display headlines or the most recommended news on the site. For those who are curious, it's quite easy. Let's follow the steps below.
How to Install a Featured Post by Label Widget in Blogger
First, log in to Blogger > Click the Theme menu and Edit HTML > Then add the code below just before the </head> code.
<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/* Featured Post */
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.featured_enblowrap{display:inline-block;width:100%;max-width:1070px;margin:0 auto 20px auto;overflow:hidden;max-height:410px}
.featured_enblog{display:block;position:relative;float:left;overflow:hidden;height:410px}
.featured_enblog.first{width:44.7%;margin-right:1px}
.featured_enblog.second{width:25%;margin-right:1px}
.featured_enblog.third,.featured_enblog.fourth{width:30%;height:205px}
.featured_enblog.third{margin-bottom:1px}
.featured_enblog a{display:block;color:rgb(255,255,255);position:relative;vertical-align:bottom;z-index:1;height:100%}
.featured_enblog a:before{width:100%;height:100%;position:absolute;content:'';background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.8) 100%);opacity:.7;z-index:2;transition:all .6s}
.featured_enblog:hover a:before{opacity:1}
.featured_enblog a .blog_contents{display:block;position:absolute;z-index:5;bottom:15px;left:15px;right:15px;letter-spacing:-1px;text-transform:uppercase;line-height:120%;transition:all 0.2s}
.featured_enblowrap span{color:#fff;padding:3px 6px;letter-spacing:0;font-size:12px;line-height:1;border-radius:3px;text-transform:capitalize;box-shadow:0 2px 5px rgba(0,0,0,0.2)}
.featured_enblog.first span{background:#679e37}
.featured_enblog.second span{background:#f8a724}
.featured_enblog.third span{background:#029ae4}
.featured_enblog.fourth span{background:#e53935}
.featured_enblog a .blog_contents h3{color:#fff;margin-top:15px;font-size:16px;line-height:normal;font-weight:normal;letter-spacing:-0.4px;text-transform:none;text-shadow:none}
.featured_enblog a .blog_contents h3:hover{text-decoration:underline}
.featured_enblog.first a .blog_contents h3{font-size:22px}
.featured_enblog .feat-img{width:100%;height:100%;background-size:cover;background-position:50%;-webkit-backface-visibility:hidden;transition:all .3s}
.featured_enblog:hover .feat-img{transform:rotate(-3deg) scale(1.2);-webkit-filter:blur(2px);filter:blur(2px)}
@media only screen and (max-width:768px){.featured_enblowrap{max-height:initial}.featured_enblog.second,.featured_enblog.first,.featured_enblog.third,.featured_enblog.fourth{width:100%;height:300px;margin:0;margin-bottom:1px}.featured_enblog a .blog_contents{left:15px;right:15px;bottom:10px}.featured_enblog.first a .blog_contents h3,.featured_enblog a .blog_contents h3{font-size:20px}}
</style>
</b:if>
Also install the code below right above the code
<b:if cond='data:view.isHomepage'>
<script type='text/javascript'>
//<![CDATA[
// Featured post
function recentposts1(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,document.write('<div class="featured_enblowrap">');for(var t=0;t<maxpost;t++){var i,n=e.feed.entry[t],r=n.title.$t,l=n.category[0].term;newsize;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++)if("alternate"==n.link[o].rel){i=n.link[o].href;break}for(o=0;o<n.link.length;o++)if("replies"==n.link[o].rel&&"text/html"==n.link[o].type){n.link[o].title.split(" ")[0];break}if("content"in n)var g=n.content.$t;else if("summary"in n)g=n.summary.$t;else 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 m=[1,2,3,4,5,6,7,8,9,10,11,12],f=["Oca","Şub","Mar","Nis","May","Haz","Tem","Ağu","Eyl","Eki","Kas","Ara"],p=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),u=(postdate.split("-")[0],0);u<m.length;u++)if(parseInt(p)==m[u]){p=f[u];break}if(0==t){var v='<div class="featured_enblog first"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}if(1==t){v='<div class="featured_enblog second"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}if(2==t){v='<div class="featured_enblog third"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}if(3==t){v='<div class="featured_enblog fourth"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}j++}document.write("</div>")}imgr=new Array,imgr[0]="data:image/gif;base64,R0lGODlhAQABAIAAAPHx8AAAACH5BAEAAAAALAAAAAABAAEAQAICRAEAOw==",showRandomImg=!0,aBold=!0,numposts1=4,numposts11=1,newsize=400;
//]]>
</script>
</b:if>
Pay attention to the marked code, adjust max-width:1070px to your template's width and make sure that the template already contains the jQuery Library. {alertInfo}
Next, add the markup for this Featured Post widget freely wherever you want to place it, as long as it is within the body between <body> and </body>.
<b:if cond='data:view.isLayoutMode or (data:view.isHomepage and (data:widgets any w => w.sectionId == "featured_enblowrap"))'>
<b:section class='main-container featured_enblogz' id='featured_enblowrap' maxwidgets='1' name='Featured Posts' showaddelement='yes'>
<b:widget id='HTML151' locked='false' title='Tutorials' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'>Tutorials</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-content'>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=recentposts1\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>
</b:if>
After you have adjusted everything, click the Save theme button and you're done!
Next, go to Layout > click Edit HTML/JavaScript widget > and enter the label you want to appear in the Featured Post, see the image below:
To see the results, please click the Result button below. {getCard} $type={custom} $title={Live Preview} $info={Result} $button={demo} $icon={}
Quite easy, isn't it? Well, that's all from Enblog for the post on How to Install a Cool Featured Post in Blogger. Hopefully, it's useful!
Tags:
Blogger
