Memasang Widget Recent Post Menurut Label Di Blog

Memasang Widget Recent Post Berdasarkan Label - Setelah sebelumnya aku membagikan template terus menerus, kini aku akan membagian sebuah widget yang berfungsi menampilkan postingan terbaru pada kategori tertentu. Widget Recent Post ini yaitu modifikasi dari Recent Post by Label buatan Arlina yang sudah aku 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 dapat 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 aba-aba di bawah ini sempurna di atas aba-aba </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 sempurna di atas aba-aba </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="Memasang Widget Recent Post Berdasarkan Label di Blog Memasang Widget Recent Post Berdasarkan Label di Blog" src="'+u+'"/></div></a>'),document.write('<span class="blanter_title"><a href="'+n+'" sasaran ="_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" sasaran ="_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="Memasang Widget Recent Post Berdasarkan Label di Blog Memasang Widget Recent Post Berdasarkan Label di Blog" src="'+x+'"/></div></a>'),document.write("<li>"),document.write('<span class="blanter_title blanter_title2"><a href="'+n+'" sasaran ="_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" sasaran ="_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/AVvXsEiO6-fI96apK7VKI_Qlq5X6nQ_948i1kPSI58mt_1yfa_P-j_uU04eYXysrLfgrCQ0R7FzX64B5R0YYX4wZOxzmKgkpPds7bddZAhHVEUggMNwvSrw0rDtJQpR4atTFTIVGo9kJxIRwdkk/s320/blanter_thumb.png",no_thumb2="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRitfWHliqbdmcdWuVqCVDJEeXXWSDrcNZArv80moiEmoPodJly2HtLYlQVKF7iUporWTiOsc6enCG_hY2tD-8zNd2O82iOcnSJOw_UrPptepkbRTYjuMELW_yLM71FKw3WU2Z_oZ8NPk/s1600/blanterthumb_small.png"; </script>

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

3. Lihat Gambar di bawah ini untuk meletakan aba-aba 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.

Sumber https://www.idblanter.com