How To Show Recent Particular Label Post With Thumbnail

How To Show Recent Particular Label Post With Thumbnail
Recent Particular Label Post With Thumbnail
Recent Particular Label Post With Thumbnail

How are you all ?
I am fine always. I hope you are well too.

Today i am sharing how to show recent post particular label with thumbnail.
Its easy for you.
Just Follow me.

What is label ?
Label is Post category. Example: - Blogger, Tips, Story, Technology, Sports etc.
Lets start....

Step: 01
From your blogspot dashboard, go to template and 'Edit Html' Button.
 Step: 02
Click anywhere in code area and search [ ctrl + f ] a pice of line. ']]></b:skin>'
Just above ]]></b:skin> , Pastal this code. 

[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; }[/CODE]

 Step: 03
Again search and find this tag. '</head>'
Just pastal this code above </head> tag.

[CODE]<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>[/CODE]


  Step: 04
Again search '<body>' tag.
 Just pastal this code above </body> tag.

[CODE]<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>
[/CODE]

Save This Template.

  Step: 05
Recent Particular Label Post With Thumbnail
Recent Particular Label Post With Thumbnail

Again go to template layout and add a html gadget.
Open a pop up window.
Pastal this code and save.

[CODE]<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>[/CODE]

Tips : -
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)
পোস্ট রেটিং করুন
ট্যাগঃ
About Author

টিউটোরিয়ালটি কেমন লেগেছে মন্তব্য করুন!