Cara Mudah Membuat Widget Recent Post Berdasarkan Label Blog

Untuk kali ini saya akan berbagi sebuah artikel tutorial yang berkaitan dengan dunia blogger sebuah artikel yang dapat membantu sobat membuat blog anda manjadi keren dan bagus, nah sesuai dengan judul artikel di atas ya kali ini saya akan membuat widget recent post berdasarkan label blog, jadi sebelum kita membahas ke topik utama yaitu bagaimana cara membuat widget recent post berdasarkan label apakah sobat sudah tahu apakah fungsi dari widget recent post ini? Ya mungkin dari sobat semua sudah ada yang tahu apa fungsi dari widget recent post ini dan tidak banyak juga yang belum mengetahuinya apa lagi bagi sobat yang baru bergabung di dunia blogger pastinya belum mengerti bukan, jadi saya akan mengulas sedikit manfaat dari widget recent post ini, manfaat jika kita memasang widget recent post adalah kita dapat membantu para pembaca situs anda dengan mudah menawarkan artikel terbaru yang nantinya akan muncul di widget recent post ini maka dari itu widget recent post ini sangat membantu para pembaca untuk mengetahui artikel mana yang paling bagus dan yang paling banyak d baca oleh pembaca lain dan dengan adanya widget recent post ini juga dapat meningkatkan visitor situs anda karena banyak nantinya dari para pembaca akan betah untuk berlama lama di situs blog anda dengan membaca berbagai macam artikel yang ada.


Jadi tanpa memperpanjang lagi dan kita langsung saja ke intinya dari sobat yang berminat untuk membuat dan memasang widget recent post ini di blog sobat masing-masing bisa mengikuti langkah-langkah di bawah ini dengan benar

Langkah-langkahnya :


1. Login ke akun blog anda
2. Pilih menu Template ⟶ Edit Template 
3. Setelah itu letakkan kode HTML di bawah ini tepat di atas kode : </head>

Kode HTML


<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>

4. Jika sudah letakkan lagi kode JavaScript di bawah ini tepat di atas kode : </head>

Kode JavaScript


<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="http://3.bp.blogspot.com/-bP9BhHzcg3c/VulaYI1KgPI/AAAAAAAADlY/an6hlFHd5BQAUhNQbriNvTLripE4v5EQA/s320/blanter_thumb.png",no_thumb2="http://2.bp.blogspot.com/-9deKCtKRtvU/VulaYPTKW6I/AAAAAAAADlU/wb9d_4ysGPIC-ytki80VChZiMPrz7Af2w/s1600/blanterthumb_small.png";
</script>

NOTE: Kode yang di tandai berwarna merah itu merupakan kode pengaturan dari widget recent post yang akan kita buat ini, anda dapat menyesuaikannya sesuai dengan selera anda masing-masing

5. Perhatikan gambar di bawah ini letakkan kode HTML di bawah sesuai dengan gambar di bawah ini :

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>

6. Jika sudah simpan template yang baru saja kita edit tadi
7. kemudian masuk ke menu "Tataletak" pilih "Tambahkan Gadget" dan setelah itu pilih widget "HTML/JavaScript" setelah itu isi dengan label yang anda inginkan selesai

8. Buka situs blog anda dan lihat hasil dari widget yang baru saja kita buat tadi
Source : http://www.idblanter.com/2016/03/memasang-widget-recent-post-berdasarkan-label.html
Cara Mudah Membuat Widget Recent Post Berdasarkan Label Blog