How to Add Featured Posts by Label in Blogger Template
Hello Friends, Welcome to Channel SEO Blog. I keep posting useful posts on this blog related to blogging, SEO tips, making money, blog design and customization and today I am going to share with you many great tips on how to install featured posts through labels on blogger templates. I have been
Yes guys, if your blogger template is not offering featured posts, then you can add Fearutred posts in this blogger template and also customize these Fearutred posts.
How to Add Featured Posts via Labels on Blogger
What is a featured post? (What is a featured post?)
Featured posts by friends are a kind of gadget. With its help we can display any good post on our blog.
This benefits us and our guests.
As we post our blog posts every day, the posts that people read the most go to the bottom of the list, so our visitors don't see them and they leave our site and go to other sites.
However, when we add a post or category to a featured post, our visitors can easily open and read the post.
How to Add Featured Posts via Labels on Blogger in Blogger Template
Follow the steps I provided to add featured posts to your blogger template.
1. Log in to Blogger.
2. Click on the Themes menu.
3. Click Edit HTML.
Copy the code below and paste it before </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/AVvXsEjpzSJBDfH5R42sVzvHV4_TFwugI37MRse-Ik9gG1DEbqYmdYXf67mddPvAxbFNnmWuYZ1isvUsVY7-4_h8Im4S_z8ilkl6fw9WsUgBZs6jFOrDwpWwBY8kWc9tbAWonf5r-hpHdW_ix8U/s1600/tech1.jpg'; var no_box2 = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNuSpHBxALTPq3t1f3UySeGYbnTf2nP0S3eZc-5D8UCnVstSmFpdb6tUX3VwDlTrABFF0W70_hrliK6DOCUmV36Ket9uIGsS8U1tV-t4MHABRWaSqw5DOX6P_AGy5i40mDmYxLUVfCQfM/s1600/tech2.jpg'; //]]> </script> </b:if>
Note: Find the code marked in the code above box_width = 629 box_height = 350 box_width2 = 314 and box_height2 = 170; According to your blogger template
Change its width and height.
Now find the marked code between <body> and </body> in the image below and replace it with the below code.
Note: After searching, if the marked code shown in the image is not found, paste the code in <body> and </body> where you want it to appear.
4. Save now.
<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>
5. Now click on blogger layout.
6. Click the Edit link of the Feature widget.
7. Instead of Featured, you enter the name of the label whose post you want to display then save it.
Refresh your site once.
Now you will start displaying featured posts on your site in blogger template.
0 Comments