Cara Membuat 'Recent Post by Label - Featured Post' di Homepage Blog

Baca Juga

Cukup banyak desain tampilan Featured Post by Label yang bisa digunakan untuk mengubah tampilan halaman depan blog.

Blogger juga menyediakan widget khusus Featured Post, namun hanya menampilkan satu artikel.

Kali ini CB berbagi kode dan cara memasang Recent Post by Label - Featured Post on Homepage, sehingga tampilan halaman depan blog bergaya majalah (magazine style). Ini penampilannya:

Kita bisa menampilkan postingan terbar dari label atau kategori tertentu di homepage.

Widget ini cocok buat blog dengan niche "general blog" atau blog berita. Kodenya CB dapatkan di salah satu template blog Maskolis dan dimodifikasi.

Cara Membuat Recent Post by Label 

1. Tema > Edit HTML
2. Copas kode berikut ini di atas kode </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Recent Post by Label */
.featuredpost ul{list-style:none;margin:0;padding:0}
.featuredpost li{margin:0;padding:0;}
.featuredpost .widget{margin:0;padding:0}
.featuredpost .widget-content{border:1px solid #e9e9e9;padding:20px;margin:0;word-wrap:break-word;overflow:hidden}
.featuredpost h2{position:relative;margin:0;padding:15px 20px;font-size:16px;font-weight:700;text-transform:uppercase;color:#333;border:1px solid #e9e9e9;border-bottom:0;background: #fafafc;}
.featuredpost h2:before{content:&#39;\f115&#39;;right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 0;color:#ff675c;}
.featuredpost .index{font-size:10px;float:right;font-weight:400;}
.featuredpost .index a{flex;
    color: #181818;
    padding: 3px 8px;
    border-radius: 2px;
    font-weight: 400;
    font-size: 14px;}
.featuredpost .index a:hover{background:#039be5;color:#fff;border-color:transparent}
.featuredpost .index a:after{content:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px}
.new_left{width:280px;width:45.7%;float:left;margin:0;padding:0 20px 0 0;border-right:1px solid #e9e9e9}
.new_right{width:250px;width:47.5%;float:right;margin:0;padding:0}
ul.new_thumbs{margin:0;padding:0}
ul.new_thumbs li,ul.new_thumbs2{margin:0;padding:0}
ul.new_thumbs .cat_thumb{position:relative;margin:0 0 15px;padding:0;width:250px;height:200px}
ul.new_thumbs .cat_thumb img{height:auto;width:100%;transition:all 0.2s}
ul.new_thumbs .cat_thumb img:hover{opacity:.9;}
ul.new_thumbs2 li{margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #e9e9e9}
ul.new_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0}
ul.new_thumbs2 .cat_thumb2{float:left;margin:0 10px 0 0;width:62px;height:72px;overflow:hidden}
ul.new_thumbs2 .cat_thumb2 img{height:auto;transition:all .2s}
ul.new_thumbs2 .cat_thumb2 img:hover{opacity:.9;}
span.new_title{font-family:&#39;Roboto Condensed&#39;,sans-serif;font-size:20px;font-weight:700;display:block;margin:0 0 10px;line-height:normal;text-transform:none}
span.new_title2{font-size:14px;line-height:1.4em;margin:0 0 3px}
span.new_title a{color:#666}
span.new_title a:hover{color:#ff675c;text-decoration:none}
span.new_summary{display:block;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0 0}
span.new_meta{display:none;font-family:&#39;Roboto Condensed&#39;,sans-serif;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase}
span.new_meta a{color:#aaa;display:inline-block}
span.new_meta_date,span.new_meta_comment,span.new_meta_more{display:inline-block;margin-right:10px}
span.new_meta_comment a:before{content:&quot;\f0e6&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
span.new_meta_comment a:hover{color:#ff675c!important}
span.new_meta_date:before{content:&quot;\f133&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
ul.new_thumbs2 li a:hover,ul.new_thumbs li a:hover{color:#ff675c;text-decoration:none}
@media screen and (max-width:1024px) {
.featuredpost .widget-content {padding:20px 25px;}
.new_left {width:50%;float:left;margin:0;padding:0;border-right:none}
.new_right {width:46%;float:right;margin:0;padding:0;}
ul.new_thumbs .cat_thumb {width:100%;height:auto;}
ul.new_thumbs .cat_thumb img {width:100%;height:auto;}
ul.new_thumbs li {margin:0;padding:0;}
span.new_title2 {font-size:20px;line-height:1.2em;}
span.new_summary {font-size:14px;}}
@media only screen and (max-width:768px){
.featuredpost .widget-content {padding:10px 20px}
.new_right{width:100%;float:left;margin:0;padding:0}
ul.new_thumbs2 li{border-bottom:0}
span.new_summary,.new_left{display:none}
span.new_title{margin:0 0 5px}
ul.new_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0}
span.new_title2{font-size:18px;line-height:1.2em}}
@media only screen and (max-width:480px){
#featuredpost-wrapper {display:none}}
@media only screen and (max-width:320px){
.featuredpost .widget-content {padding:10px 20px}
.featuredpost h2 {padding:10px 20px 1px 20px}
.new_right{width:100%;float:left;margin:0;padding:0}
ul.new_thumbs li{margin:0 0 10px;padding:0 0 10px;}
span.new_title2{font-size:18px;line-height:1.2em}}
@media screen and (max-width:260px) {
.featuredpost .widget-content {padding:10px}
.featuredpost h2 {padding:10px 10px 1px 10px}
.new_right{width:100%;float:left;margin:0;padding:0}
ul.new_thumbs li{margin:0 0 10px;padding:0 0 10px;}
span.new_title2{font-size:18px;line-height:1.2em}}
</style>
</b:if>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=0;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var u;try{u=r.media$thumbnail.url,u=u.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10),g=new Array;g[1]="January",g[2]="February",g[3]="March",g[4]="April",g[5]="May",g[6]="June",g[7]="July",g[8]="August",g[9]="September",g[10]="October",g[11]="November",g[12]="December",document.write('<span class="new_left">'),document.write('<ul class="new_thumbs">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+n+'"><div class="cat_thumb"><span class="rollover"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+m+'" src="'+u+'"/></div></a>'),document.write('<span class="new_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="new_meta">'),1==showpostdate&&(v=v+'<span class="new_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comments"),"0 Comments"==l&&(l="0 Comments"),showcomment='<span class="new_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="new_meta_more"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="new_summary">'),"content"in r)var y=r.content.$t;else if("summary"in r)var y=r.summary.$t;else var y="";var k=/<\S[^>]*>/g;if(y=y.replace(k,""),1==showpostsummary)if(y.length<numchars)document.write(""),document.write(y),document.write("");else{document.write(""),y=y.substring(0,numchars);var $=y.lastIndexOf(" ");y=y.substring(0,$),document.write(y+"..."),document.write("")}document.write("</span>"),document.write("</li>"),document.write("</ul>"),document.write("</span>")}document.write('<span class="new_right">'),document.write('<ul class="new_thumbs2">');for(var e=1;e<numposts2;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=1;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var x;try{x=r.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),x=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);1==showpostthumbnails2&&document.write('<a href="'+n+'"><div class="cat_thumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+m+'" src="'+x+'"/></div></a>'),document.write("<li>"),document.write('<span class="new_title new_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="new_meta new_meta2">'),1==showpostdate2&&(v=v+'<span class="new_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 Comment"==l&&(l="1 Comments"),"0 Comment"==l&&(l="0 Comments"),showcomment='<span class="new_meta_comment new_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="new_meta_more new_meta_more2"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write("</li>")}document.write("</ul>"),document.write("</span>")}
//]]>
</script>
<script type='text/javascript'>
var numposts=1,numposts2=7,showpostthumbnails=!0,showpostthumbnails2=!1,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!1,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=150,thumb_width=280,thumb_height=200,thumb_width2=62,thumb_height2=62,no_thumb=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipHaSFFEpe79mgmNJ-hoRYNi5tTpN1MSLZn5eXcFHH7C-FDvobg-48FKpsJVQVQHxjSby0cUtgqj9ztqXkcXaiUorJbK49I2zHC1vDLtRdU67LVdWr4Fhk6iNkDie-Zkg6O1TkeEqwCz3v/s220-Ic42/noimage.png&quot;,no_thumb2=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFmiTpod3sM1WqXh278XW3l9G-QLO1aebOvPojAq8tHfdUAwbyjNjfKfofKe7nP0S8vOpbWroyatdHIxashGhMrDh2VB07TumZXZFKm8EZGmdzuXBNT5kKWxmRqNT8ogruCdp7cHSZRqZh/s220-Ic42/img_not_available.png&quot;;
</script>
</b:if>
</b:if>

3. Copas kode berikut ini di bawah kode <div id='main-wrapper'> atau yang serupa dengannya.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
      <div id='featuredpost-wrapper'>
        <b:section class='featuredpost' id='featuredpost' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML80' locked='false' title='Blogging' type='HTML'>
            <b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;Index&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</b:includable>
          </b:widget>
        </b:section>
      </div>
<!--YOU CAN ADD CAROUSEL WIDGET HERE-->
</b:if>

4. Save! Simpan template

5. Klik Layout > pilih HTML/JavaScript atau "Edit" Featured Post

6. Masukkan nama Label, misalnya Featured, Tips, atau Nama Label lainnya.
7. Save!

Demikian Cara Membuat 'Recent Post by Label - Featured Post'  di Homepage Blog. Good Luck & Happy Blogging! (www.contohblog.com).*