Teuku.net - The Recent Posts widget is one of the most important widgets. We usually see this widget in the sidebar on blogs which makes it easier for visitors to find articles.
but usually this widget only displays the last published article, what if we want to display this widget according to the tags on our blog? Of course you can, please refer to the method below:
How to make a Widget Recent Posts by Tags for blogger :
1. First save this CSS code above the code ]]></b:skin> or </style>
/*Recent Post By tag*/
img.rct-thumb{float:left;margin-right:10px;height:72px;width:72px;}
.recent-by-tag{width:100%;margin:0;padding:0}
ul.recent-by-tag li{padding:10px 0;margin-bottom:0;border-bottom:1px solid #ddd}
.recent-by-tag li{font-size:13px;list-style:none;padding-left:0;margin:0;padding:0;overflow:hidden}
.recent-by-tag a{font-family:'Oswald',sans-serif;font-size:16px;font-weight:normal;margin:0;}
.recent-by-tag strong{padding-left:0}
span.showdates{font-size:16px;margin:10px 0 0}{codeBox}
2. Copy and save this code above the code </head>
<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = true;</script>
<script type='text/javascript'>
//<![CDATA[
// Recent Post By Tag
// Recent Post By Tag For Blogger by TeukuNet
function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url}catch(h){s=n.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!=""){l=d}else l="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSHf9wGuV9Iu15bwmvqbBwQd_XSl2CSW-SsHmf1unnn9-l5wwV_b9-7q4TpBWd6t8aSgZl_YuWW6i3rfutuiMpGjI5rNG8-JStXrxPeyU7P6u8MosYqsQqqvTfYN-F28Yt_uNgDXPaIRs/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('<li class="clear">');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_blank" title="'+r+'"><img class="rct-thumb" alt="'+r+'" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" target ="_blank" title="'+r+'" rel="nofollow">'+r+'</a></strong>');document.write('<br>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>");if(t!=numposts-1)document.write("")}document.write("</ul>")}
//]]>
</script>{codeBox}
3. Finally save this code in the HTML/Javascript widget
<script>
document.write("<script src=\"/feeds/posts/default/-/Apps?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>{codeBox}
Settings :
- var numPosts : Fill in the number of articles you want to display
- var showpostthumbnails : Select true if you want to display the image and false to remove it
- var showpostdate : Select true if you want to display the date and false to hide it
- Apps : Please replace with the desired label, if more than two words use %20 instead of spaces
The Recent posts by tag widget can be developed further so that it can be positioned on the front page, so it doesn't have to be always in the sidebar. please comment if you have anything to ask. Thank You
