Memasang Widget Recent Post Berdasarkan Label di Blog

17 March 2016

Memasang Widget Recent Post Berdasarkan Label - Setelah sebelumnya saya membagikan template terus menerus, sekarang saya akan membagian sebuah widget yang berfungsi menampilkan postingan terbaru pada kategori tertentu. Widget Recent Post ini adalah modifikasi dari Recent Post by Label buatan Arlina yang sudah saya modifikasi bentuknya menjadi berbeda.

Selain menampilkan postingan, recent post ini juga menampilkan Jumlah Komentar (Khusus Komentar Blogger) dan Tanggal Posting, Jumlah artikel yang ingin di tampilkan juga bisa di tambahkan atau di kurangkan.

Recent Post kali ini juga responsive di segala macam device.

Berikut Tampilan Recent Post Berdasarkan Label :

Live Preview

Cara Memasang Widget Recent Post Berdasarkan Label di Blog

1. Buka Blogger > Template > Edit HTML > Lalu simpan kode di bawah ini tepat 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'>
/* CSS Recent Post by Label */
.blanterlabel1 ul,.blanterlabel2 ul{list-style:none;margin:0;padding:0}
.blanterlabel1 li,.blanterlabel2 li{margin:0;padding:0}
.blanterlabel1 .widget,.blanterlabel2 .widget{font-family:'Open Sans',sans-serif!important;margin:0;padding:0}
.blanterlabel1 .widget-content,.blanterlabel2 .widget-content{padding:0;margin:0;word-wrap:break-word;overflow:hidden}
.blanterlabel1 h2,.blanterlabel2 h2{position:relative;margin:0;padding:15px 0;font-size:13px;font-weight:400;border-bottom:1px solid #ddd}
.blanterlabel2 h2{margin:20px 0 0}
.data-title:before{content:'\f143';right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:400;margin:0 10px 0 0;color:#07ACEC}
.data-title{color:#07ACEC;border:1px solid #07ACEC;padding:3px 8px;border-radius:2px;margin-right:10px}
.blanterlabel1 .index,.blanterlabel2 .index{font-size:13px;font-weight:400}
.blanterlabel1 .index a,.blanterlabel2 .index a{color:#07ACEC;padding:3px 8px;border-radius:2px;font-weight:400;border:1px solid #29b6f6;color:#07ACEC;border-color:#07ACEC}
.blanterlabel1 .index a:hover,.blanterabel2 .index a:hover{background:#07ACEC;color:#fff;border-color:transparent}
.blanterlabel1 .index a:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-left:5px}
.blanterlabel2 .index a:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-left:6px}
.blanterlabel2 span.blanter_meta_comment a:hover{color:#07ACEC!important}
.blanterlabel2 ul.blanter_thumbs li a:hover,.blanterlabel2 ul.blanter_thumbs2 li a:hover{color:#07ACEC;text-decoration:none}
.blanter_left{margin:0;padding:0;border-right:1px solid #fff}
.blanter_left .cat_thumb{float:left;margin-right:10px!important}
.blanter_right{float:left;margin-top:-35px;padding:0}
ul.blanter_thumbs{margin:0;padding:0}
ul.blanter_thumbs li,ul.blanter_thumbs2{margin:0;padding:0}
ul.blanter_thumbs .cat_thumb{position:relative;margin:0 0 15px;padding:0;width:280px;height:200px}
ul.blanter_thumbs .cat_thumb img{height:auto;width:100%;transition:all .2s}
ul.blanter_thumbs .cat_thumb img:hover{opacity:.9}
ul.blanter_thumbs2 li{margin:0 0 10px;padding:0 0 10px;width:27%;overflow:hidden;min-height:60px;float:left;margin-right:10px!important;border-bottom:1px solid #e9e9e9}
ul.blanter_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0}
ul.blanter_thumbs2 .cat_thumb2{float:left;margin:0 10px 0 0;height:72px;overflow:hidden}
ul.blanter_thumbs2 .cat_thumb2 img{height:60px;transition:all .2s}
ul.blanter_thumbs2 .cat_thumb2 img:hover{opacity:.9}
span.blanter_title{font-family:'Open Sans',sans-serif;font-size:18px!important;font-weight:700;display:block;margin:0 0 10px;line-height:normal;text-transform:none;max-height:45px;overflow:hidden}
span.blanter_title2{font-size:14px!important;font-weight:400!important;line-height:1.4em;margin:0 0 3px;max-height:38px}
span.blanter_title a{color:#333}span.blanter_title a:hover{color:#07ACEC;text-decoration:none}
span.blanter_summary{display:block;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0}
span.blanter_meta{display:block;font-family:'Open Sans',sans-serif;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase}
span.blanter_meta a{color:#aaa;display:inline-block}
span.blanter_meta_date,span.blanter_meta_comment,span.blanter_meta_more{display:inline-block;margin-right:10px}
span.blanter_meta_comment a:before{content:"\f0e6";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-right:5px}
span.blanter_meta_comment a:hover{color:#07ACEC!important}
span.blanter_meta_date:before{content:"\f133";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-right:5px}
ul.blanter_thumbs2 li a:hover,ul.blanter_thumbs li a:hover{color:#07ACEC;text-decoration:none}
@media only screen and (max-width:768px){.tanggal i,.tags i{color:#ff8000!important}.blanter_right{width:100%;float:left;margin:0;padding:0}span.blanter_title2{max-height:33px!important}ul.blanter_thumbs2 li{border-bottom:0;width:58%;overflow:hidden;min-height:60px}.blanterlabel1 .widget-content,.blanterlabel2 .widget-content{margin-top:10px}span.blanter_summary,.blanter_left{display:none}span.blanter_title a{font-weight:700}span.blanter_title{margin:0 0 5px}ul.blanter_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0}span.blanter_title2{font-size:18px;line-height:1.2em}}
@media only screen and (max-width:320px){ul.blanter_thumbs2 .cat_thumb2 img{width:80px;height:50px}.blanter_right{width:100%;float:left;margin:0;padding:0}ul.blanter_thumbs li{margin:0 0 10px;padding:0 0 10px}span.blanter_title2{font-size:18px;line-height:1.2em}}
@media screen and (max-width:260px){.blanter_right{width:100%;float:left;margin:0;padding:0}ul.blanter_thumbs li{margin:0 0 10px;padding:0 0 10px}span.blanter_title2{font-size:18px;line-height:1.2em}}
</style>
</b:if>
</b:if>

2. Letakan Javascript di bawah ini tepat di atas kode </head>

<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="blanter_left">'),document.write('<ul class="blanter_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="blanter_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="blanter_meta">'),1==showpostdate&&(v=v+'<span class="blanter_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comments"),"0 Comments"==l&&(l="0 Comments"),showcomment='<span class="blanter_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="blanter_meta_more"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="blanter_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="blanter_right">'),document.write('<ul class="blanter_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="blanter_title blanter_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="blanter_meta blanter_meta2">'),1==showpostdate2&&(v=v+'<span class="blanter_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 Comment"==l&&(l="1 Comments"),"0 Comment"==l&&(l="0 Comments"),showcomment='<span class="blanter_meta_comment blanter_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="blanter_meta_more blanter_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=9,showpostthumbnails=!0,showpostthumbnails2=!0,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!1,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=150,thumb_width=310,thumb_height=160,thumb_width2=100,thumb_height2=55,no_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqzBggC6Mowq0o4IRj1mkl3djNDHaDTvt-AY7a8_7zvy5AUifBu-NfRv4ft6zNpfbv_XYLjjUKmwsvp93gA8K_EYDVS6PouqcjhN5iQmH3MjV9yDgQQrC-PCrJubkNyrnjpXh1HoIVKr8/s320/blanter_thumb.png",no_thumb2="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEj5wXk908BegTXr6dxaZrOCOJVpMhaUUuxv7fWlB-mqrU6cG4i7vU1iwcjMlciU4_XDBuTzdhrCHPW4ICxHMxYU4PiFn2cFiXuYFpyfGGJhYwlQqzosf5Hg_QC_qO4VjigvuNs75TUuo/s1600/blanterthumb_small.png";
</script>

Kode yang ditandai merupakan pengaturan dari widget, silahkan sesuaikan dengan selera.

3. Lihat Gambar di bawah ini untuk meletakan kode HTML

- Kode HTML

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='blanterlabel1-wrapper'>
        <b:section class='blanterlabel1' id='blanterlabel1' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML80' locked='false' title='Berita' type='HTML'>
            <b:includable id='main'>
<h2><span class='data-title'><data:content/></span><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span></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>
<div id='blanterlabel2-wrapper'>
        <b:section class='blanterlabel2' id='blanterlabel2' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML81' locked='false' title='Info Menarik' type='HTML'>
            <b:includable id='main'>
<h2><span class='data-title'><data:content/></span><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span></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>
</b:if>

4. Simpan Template, dan selanjutnya buka Tata Letak > Klik Edit pada widget yang sudah ditambahkan tadi > Isi dengan nama label yang ingin di tampilkan

5. Simpan Widget dan Lihat hasilnya.

Baca Juga : Cara Membuat Tulisan di Postingan Tampil di Sidebar

Itulah Tutorial Cara Memasang Widget Recent Post Berdasarkan Label di Blog. Semoga bermanfaat.

Dunia Blanter