Recent Posts With Thumbnails For Particular Label or Category in Blogger

Recent Posts With Thumbnails For Particular Label or Category in Blogger - As now we can see most of websites, which installed on WordPress platform or even blogger platform are using particular label or category wise recent posts widget with thumbnails in homepage or at end of the post or sidebar, especially multi-niche (General) blogs, that looks very professional and attractive. One of the best thing of using this widget is that your blog's readers / visitors can choose his/her favorite category to read articles by navigate to the category from this widget as well as it can be useful to increase the page-views of your blog. So, now if you are thinking, this widget should be installed on your blogspot blog too, then my intention is not to waste your time, jump to the tutorial and follow the simple steps given below. :)

Related : Simple Recent Posts Widget for Blogger / Blogspot



How to add recent post widget with thumbnails from particular label in blogger?


Go to blogger dashboard > Template > Edit HTML
Click anywhere in HTML area, then press CTRL + F to enable the search box.
Search for ]]></b:skin> tag.
Just above it, Paste below code.

/* Recent posts by labels
--------------------------------- */ 
img.label_thumb{
float:left;
margin-right:10px !important;
height:65px; /* Thumbnail height */
width:65px; /* Thumbnail width */
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; }

Next search for </head> tag, then, add following script, above it

<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='http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/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;}
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+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>

Important : If you want to add your own pic of the post with no thumbnails, replace blue colored Image URL with your own.

Next search for </body> and then paste below javascript, just above it. (For a better image resolution)

<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&lt;thumbnails.length;i++){ 
thumbnails[i].width = size; 
thumbnails[i].height = size; 
}
}
changeThumbSize("label_with_thumbs",210);                   
</script>

Save the template.

Ok, Now we have successfully added CSS and javascript to make work this widget. and the next steps we have to follow in order to show the widget on your blog. You will need paste a simple snippet of code anywhere, you want to be displayed recent posts with particular label.

for an example, let's try to add that widget on your blog's sidebar.(Learn how to add widget gadget to blogger)

Navigate to the layout > Add a gadget > Choose HTML/Javascript form the list.
Copy and paste below code inside it.

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

Note: Replace Name-of-the-label with the name of the label you want to display, and if your label is case sensitive, like in my example, then you should type it that way.
Also within the last code, there are parts that we can customize, just change true with false or vice versa:

var numposts ← Number of posts to display
var showpostthumbnails ← Show/hide thumbnails
var displaymore ← Show or hide the read more link
var displayseparator ← Show/hide separator
var showcommentnum ← Show/hide the number of comments
var showpostdate ← Show/hide the posts dates
var showpostsummary ← Show or not the posts summaries
var numchars ← Number of posts characters (here you have to change the 100 value)

Congratulations ! You have successfully added a recent posts from particular label. Remember, if you want to display latest posts from other label then just repeat last step for each additional category you want to add.

12 comments:

  1. Dear its not working in my blog http://www.vdotips.com/ i have paste the code

    ReplyDelete
  2. Thanks ,working nicely
    But I can't get the "showpostsummary" to work. pls help.

    ReplyDelete
  3. Hi, I did it and it's working, but the thumbnail won't show. I have it set to ''true'' but it still won't show.

    ReplyDelete
  4. it works in my blog. But how do i get it to view just the thumbnails in a group instead in a listing.

    ReplyDelete
  5. The entity "alt" was referenced, but not declare

    ReplyDelete
  6. Thanks for this post. So nice and useful for all kind of making blogger post summary style & widget

    ReplyDelete
  7. Thanks for 10000000 times for this post.

    ReplyDelete
  8. HOw do I hide the post label, is there a Javascript variable that can add?? Thanks in advance.

    ReplyDelete