Hello Blogger friend, this time Namina will share tips on How to Install Featured Post by Label on the Blog .
This widget that I will share you can use to mark what posts you want displayed on the main page of the blog and this widget is light enough to use.
For those who are curious to try it, see how below.
Featured Post by Label on Blog
First login to Blogger > Click the Theme menu and Edit HTML > Then add the code below right before the code</head>
<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/* Featured */
#featured-wrapper{padding:0 20px 0 0}
.featured{color:#666;line-height:1.4em;margin:0;padding:0}
.featured ul{list-style:none;margin:0;padding:0}
.featured li{margin:0;padding:0;line-height:1.4em}
.featured .widget{padding:0;margin:0 0 20px}
ul.tech_thumbs{margin:0;padding:0}
ul.tech_thumbs li{margin:0 0 1px;padding:0}
ul.tech_thumbs .tech_box{background:#050505;position:relative;margin:0;padding:0;overflow:hidden;width:100%;height:auto}
span.tech_title a{left:0;bottom:0;position:absolute;margin:0;padding:20px 30px;height:auto;line-height:1.2em;color:#fff}
span.tech_title2 a{left:0;top:0;position:absolute;margin:0;padding:15px 30px;height:auto;line-height:1.4em;color:#fff}
ul.tech_thumbs p,ul.tech_thumbs2 p{line-height:1.2em;color:#eee;margin:8px 0 0;padding:0;font-size:12px;font-weight:400;text-transform:none;letter-spacing:normal}
span.tech_title a:hover,span.tech_title2 a:hover,span.tech_title3 a:hover{text-decoration:none}
ul.tech_thumbs .tech_box img{height:auto;width:100%;opacity:.6;transition:all .5s ease}
ul.tech_thumbs .tech_box:hover img{opacity:.5}
ul.tech_thumbs2,ul.tech_thumbs3{margin:0;padding:0}
ul.tech_thumbs2 li{float:left;margin:0 1px 1px 0;padding:0}
ul.tech_thumbs2:nth-child(odd) li{margin:0 0 1px 0}
ul.tech_thumbs2 .tech_box2{background:#050505;position:relative;margin:0;overflow:hidden;width:313.9px;height:170px}
ul.tech_thumbs2 .tech_box2 img{opacity:.5;width:100%;height:100%;transition:all .5s ease}
ul.tech_thumbs2 .tech_box2:hover img{opacity:.3}
span.tech_title{font-size:24px;font-weight:500;margin:0;padding:0;letter-spacing:1px}
span.tech_title2{font-size:16px}
@media screen and (max-width:768px){
#featured-wrapper{padding:0;margin:0 auto 10px auto;overflow:hidden}
ul.tech_thumbs2{display:none}}
</style>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(e){for(h=0;h<numtech;h++){f=(o=e.feed.entry[h]).title.$t;if(h==e.feed.entry.length)break;for(m=0;m<o.link.length;m++){if("replies"==o.link[m].rel&&"text/html"==o.link[m].type)o.link[m].title,o.link[m].href;if("alternate"==o.link[m].rel){u=o.link[m].href;break}}var t;try{t=o.media$thumbnail.url,t=t.replace("/s72-c/","/w"+box_width+"-h"+box_height+"-c/")}catch(e){s=o.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),t=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_box}var i=(x=o.published.$t).substring(0,4),r=x.substring(5,7),n=x.substring(8,10),l=new Array;l[1]="January",l[2]="February",l[3]="March",l[4]="April",l[5]="May",l[6]="June",l[7]="July",l[8]="August",l[9]="September",l[10]="October",l[11]="November",l[12]="December",document.write('<ul class="tech_thumbs">'),document.write("<li>"),document.write('<div class="tech_box"><a href="'+u+'"><img width="'+box_width+'" height="'+box_height+'" alt="'+f+'" src="'+t+'"/></a><span class="tech_title"><a href="'+u+'" target ="_top">'+f+"<p>"+l[parseInt(r)]+" "+n+", "+i+" </p></a></span></div>"),document.write("</li>"),document.write("</ul>")}for(h=1;h<numtech2;h++){f=(o=e.feed.entry[h]).title.$t;if(h==e.feed.entry.length)break;for(m=1;m<o.link.length;m++){if("replies"==o.link[m].rel&&"text/html"==o.link[m].type)o.link[m].title,o.link[m].href;if("alternate"==o.link[m].rel){u=o.link[m].href;break}}try{g=o.media$thumbnail.url.replace("/s72-c/","/w"+box_width2+"-h"+box_height2+"-c/")}catch(e){s=o.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),g=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_box2}var i=(x=o.published.$t).substring(0,4),r=x.substring(5,7),n=x.substring(8,10);document.write('<ul class="tech_thumbs2">'),document.write("<li>"),document.write('<div class="tech_box2"><a href="'+u+'"><img width="'+box_width2+'" height="'+box_height2+'" alt="'+f+'" src="'+g+'"/></a><span class="tech_title tech_title2"><a href="'+u+'" target ="_top">'+f+" <p>"+l[parseInt(r)]+" "+n+", "+i+"</p></a></span></div>"),document.write("</li>"),document.write("</ul>")}};
var numtech=1,numtech2=3,box_width=629,box_height=350,box_width2=314,box_height2=170;
var no_box = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_yrwDz3iHVCB9DINKIOSeqabCY3a-uqyNsPMi5sBbgo5ubq1QLJWAKIqQ6O23b9pBdeN57xbWL5ekPVP5h25reykLgjb9hA7VMyKaIhUJkhgNX44A-V2EEnhrNg2_2m6oBgx_lOC5Pyg/s1600/tech1.jpg';
var no_box2 = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmUPaD7kBdEMymuVBNxv7lHSxZqWtJUmTq6bf6PN5IEeIOq9nCbuq-Njt_gAlKMzDfaMSxFXr-EaiYLyGMsiOJwtkKsyfIn_b9J9516JidoEPUeoNQdcmstszUUDiHAe2ytrVJF8SRlCM/s1600/tech2.jpg';
//]]>
</script>
</b:if>Pay attention to the code that is marked, for box_width = 629 box_height = 350 box_width2 = 314 and box_height2 = 170 height and width according to the template you are using.
Then for the caller code, add the code below freely anywhere as long as it's inside <body>and</body>
<b:if cond='data:view.isHomepage'>
<div id='featured-wrapper'>
<b:section class='featured' id='featured' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML200' locked='false' title='' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'>Featured</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=published&alt=json-in-script&callback=labelthumbs\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</b:if>Examples like the image below which was added to the post markup above Blog1
<div class='site-mainku' id='mainku' role='main'>
...
...
<b:if cond='data:view.isHomepage'>
<div id='featured-wrapper'>
<b:section class='featured' id='featured' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML200' locked='false' title='' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'>Featured</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=published&alt=json-in-script&callback=labelthumbs\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</b:if>
...
...
<b:section class='mainblogsec' id='mainblogsec' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1'>Click the Save theme button then click the Layout menu (refresh page) on the Blogger dashboard> Click edit on the featured widget
Then rename the Featured label with the name of the label you want to appear.
Done.
Click the Result button below to see the results
So from Reva for How to Install Featured Post by Label on the Blog , thank you for visiting and hopefully useful.
