Cara Memasang Widget Recent Post By Label

Cara Memasang Widget Recent Post by Label - Kali ini akan menyebarkan widget yang cukup menarik untuk di pasang pada blog. Widget recent post by label ini berfungsi untuk menampilkan postingan terbaru menurut label tertentu.

Widget ini nantinya akan tampil sempurna di bawah postingan pada halaman index atau halaman utama blog,

Bagi yang tertarik silakan ikuti langkah berikut :

1.Login ke Blogger > Buka Template > Klik Edit HTML > Tambahkan instruksi di bawah ini sebelum </head>

<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 removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}strx=s.join("")}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...'}function createSummaryAndThumb(pID){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var summ=summary_noimg;if(img.length>=1){imgtag='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ=summary_img}var summary=imgtag+'<div>'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML=summary}function tagpostthumbs(json){document.write('<ul class="taglabel">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href}if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}var thumburl;try{thumburl=entry.media$thumbnail.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d}else thumburl='http://2.bp.blogspot.com/-zif4lgUoNwY/VcmmKoOAbnI/AAAAAAAAK6U/whzhPe-8EDY/s1600/thumbn.png'}var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(tagpostthumbnails==true)document.write('<a href="'+posturl+'"><img alt="Cara Memasang Widget Recent Post by Label Cara Memasang Widget Recent Post by Label" title="Cara Memasang Widget Recent Post by Label" class="tagpost_thumb" src="'+thumburl+'"/></a>');document.write('<a href="'+posturl+'" title="Cara Memasang Widget Recent Post by Label">'+posttitle+'</a><br>');if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(tagpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('')}else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('')}}var towrite='';var flag=0;document.write('<br>');if(tagpostdate==true){towrite=towrite+cdday+'-'+monthnames[parseInt(cdmonth,10)]+'-'+cdyear;flag=1}if(tagpostcommentnum==true){if(flag==1){towrite=towrite+' | '}if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext=''+commenttext+'';towrite=towrite+commenttext;flag=1}if(tagpostmore==true){if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" title="Cara Memasang Widget Recent Post by Label">More »</a>';flag=1}document.write(towrite);document.write('</li>');if(tagpostseparator==true)if(i!=(numposts-1))document.write('')}document.write('</ul>')} //]]> </script> </b:if> </b:if>

2. Selanjutnya tambahkan instruksi di bawah ini sebelum ]]></b:skin> atau </style>

/* CSS Recent Post by Label */ img.tagpost_thumb{float:left;border:1px solid #ddd;margin-right:8px;height:60px;width:60px;padding:2px;transition:all .6s} img.tagpost_thumb:hover{border-color:#aaa;} .taglabel{float:left;width:100%;padding:0;margin:0} ul.taglabel li{padding:5px 0;min-height:73px} #tagpost-left .widget ul,#tagpost-right .widget ul,#tagpost-bottom .widget ul{margin-top:-5px!important} #tagpost-left .widget,#tagpost-right .widget,#tagpost-bottom .widget{position:relative;display:block;border:1px solid #ccc;float:left;padding:1.5%} #tagpost-left h2,#tagpost-right h2,#tagpost-bottom h2{background:#333;color:#fff;font-family:inherit;font-weight:bold;font-size:15px;letter-spacing:.5px;position:relative;display:block;margin:0 0 10px 0;padding:15px} #tagpost-left .widget{margin-right:5px} #tagpost-bottom .widget{margin-top:10px} #tagpost-left .widget ul,#tagpost-right .widget ul,#tagpost-bottom .widget ul{list-style:none;margin:0;padding:0} #tagpost-left .widget ul li,#tagpost-right .widget ul li,#tagpost-bottom .widget ul li{display:block;font-size:12px;font-family:inherit;border-bottom:1px solid #ddd;margin:10px 0;padding:0;transition:all .6s} #tagpost-left .widget ul li:hover,#tagpost-right .widget ul li:hover,#tagpost-bottom .widget ul li:hover{border-bottom-color:#bbb;} #tagpost-left .widget li:last-child,#tagpost-right .widget li:last-child,#tagpost-bottom .widget li:last-child{border-bottom:none;margin:10px 0 0 0} #tagpost-left .widget ul li a,#tagpost-right .widget ul li a,#tagpost-bottom .widget ul li a{font-size:13px;color:#333;font-weight:bold} #tagpost-left .widget ul li a:hover,#tagpost-right .widget ul li a:hover,#tagpost-bottom .widget ul li a:hover{color:#444;text-decoration:underline;} #tagpost-left .widget,#tagpost-right .widget{width:48%;margin:10px 5px} #tagpost-bottom .widget{width:98.4%}

Catatan : Sebelumnya di template demo sudah memasang css ini

*, *:before, *:after {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

3. Tambahkan markup widget di bawah ini sempurna di bawah widget blog1 kalau kesulitan silakan lihat screenshot di bawah ini

<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:section class='tagpost-left' id='tagpost-left' preferred='yes'/> <b:section class='tagpost-right' id='tagpost-right' preferred='yes'/> <b:section class='tagpost-bottom' id='tagpost-bottom' preferred='yes'/> </b:if> </b:if>

4. Simpan template.

5. Selanjutnya buka Tata Letak > Silakan tambahkan widget gres yang berada sempurna di bawah widget Posting Blog > Tambahkan instruksi di bawah ini di dalamnya

<script type='text/javascript'>     var numposts = 5; // Jumlah Post yang akan ditampilkan     var tagpostthumbnails = true; // Ganti "false" untuk tidak menampilkan     var tagpostmore = false;     var tagpostseparator = true;     var tagpostcommentnum = true; // Ganti "true" untuk menampilkan      var tagpostdate = true; // Ganti "true" untuk menampilkan      var tagpostsummary = false; // Ganti "false" untuk tidak menampilkan      var numchars = 50; // Jumlah huruf deskripsi yang di tampilkan </script> <script type="text/javascript" src="/feeds/posts/default/-/Featured?orderby=updated&amp;alt=json-in-script&amp;callback=tagpostthumbs"></script>

Catatan : Ganti instruksi yang ditandai dengan nama label.

Jika ingin memunculkan postingan terbaru, silakan ganti feed di atas dengan instruksi ini

<script type="text/javascript" src="/feeds/posts/default?orderby=updated&amp;alt=json-in-script&amp;callback=tagpostthumbs"></script>

6. Simpan Widget dan lihat hasilnya.

Result

Untuk tampilan widget dapat teman kreasikan kembali. Sekian mengenai Cara Memasang Widget Recent Post by Label, biar bermanfaat.

Share this post