How to add recent post widget in blogger ?
Hi friends,
In this article i will tell you how to add the recent post widget with particular category. In these days as we try to find the new themes for our blogger website. We find a lot of themes.
Some of them are paid and some of them are free. But in some cases we liked the premium themes and unfortunately they are not for free, there is a free version available but it is always blocked with some contents like blogger recent posts widget, sidebar post widget by ( label, recent and by comments).
To overcome this problems with the themes we have came with the solution to these types of problems. You just need to do some simple coding. You can add the recent post widget with the label. In this article we have also included the customization of the recent post label.
The benefits of these recent post widget with labels is that users who came on your site can find the their topics of interest with more ease.
We can show the latest post by category like the recent post used in the website for all categories. Instead of all recent post categories we can now sorted them with only one category.
To add this recent post widget withe particular category or label in blogger do the following steps carefully.
Add Recent post widget with particular category or label.
Like above you can see the box which contain the category “Mobiles” in which you can see the thumbnails and the post titles.
Step 1
Go to the Blogger dashboard.
Click on the themes option which is located in the right side of the blogger dashboard
In the themes section click on the 3 dots besides the customize option.
In the 3 dot menu Option click on the ” EDIT HTML” option there.
Step 2
After entering in the HTML mode. Click anywhere in the html code layout and type the “Ctrl. + F” to go in the search mode.
After you go in the search tab, search for the
]]></b:skin> Step 3
Just above the ]]></b:skin> paste the below CSS 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; }
Now we have pasted the CSS code needed for the style of the widget. Now we just need to add the script.
Step 4
Now try to find this </head> in the search of the html sheet of blogger.
After you find the </head> tag paste the below script just above the </head> tag.
<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>
Note : If you have to replace a thumbnail of a post that is without image. You can add your own image in that particular post thumbnail . you have to just replace the link in red color with your own image link.
Step 5
Add the following script to for the better resolution of the image.
<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>
Now you have to save all the changes. We have just added the Style for the widget of the blogger and the java script to make it work.
Step 6
Now the last step is to HTML code only.
To add the HTML Code.
Go to the Blogger Dashboard and from the dashboard go to the Layout.
In the layout just click on the add widget where you want to add the recent post widget for blogger with thumbnails.
Add this code to the HTML/JAVA Script
<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>
You have to change the word “Name of the Label” from the code to your category name or for which category you want to use this code. You have to replace the “Name of the Label” by your own category name. In my case as you can see above i used the “mobile” because i wanted to show people my post within the mobile category or mobile label.
If you want any changes in the above code you can change them. you can change them by making changes in the above code. by understanding the below code.
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)
That’s it. You are done.
If you want to add more recent post for particular label you have just repeat the process or step no. 5
You can add as many as recent post you want, till it looks good.