TellForce Blog
Linking You To The Technology World

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 its also part of making it easier for visitors to get what they what and
easy navigations. Below are the guidelines to follow:
How To Create Specific Label Posts Widget For Blogger

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.


(adsbygoogle = window.adsbygoogle || []).push({});

<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;
}
Also Read
#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.

4 Comments
  1. Emmanuel Twum says

    thanks it really helped me
    http://www.lalagh.ga

  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

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More