Cara Membuat Featured Post di Blogger

Saat ini kita sering melihat blog yang menggunakan Featured Post di halaman depan blog (Homepage). Ada berbagai jenis dan model Featured Post, Ada Featured Post Tab Slider, Featured Post Slider Simple, Featured Post by Label, Featured Post Slider Otomatis dan yang terakhir Featured Post Blogger Responsive.

Sebenarnya perlu atau tidak blog menggunakan Featured Post?
Perlu dan tidak, tergantung nice blog Anda. Jika blog Anda adalah blog personal saya rasa tidak perlu, tetapi jika blog Anda adalah blog informasi, tutorial atau berita, saya rasa perlu.

Featured Post bisa menarik perhatian pembaca saat membuka halaman homepage. karena umumnya Featured Post memiliki tampilan dan keunikan sehingga menarik perhatian pengunjung.

Kali ini saya ingin memberikan tutorial Cara Memasang Featured Post by Label di Halaman Depan (homepage) Blog. Mungkin di lain waktu saya akan membuatkan tutorial versi yang lainnya.

Cara Memasang Featured Post by Label di Halaman Depan Blog

1. Tema > Edit HTML
2. Pasang kode CSS & Javascript Featured Post by Label berikut ini di atas kode </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
div#featured-posts-section{max-height:350px;overflow:hidden;background:#fff;}
#featured-posts-section{max-height:350px;overflow:hidden;margin:0 auto 20px}
.featured-post a{font-size:1.2em;color:#fff;}
.featured-post a:hover{color:#fff;text-decoration:underline;}
.main-post.featured-post a{margin:0;font-size:17px}
.featured-post .col-post{float:left;position:relative;overflow:hidden;margin:0 25px 0 0}
.featured-post .secondary-post{background:#dadada;width:32%;margin:0 0 20px 0;transition:all .4s}
.featured-post .main-post{background:#dadada;width:65%;padding:0;transition:all .4s}
.featured-post .main-post:before,.featured-post .secondary-post:before{bottom:0;content:&quot;&quot;;display:block;height:50%;width:100%;position:absolute;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%)}
.featured-post .main-post:after,.featured-post .secondary-post:after{content:&#39;&#39;;z-index:1;height:100%;width:100%;background:rgba(0,0,0,0.2);opacity:0;position:absolute;top:0;left:0;border-radius:50%;transform:scale(0,0);transition:all .4s}
.featured-post .main-post:hover:after,.featured-post .secondary-post:hover:after{opacity:1;transform:scale(1.5,1.5)}
.featured-post span{background:#c00;display:inline-block;color:#fff;font-style:normal;position:absolute;transition:all .4s;font-size:11px;line-height:1.4;padding:3px 6px;top:10px;left:10px;z-index:2}
.featured-post .main-post:hover span,.featured-post .secondary-post:hover span{background:#4aa3df;}
.featured-post img{height:100%;transition:all .5s}
.featured-post .main-post img{height:350px;width:100%;object-fit:cover;}
.featured-post .secondary-post img{height:165px;object-fit:cover;width:100%;}
.featured-post .main-post:hover img,.featured-post .secondary-post:hover img{backface-visibility:hidden;transform-style:preserve-3d;}
.featured-post header{position:absolute;bottom:0;left:0;right:0;padding:20px;z-index:2;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiunjJ_0TDAPhyphenhyphenBLY1u7bzHCMA6HthnXwz-BfFrTAdEggZgTrsq5YG9LQXVs9Kb-X5gmjJFsz5swqkbFkaADS6D31jEKO6ho5Fpypqnzwkkrn-36HWC_VjMe6Zg4NmhfRbALwYcGjVqhkh2/s1600/transparant.png);}
.featured-post .secondary-post header{padding:10px}
.featured-post header h3{font-size:22px;}
.featured-post h4{font-size:15px;}
span.label-info a.label-block:nth-child(n+2),.showpageOf {display:none;}
@media screen and (max-width:768px) {}
@media screen and (max-width:640px) {}
@media only screen and (max-width:1024px){
div#featured-posts-section{padding:0}
}
@media only screen and (max-width:800px){
div#featured-posts-section{max-height:none}
.featured-post .main-post{width:100%;margin-bottom:10px}
.featured-post .secondary-post{width:50%}
.featured-post .secondary-post img{width:100%}
}
@media only screen and (max-width:600px){
.featured-post .main-post img{height:250px}
.featured-post .secondary-post{width:100%}
.featured-post .main-post h3.entry-title{font-size:16px;margin:0 10px;line-height:normal}
.featured-post .main-post h3.entry-title a{line-height:1.3em}
.featured-post header{padding:10px 0 5px}
}
@media only screen and (max-width:300px){
.featured-post .main-post h3.entry-title {font-size: 20px;}
}
</style>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(e,t){for(var s=e.split("<"),r=0;r<s.length;r++)-1!=s[r].indexOf(">")&&(s[r]=s[r].substring(s[r].indexOf(">")+1,s[r].length));return s=s.join(""),s=s.substring(0,t-1)}function sliderposts(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;for(var t=0;t<maxpost;t++){var r,i,n=e.feed.entry[t],l=n.category[0].term,o=n.title.$t;if(t==e.feed.entry.length)break;for(var m=0;m<n.link.length;m++)if("alternate"==n.link[m].rel){i=n.link[m].href;break}for(var m=0;m<n.link.length;m++)if("replies"==n.link[m].rel&&"text/html"==n.link[m].type){r=n.link[m].title.split(" ")[0];break}if("content"in n)var g=n.content.$t;else if("summary"in n)var g=n.summary.$t;else var 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 h=[1,2,3,4,5,6,7,8,9,10,11,12],p=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],f=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),u=(postdate.split("-")[0],0);u<h.length;u++)if(parseInt(f)==h[u]){f=p[u];break}if(0==t){var v='<div class="main-post col-post"><a href="'+i+'"><span class="blue">'+l+'</span><img src="'+img[t]+'" height="350" width="640" alt=""></img></a><header><h3 class="entry-title"><a href="'+i+'" title="">'+o+"</a></h3></header></div>";document.write(v)}else{var v='<div class="secondary-post col-post" style="margin-right:0"><span class="blue">'+l+'</span><a class="hover_play_small" href="'+i+'"><img src="'+img[t]+'" height="200" width="320"></img></a><header><h4><a href="'+i+'">'+o+"</a></h4></header></div>";document.write(v)}j++}}imgr=new Array,imgr[0]="http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif",showRandomImg=!0,aBold=!0,summaryPost=150,summaryTitle=50,numposts1=10,featured_numposts="3";
//]]>
</script>
</b:if>

3. Copy kode HTML Featured Post by Label berikut ini di bawah kode penutup navigasi menu blog Anda, atau di atas kode seperti <div class='main-wrapper'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='ct-wrapper' id='featured-posts-section'>
<div class='featured-post padding clearfix'>
<script type='text/javaScript'>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Featured?max-results=&quot;+featured_numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=sliderposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</div>
</b:if>
<div class='clear'/>

Kode Featured (Warna Biru) adalah nama label. Anda bisa ganti dengan nama label posting yang akan ditampilkan.

Jika ingin menampilkan posting terbaru, maka kodenya diubah menjadi /feeds/posts/default.

4. Save!

Sekian dulu ya! pembahasan saya kali ini tentang Cara Membuat Featured Post di Blogger, mudah-mudahan bisa bermanfaat. Happy Blogging!