Recent post a great way to make your blog visitor and readers find topics that are published recently by you.
In order to get your recent blog post with default Latest Post Widget, this can be put together to your latest entries sorted by category or label.
So, follow these simple steps and you will be able to show your latest post for each of your labels or category that you want to display with thumbnails for your blog readers.
Step 1. Login to your Blogger blog and click on Theme or Template.
Step 2. Select Edit HTML and by pressing Control + ‘F’ find
Step 3. Paste the below Css Style Code just above the ]]> code.
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; }
Step 4. Again pressing Control + ‘F’ find the
tag.
tag.
Step 5. Now, paste the below code just above the
tag.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('');if(showpostthumbnails==true) ');if(displayseparator==true)
document.write('');document.write(''+posttitle+'
');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.lengthelse{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('
');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=''+commenttext+'';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'More »';flag=1;;}
document.write(towrite);document.write('
if(i!=(numposts-1))
document.write('');}document.write('');}
//]]>
Note: In order to add your own image, replace the image URL that is highlighted by red color with your own image URL.
Extra shots: To get a better image resolution, find by pressing control + ‘F’ together and add the below script just above the
tag.
So far, we have added the CSS Style Code and the script and now, we have to add the actual magic code to your blogger.
Follow the steps.
Step 7. Go to Layout and click on Add a Gadget and select HTML/JavaScript
Step 8. Now in the pop-up menu and paste the below code and Save.
?published&alt=json-in-script&callback=labelthumbs">
Change the highlighted with red Name of the label with your own label name.
Within the last code, there are some codes which you can make your own customization like you can change from true to 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)
Remember that your Widget will display your latest post only from a particular label that you have added.
Therefore, if you want to display your latest posts from other labels or categories, repeat step 8 to show recent posts from other categories as well.
