How to Make a Recent Post Widget Per Label Tag Category - NewDroidTips

Friday, 7 December 2018

How to Make a Recent Post Widget Per Label Tag Category

How to Make a Recent Post Widget Per Label by Tag Category, this time we will update the blog widget tutorial, this awesome widget is from the Arlinadzgn blog titled How to install a recent post by label widget, but i make a little changes so it can be used or placed in the sidebar and other locations.

Cara Memasang Widget Recent Post Berdasarkan Tag Kategori

Okay without extending time, i make this turoeial just to keep it save here and for reader can easily searched. Here they are


Step by step install recent widget displays posts by label tags

Place the code below before
 </head>

<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="'+posttitle+'" title="'+posttitle+'" class="tagpost_thumb" src="'+thumburl+'"/></a>');document.write('<a href="'+posturl+'" title="'+posttitle+'">'+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="'+posttitle+'">More »</a>';flag=1}document.write(towrite);document.write('</li>');if(tagpostseparator==true)if(i!=(numposts-1))document.write('')}document.write('</ul>')}
//]]>
</script>

Then place the code below before
 ]]></b:skin>

/* 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%}

Finally, please place the widget code below as you wish

<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 = false;
    var tagpostcommentnum = false; // Ganti "true" untuk menampilkan 
    var tagpostdate = false; // Ganti "true" untuk menampilkan 
    var tagpostsummary = false; // Ganti "false" untuk tidak menampilkan 
    var numchars = 0; // Jumlah karakter 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>


Information:
Change the Featured text (which is yellow) with the Tag / Category you want

Hopefully this article can be useful tips for short blog install widget list posts based on label tag categories on blogger blogspot, thanks to arlinadzgn. If there are questions and corrections, write in the comments column below. thank you! NewDroidTips

Open Disqus Comments
Loading...