Cara Memasang Featured Post by Label di Halaman Depan Blog

Baca Juga

Cara Memasang Featured Post by Label di Halaman Depan Blog

Kita bisa memasang widget Featured Post yang sudah disediakan Blogger di Halaman Depan Blog. Namun, hanya satu posting saja yang bisa ditampilkan.

Jika ingin menampilkan lebih dari satu, berikut ini kode dan cara memasangnya. Penampilannya seperti gambar berikut ini. Sudah dibuat responsive.

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/AVvXsEhFzk37CSOmUWMW7RkRD1ccEoEms3VqhvvwBavFecGhX0bKJfNqp0iOZBIRRmKKEN4tUOmy6Pbube_35rE2duBCNlqk30iFs_gj8GnvxYIsEAX_Gt3nNc0kZR7tJGs_TvL3c3bGEkYgunRu/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. Copas 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 warna merah (Featured) 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!

Demikian Cara Memasang Featured Post by Label di Halaman Depan Blog. Lihat juga Desain Featured Post lainnya.

Good Luck & Happy Blogging! (www.contohblog.com).*