How To Create Specific Label Posts Widget For Blogger

After so many efforts on how to display my posts based on particular label posts in side widget or in the body. There are so many benefits of this, as it’s also part of making it easier for visitors to get what they what and easy navigation.

Join Our Telegram Channel

Join Our WhatsApp Channel

Below are the guidelines to follow:

Guidelines

Step 1. Remember that before this can work, you have to create a specific and unique label to your posts which you want to display as collection of posts like the above.

Step 2. Paste and edit some part of the code given below in any HTML supported base. In case of Blogger you can paste it in the HTML/Javascript widget.

<style>

/* Recent posts by labels --------------------------------- */

img.label_thumb{float:left;

margin-right:10px !important;

height:72px; /* Thumbnail height */

width:72px; /* Thumbnail width */

border: 1px solid #fff;

-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 { text-align:

justify;

font: normal 18px Port Lligat Slab;

float: left;

width: 98%;

min-height: 70px;

margin: 0px 10px 2px 0px;

padding: 0;

}

ul#label_with_thumbs li {

padding:8px 0;

min-height:75px;

margin-bottom:0px;

border-bottom: 1px dotted #999999;

}

#label_with_thumbs li{

list-style: none ;

padding-left:0px !important;

}

#label_with_thumbs a:visited {

text-decoration: none;

color: black;}

#label_with_thumbs a:link {

text-decoration: none;

color: black;}

#label_with_thumbs a {

text-transform: none;}

#label_with_thumbs a:hover {

text-decoration: underline;}

#label_with_thumbs strong

{padding-left:0px; }</style>

<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>

<script

type='text/javascript'>var numposts = 4;var showpostthumbnails = true;var displaymore =

false;var displayseparator = true;var showcommentnum = false;var showpostdate =

false;var showpostsummary = true;var numchars = 200;</script>

<script type="text/javascript"

src="/feeds/posts/default/-/YOUR LABEL?published&alt=json-in-script&callback=labelthumbs"></script>

Important Note: Customization to your satisfactions. Simply substitute the highlighted with your details:

var numposts= 4: Replace 4 with the number of post you want to display.

YOUR LABEL – Change it with your desired label of the posts.