2 Cara Memasang Widget Recent Post by Kategori

"Cara Membuat Widget Recent Post Per Label by Tag Kategori, Cara pasang widget recent post by label, dapat ditempatkan di sidebar dan lokasi lain."

YZG 14 May 0

Cara Membuat Widget Post terbaru Per Label Tag Kategori, kali ini catatandroid akan mereshare tutorial widget blog dari blog arlinadzgn berjudul Cara memasang widget recent post by label, namun sedikit catatandroid ubah agar dapat di gunakan atau ditempatkan di sidebar dan lokasi lainnya.

Cara Memasang Widget Recent Post Berdasarkan Tag Kategori

Oke tanpa berpanjang lebar karena niatan catatandroid hanya ingin menyimpannya juga ke blog ini agar tidak lupa dan mudah di cari oleh sobat catatandroid lainnya juga. Yuk di simak

Step by step pasang widget menampilkan postingan by label tag

Tempatkan kode di bawah ini sebelum </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>

Kemudian tempatkan kode di bawah ini sebelum ]]></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%}

Terakhir, silahkan tempatkan kode widget di bawah ini sesuai keinginan sobat

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

Keterangan:
Ganti tulisan Featured (yang berwarna kuning) dengan Tag / Kategori yang sobat kehendaki

*Bonus Cara Bikin Widget Recent Post by Tag seperti CatatanDroid

Kali ini catatandroid juga akan membagikan kode widget recent post berdasarkan tag kategori yang kita inginkan, sobat dapat melihat contohnya pada sisi sidebar blog ini.

Buka Layout > Tambahkan Widget > HTML/Javascript
Masukan/copas kode di bawah ini

<div id="hlrpsb">
<script type="text/javascript">
function showrecentposts(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var d=0;d<r.link.length;d++)if("alternate"==r.link[d].rel){n=r.link[d].href;break}i=i.link(n);var s=r.published.$t,a=s.substring(0,4),o=s.substring(5,7),l=s.substring(8,10),u=new Array;u[1]="Jan",u[2]="Feb",u[3]="Mar",u[4]="Apr",u[5]="May",u[6]="Jun",u[7]="Jul",u[8]="Aug",u[9]="Sep",u[10]="Oct",u[11]="Nov",u[12]="Dec",standardstyling||document.write(""),document.write('<div class="rctitles2">'),standardstyling&&document.write(""),document.write(i),standardstyling&&document.write(""),1==showpostdate&&document.write(" - "+l+" "+u[parseInt(o,10)]+" "+a),standardstyling||document.write("</div>"),document.write("</div>"),standardstyling&&document.write("")}standardstyling||document.write('<div class="bbwidgetfooter">'),standardstyling&&document.write(""),document.write(""),standardstyling||document.write("/div")}
</script>
<script type="text/javascript">
var numposts = 4;
var showpostdate = false;
var standardstyling = true;
</script>
<script src="/feeds/posts/default/-/Game?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<style type=text/css>
#hlrpsb a {color: #999;font-size:14px;}
.rctitles2 {padding: 5px;margin-bottom: 5px;border-bottom: 1px dotted#cccccc;}
</style>

Save dan lihat hasilnya

Keterangan:
Ubah tulisan yang di bold (Game) dengan tag kategori yang sobat kehendaki.
var numposts = 4 adalah jumlah artikel yang muncul di widget (4)

Semoga bermanfaat tips blog singkat memasang widget daftar postingan berdasarkan label tag kategori di blogger blogspot, terima kasih kepada arlinadzgn. Jika ada masukan dan koreksi tulis pada kolom komentar di bawah ya. terima kasih! CatatanDroid