BLOGSPOT WIDGET SCRIPT HTML COPY PASTE

This widget is to display a list of recent posts based on each label. you can add on a sidebar to display recent post by a particular label.

HOW TO MAKE A WIDGET RECENT POST BY TAG LABEL

recent post slider widget for blogger

1. First, copy the following code then put on top of the code </head>

Select All
<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 labelthumbs(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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYA2eYM1o5Sxf44YsSiLtmhiaXJ4cejwGR59WCxxB7D5mZ6s1eTQXjv59KqGYbhW1qhi9rQ5WlXzEWTzt8S_HvDHxMdYgPd8gYTbfINp3hBJtN2E60y7XjXWnwYs6z-cPlmSuoK6JGJVDm/'}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(showpostthumbnails==true)document.write('<a href="'+posturl+'"><img alt="'+posttitle+'" title="'+posttitle+'" class="label_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(showpostsummary==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(showpostdate==true){towrite=towrite+cdday+'-'+monthnames[parseInt(cdmonth,10)]+'-'+cdyear;flag=1}if(showcommentnum==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(displaymore==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(displayseparator==true)if(i!=(numposts-1))document.write('')}document.write('</ul>')} //]]></script>

2. Then again copy the code below and place it on the code ]]></b:skin>
Select All
img.label_thumb{float:left;border:1px solid #aaa;margin-right:5px;height:55px;width:55px;padding:5px} .taglabel{float:left;width:100%;padding:0;margin:0} ul.taglabel li{padding:5px 0;min-height:73px} 3. Furthermore, post the following code in the widget HTML / Javascript.
Select All
<script type='text/javascript'> var numposts = 5; // Number of Posts in the show var showpostthumbnails = true; // change "false" not to show [Thumbnail] var displaymore = false; // change "true" to display link [More] var displayseparator = false; var showcommentnum = false; // change "true" to display [Comment] var showpostdate = false; // change "true" to display [date] var showpostsummary = true; // change "false" not to show [Description Post] var numchars = 60; // Character description shown </script><script type="text/javascript" src="/feeds/posts/default/-/LABEL_NAME?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Notice in this line: the code number 3

src="/feeds/posts/default/-/LABEL_NAME? 

"LABEL_NAME" replace with the name of the label you created.

***Selesai***

Cara membuat recent post dengan thumbnail seperti di joerobert

widget recent post keren

Hanya copy paste saja script dibawah ini pada sidebar blog anda "HTML/javascript"

Select All
<style scoped='' type='text/css'>#recent-posts{color:#999;font-size:12px} #recent-posts img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;border-radius:100px} #recent-posts ul{margin:0;padding:0} #recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)} #recent-posts ul li:last-child{border-bottom:0} #recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal} </style><div id='recent-posts'><script type='text/javaScript'>var rcp_numposts=5; var rcp_snippet_length=140; var rcp_info='no'; var rcp_comment='Comments'; var rcp_disable='T?t Nh?n xét'; function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmjvBdg1djF0E9A68ZlI4RSLGFG1NC5dKNvY356e4yb9aR8sPNJVtlOmL0dd4xTfseyg5Gb65q8TOXyRm-DWKlqnbL_IDjCLBEdPiMC894YYxJUB9CD1jSCKp976LndB3MF4ogPDl7Xlcy/"};}};dw+=' <li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>'); </script></div>
Kemudian anda bisa mensetting ininya:

var rcp_numposts=5; untuk jumlah judul yang ditampilkan
var rcp_snippet_length=140; untuk jumlah keterangan yang ditampilkan
var rcp_info='no'; untuk menampilkan keterangan 
var rcp_comment='Comments';
var rcp_disable='T?t Nh?n xét';

***Selesai***

Baca juga!! selamat.. google sekarang memberi template blog yang seo

Cara Membuat Tahun Copyright berganti otomatis pada footer 

contoh : Tahun Copyright pada joerobert berganti otomatis setiap tahun

Copy paste saja script dibawah ini pada bagian footer blog anda
Select All

Copyright © <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>. All rights reserved.   

***Selesai***