Advertisement

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.

How To Create Specific Label Posts Widget For Blogger

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.

You might also like
5 Comments
  1. Emmanuel Twum says

    thanks it really helped me

  2. Julfiker says

    Specific Label Widget কিভাবে show করবেন ? ebhabe.blogspot.com এর সাথে থাকুন ।
    https://www.ebhabe.com/2018/04/how-to-show-specific-label-widget.html

  3. David says

    thanks it really helped me

  4. David says

    Thanks it really helped me ON How To Create Specific Label Posts Widget For Blogger

  5. Elijah Enike says

    Nice post, keep it uo

Leave A Reply

Your email address will not be published.