Header Ads

Recent Posts By Label Code For Blogger

Howc to displaying your posts from a specific category/label on your blog.With this gadget you can display a list of posts that you have added the same label to, the gadget will have the title of the post, thumbnail from the post and an optional summery.

image
Images: Widget Preview


Step 1: In your Blogger Dashboard click > Template as shown in below image.

In your Blogger Dashboard click > Design > Edit Html check Expand

Step 2: Find the following piece of code in your blogs Html : (Click + F for a search bar to help find the code

]]></b:skin>
Step 3. Copy and paste the following code Directly Above

/*** Recent Labels Gadget Css ***/
img.label_thumb{
float:left;
padding:5px;
border:1px solid #8f8f8f;
background:#D2D0D0;
margin-right:10px;
height:55px;
width:55px;
}
img.label_thumb:hover{
background:#f7f6f6;
}
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
adding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:10px;
}
.label_with_thumbs a {}
.label_with_thumbs strong {}
Step 4. Find the following piece of code in your blogs Html : (Click + F for a search bar to help find the code
</head>

Step 5. Copy and paste the following code Directly Above </head>

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="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://2.bp.blogspot.com/_IKigl6y9hFA/TMdcT1jzo5I/AAAAAAAAAHA/hAKuT9rJpFU/noimage.jpg';}
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+'" 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>

Step 6. Save your template, we have added the Css to style the gadget and the script to make the gadget work.Now we just have to add the gadget code to your sidebar in a Html/Javascript gadget.

Step 7. Click back to your Design Page > Click Add A Gadget > Choose Html/Javascript from the pop up menu :

Step 8. Copy and paste the code below into the Html/Javascript gadget.
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>
<script type="text/javascript" src="/feeds/posts/default/-/LABEL?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

NOTE - You must add the name of the label you want to to the above code. Replace LABEL in green (bod) with your label name.

If your label have the combination of two words then add %20 between the label.

Example: If you label name is Computer Tricks then  in the you have to write
Computer%20Tricks

Save and you are done. Best of luck for your blog.

11 comments:

  1. Hello, I am having problem with your instruction. Here is what it looks like when I followed it.

    http://4.bp.blogspot.com/-p-o2rYpmU_Y/ULb44WUAY5I/AAAAAAAAABk/G2xe4rPVm_4/s1600/issue+tutorial.jpg

    ReplyDelete
  2. Thank you very much for tutorial and your code. Once again Thanks

    ReplyDelete
  3. Great post Dear, but i have an problem, how to customize tittle words in this, i want to show only 3 word so what i do????

    ReplyDelete
  4. Hello thanks for sharing, upon using this code on my blog www.bloggerheroe.com i incountered a problem, can you help me on how to fixed this issue? Thanks.

    ReplyDelete
  5. Hey thanks for the tutorial and guide. Got it working perfectly on our blogrshop and blogrstore template and also our own blog with a few tweaks.

    Additional add ons widgets we would probably include in our duture free shopping cart blogger template at http://blog.irsah.com

    Hope it will help others.

    Regards,
    irsah indesigns

    ReplyDelete
  6. Great post. I was checking constantly this blog and I’m inspired! Extremely useful info.I was looking for this particular information for a long time. Thank you and best of luck.
    website design

    ReplyDelete
  7. Greate work. Hi everyone. I see a template here. It is so cool. hic..But i have not enough money. Everyone can sell it for me with 15$? http://themeforest.net/item/nami-press/6166852, :(. Thanks

    ReplyDelete
  8. How to remove post title and only show thumbnail?

    ReplyDelete
  9. If we have label name as ''blogger'' only one word what to do?

    ReplyDelete
  10. Thanks a lot http://b-bela1.blogspot.com

    ReplyDelete

Powered by Blogger.