On this occasion Namina will share a template that I have worked on for about a week and have just finished now. This template is the Katana Responsive Blogger Template .
I made this template with a simple concept because after yesterday I checked on Mediafire the In SEO Special Ramadan template is the number one template on this blog that has the highest number of downloads than other templates, and I am grateful for that.
So I began to understand what the user needed from the template I created, namely a blogger template with a simple, lightweight appearance and not too many widgets in it. This time, I continue the concept and hopefully it can be used comfortably by blogger friends.
Template Features
- Responsive
- Mobile Friendly
- Google PageSpeed Insights
- Google Testing Tools (Homepage)
- Google Testing Tools (Postpage)
- SEO Friendly
- Personal Blog
- 2 Column
- Featured Post Widget
- Breadcrumbs Schema.org
- Related Posts
- Responsive Menu Navigation
- ShareThis Share Button
- Newsletter Widget
- Back to top
- Shortcode
- Blogger and Disqus Comments
- Documentation
Download Link 2
How to Add Featured Post by Label on Blog
First login to Blogger >> Click the Themes menu and Edit HTML >> Then add the code below just before the code </head>
<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/* Featured By NQnia */
#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/AVvXsEiVlhlTcwrKzFCmgHdUbbxlYFXpcU46Z4NWOSkgr7GULkmsCxwEPaoAjxLxTf2YUPP1Hpf7zTbqXyOBIXh5br1dv0iSEi37tpXrfG-MBSXlMLxG1AefuOHTaMZju7Tt8WapC_NIWCpv-84/s1600/tech1.jpg';
var no_box2 = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Gy8lQ6OxD8bTgXLVSNQTOTY-eHvb8Hem1gRRq9Gp5VxGz_46cwnf9fxonAlQrzVaJJ5OwCRDojaqSAEsti8QFDpjhzY32S0QtQavHwyVtoqZk1md0zsbvKGqhuogo-jZYy_BB5grWfw/s1600/tech2.jpg';
//]]>
</script>
</b:if>
Pay attention to the code 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 is still in <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>
An example is 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 featured widgets
Then change the name of the Featured label with the name of the label that you want to appear.
Done.
Click the Results button below to see the results