Cara Pasang Featured Post di Bawah Header

Nagalogia - Halo! Featured post adalah widget yang dapat menampilkan postingan terbaru atau beberapa postingan berdasarkan label, tampilan dari featured post ini berbentuk grid dan memiliki thumbnail yang cukup besar, widget ini kerap kali diletak di bawah header, tujuannya dipasang featured post adalah agar pengunjung dapat melihat postingan yang berbeda dari postingan terbaru. Ketika pengunjung melihat lebih dari satu postingan jelas hal ini menguntungkan bagi pemilik blog. 

 Apa kekurangan dari Featured Post? Sebenarnya kekurangan dari Featured Post adalah menambah beban server untuk load gambar karena Featured Post menampilkan gambar thumbnail, untuk mengakalinya cukup memasang script Lazy Load saja. Kamu penasaran untuk tampilan featured post nya? Bisa lihat gambar di bawah ini atau lihat saja di blog ini:

 

Cara Pasang Widget Featured Post di Bawah Header

Tahap 1: Memasang CSS dan JavaScript

Oke pada tahap ini kita akan memasang CSS dan JavaScript secara bersamaan, caranya: 

1. Login ke akun blogger kamu 

2. Masuk ke Tema > Edit HTML 

3. Setelah itu cari kode </head> lalu letak kan kode dibawah ini tepat di atas kode </head>

<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/* Featured Post by nagalogia.blogspot.com */
*,*:before, *:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.featured_nagawrap{display:inline-block;width:100%;max-width:100%;margin:0 auto 20px auto;overflow:hidden;max-height:410px}.featured_nagalogia{display:block;position:relative;float:left;overflow:hidden;height:410px}.featured_nagalogia.first{border-radius:10px;width:42.7%;margin-right:7px}.featured_nagalogia.second{width:25%;margin-right:7px;border-radius:10px;}.featured_nagalogia.third,.featured_nagalogia.fourth{border-radius: 10px;width:30%;height:205px}.featured_nagalogia.third{border-radius:10px;margin-bottom:7px}.featured_nagalogia a{display:block;color:rgb(255,255,255);position:relative;vertical-align:bottom;z-index:1;height:100%}.featured_nagalogia a:before{width:100%;height:100%;position:absolute;content:&#39;&#39;;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_nagalogia:hover a:before{opacity:1}.featured_nagalogia 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_nagawrap span{position:static;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_nagalogia.first span{background:#679e37}.featured_nagalogia.second span{background:#f8a724}.featured_nagalogia.third span{background:#029ae4}.featured_nagalogia.fourth span{background:#e53935}.featured_nagalogia 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_nagalogia a .blog_contents h3:hover{text-decoration:underline}.featured_nagalogia.first a .blog_contents h3{font-size:22px}.featured_nagalogia .feat-img{width:100%;height:100%;background-size:cover;background-position:50%;-webkit-backface-visibility:hidden;transition:all .3s}.featured_nagalogia:hover .feat-img{transform:rotate(-3deg) scale(1.2);-webkit-filter:blur(2px);filter:blur(2px)}
@media only screen and (max-width:768px){
.featured_nagawrap{max-height:initial}.featured_nagalogia.second,.featured_nagalogia.first,.featured_nagalogia.third,.featured_nagalogia.fourth{width:100%;height:300px;margin:0;margin-bottom:1px}.featured_nagalogia a .blog_contents{left:15px;right:15px;bottom:10px}.featured_nagalogia.first a .blog_contents h3,.featured_nagalogia a .blog_contents h3{font-size:20px}}
</style>
<script type='text/javascript'>
//<![CDATA[
// Featured post by blogajaib.xyz
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_nagawrap">');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_nagalogia 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_nagalogia 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_nagalogia 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_nagalogia 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>

Tahap 2: Memasang Kode Pemanggil

Setelah itu kamu letak kode dibawah ini sesuai keinginan, apakah dibawah </header> atau ditempat lain, misalnya Featured Post di blog ini diletak dibawah kode <div id='post-wrapper'>

<b:if cond='data:view.isHomepage'>
<div class='featured_nagaz' id='featured_nagawrap'>
<div class='ct-wrapper'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Informasi?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=recentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</div>
</b:if>

Perhatikan kata yang bertanda merah, silahkan ubah kata tersebut sesuai nama Label yang ingin ditampilkan, setelah itu Simpan template. Oke, saya rasa cukup sampai disini, jika ada pertanyan jangan sungkan untuk komen di bawah.