Easy Steps;How To Hide Specific Blogger Posts In Home Page And Show It In Widget

So many blogger blog web sites want to hide some specific posts in blogger home page and show it in Widget.I also searched in google to find a real solution.finally got it.In this post I will show you how to do it nicely.

It is possible to do it , but it requires little understanding of Blogger template structure. Therefore before you proceed , Please backup your template by going to Template > Backup/Restore > Download Full Template , so that you can switch back to it if anything goes wrong while editing. 


So we have 2 steps.
   1. First one is hide specific posts
   2. Second one is,show it in widget 

Step 1:

 
Go to Template tab in Blogger Dashboard and click the Edit HTML button. Now click once inside the Editor and then Press CTRL+F(Windows) or COMMAND+F(Mac) , A search box will appear in the right upper corner of the editor itself. Now search for this "<b:include data='post' name='post'/>" (without quotes - there will be only one instance of this) and you will see code like,(highlighted one)

....
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
....

Now replace the above highlighted code with,

<b:if cond='data:blog.url == data:blog.homepageUrl'>    <b:loop values='data:post.labels' var='label'>        <b:if cond='data:label.isLast == &quot;true&quot;'>            <b:if cond='data:label.name != &quot;YOUR_LABLE_NAME&quot;'>                <b:include data='post' name='post' />            </b:if>        </b:if>    </b:loop><b:else/>    <b:include data='post' name='post' /></b:if>

The highlighted part(orange colour) is the label name that you want to hide from the homepage. Also for the above code to work , make sure the posts that you want to hide only have 1 label on them.

If you want to hide multiple labels,change above code like this,

<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:loop values='data:post.labels' var='label'>
        <b:if cond='data:label.name != &quot;FIRST_LABEL&quot;'>
            <b:include data='post' name='post' />
        </b:if>
        <b:if cond='data:label.name != &quot;SECOND_LABEL&quot;'>
            <b:include data='post' name='post' />
        </b:if>
    </b:loop>
    <b:else/>
    <b:include data='post' name='post' />
</b:if> 

Step 2:

Ok,we almost done ,now we have to add those particular post in widget.To do that go to blogger layput > add gadget > HTML/Java Script

then paste below code in it,

<center>
<span style="font-family: Arial,Verdana; font-size: 5% ;"><div align="left">
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://goo.gl/OjbygN";
imgr[1] = "http://goo.gl/OjbygN";
imgr[2] = "http://goo.gl/OjbygN";
imgr[3] = "http://goo.gl/OjbygN";
imgr[4] = "http://goo.gl/OjbygN";
showRandomImg = true;
boxwidth = 60;
cellspacing = 0;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 80;
thumbheight = 65;
fntsize = 0;
acolor = "#000000";
aBold = false;
icon = " ";
text = " ";
showPostDate = false;
summaryPost = 0;
summaryFontsize = 0;
summaryColor = "#000000";
icon2 = " ";
numposts = 3;
home_page = "http://www.your-blog-url-here.blogspot.com/";
</script>
<script>function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx=s.join("");}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...';}function showrecentposts(json){document.write('<table width="'+boxwidth+'" border=0 bordercolor="#FF0000" align="left" cellspacing="'+cellspacing+'" bgcolor="'+borderColor+'">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break;}}if("content"in entry){var postcontent=entry.content.$t;}else if("summary"in entry){var postcontent=entry.summary.$t;}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;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!=""))img[i]=d;cmtext=(text!='no')?'<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>':'';var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;}}var daystr=(showPostDate)?'<i><font color="'+acolor+'"> - ('+day+' '+m+' '+y+')</font></i>':"";posttitle=(aBold)?"<b>"+posttitle+"</b>":posttitle;var trtd='<tr><td><a href="'+posturl+'" ><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></a></td><td style="font-size: 12px;">'+icon+'<a href="'+posturl+'" >'+posttitle+'</a> - <span style="font-size: 9px; color: #616161;'+cmtext+' </span></td></tr>';if(summaryPost==0){trtd='<tr><td><a href="'+posturl+'" ><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></a></td><td>'+icon+'<a href="'+posturl+'" >'+posttitle+'</a></td></tr>';}document.write(trtd);j++;}document.write('</table>');}document.write("<script src=\""+home_page+"feeds/posts/default/-/Your_Lable_Here?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");document.write('');</script></div></span>
<div class='clear'></div>
</center>

change above Yellow colour area with yours one.

Remeber:Your_Lable_Here is valid for one lable.If you want to add another lable, pleas add another HTML/Java Script widgt and add about code again.then change to another label name it.

OK ,We are Done

Happy Blogging,feel free to share and comment.