Firs of All You need to add few scripts in your Template backup your template before attempting any changes.
Step 1: From Dashboard click on Template and Edit HTML
Step 2: Click in Html Code and Press CTRL+F and Look for
skin if it in the shape of <b:skin>----</b:skin> then click on
it to expand and paste the following code just before
]]></b:skin>
/* Recent posts by labels--------------------------------- */ img.label_thumb{float:left;margin-right:10px !important;height:65px; /* Thumbnail height edit t change thumbnail size*/width:65px; /* Thumbnail width edit to change thumbnail size*/border: 1px solid #fff;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);box-shadow: 0 1px 1px rgba(0, 0, 0, .4);}
#label_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 0px 10px 2px 0px;padding: 0;}ul#label_with_thumbs li {padding:8px 0;min-height:65px;margin-bottom:0px;border-bottom: 1px dotted #999999;}
#label_with_thumbs li{list-style: none ;padding-left:0px !important;}
#label_with_thumbs a { text-transform: uppercase;}#label_with_thumbs strong {padding-left:0px; }
Step 3:Now look for </head> and paste the following code
just before </head>
<script type='text/javascript'>
//<![CDATA[function labelthumbs(json){document.write('<ul id="label_with_thumbs">');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/AVvXsEg978EYbyc7feTbinVWlO0zhjnSnLHky6GyOKbYzetX38bKlw95rfcTQBb9ZkNlfjEyYqe6xdVs-qk3zMKWKmD2z_eKXPQIbbG3hyphenhyphenth7xGM7e2rBv_PXeWqr_wmbIJ-ceQI_AqXorMsm0o/s1600/picture_not_available.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]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}elseif("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+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+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='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}if(displaymore==true){if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}document.write(towrite);document.write('</li>');if(displayseparator==true)if(i!=(numposts-1))document.write('');}document.write('</ul>');}//]]></script>
Step 4: Now look for </body> and paste the following code
just before </body>
<script type='text/javascript'> function changeThumbSize(id,size){var blogGadget = document.getElementById(id);var replacement = blogGadget.innerHTML;blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");var thumbnails = blogGadget.getElementsByTagName("img");for(var i=0;i<thumbnails.length;i++){ thumbnails[i].width = size; thumbnails[i].height = size; }}changeThumbSize("label_with_thumbs",210); </script>
Step 4: Create a New Page and link it with menu, edit it, click on Html and paste the following code in the end
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Name-of-the-label?published&alt=json-in-script&callback=labelthumbs"></script>
Change the Name of Label to your label; Number of Posts and Summary details in this code
Best thing about this Guide is that you can add what ever you want on the page and just paste this code in the end to show the posts related to that label.
Post a Comment