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

Andre

Andre is a network engineer with a solid technical background and a proven record in building and troubleshooting computer systems, networking, website design and blogging with broad knowledge on call center operations and administration. Above all, a man with great desire in sharing his knowledge and views, cutting across technology, social and politics.

4 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

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

Back to top button
Close

Adblock Detected

Please consider supporting us by disabling your ad blocker