Show Recent Posts Amongst Thumbnails For Item Label Or Category Inward Blogger

Sometimes nosotros desire to convey everything organized, so that our readers tin sack uncovering topics of involvement to a greater extent than easily. To make this, instead of putting a widget alongside the latest posts, nosotros tin sack pose together the latest entries sorted past times category, so that we'll live able to demo the latest posts for each label nosotros desire in addition to equally good display a thumbnail for our category.

To add together this recent posts widget for labels or categories inward a Blogger blog, follow the side past times side steps:

Recent Posts alongside Thumbnails Sorted past times Labels

Step 1. From your Blogger Dashboard, become to 'Template' in addition to click the 'Edit HTML' button

Step 2. Click anywhere within the code expanse in addition to search (CTRL + F) for this slice of code:

]]></b:skin>

Just inward a higher identify ]]></b:skin>, glue this CSS style:

/* Recent posts past times labels
--------------------------------- */
img.label_thumb{
float:left;
margin-right:10px !important;
height:65px; /* Thumbnail summit */
width:65px; /* Thumbnail width */
border: 1px corporation #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-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 {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul#label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:0px;
border-bottom: 1px dotted #999999;
}

#label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}

#label_with_thumbs a { text-transform: uppercase;}
#label_with_thumbs rigid {padding-left:0px; }

Step 3. Now attempt to uncovering this tag:

</head>

... merely inward a higher identify </head> add together this script:

<script type='text/javascript'>
//<![CDATA[
component subdivision 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_jKAMKKGIgjPUBfinU2u2KpXlv62Twl9xPlnpQh0DX3DmOTx4eroJhQNJ9PASmwxcqfukCIQx-4i1g3KGdMDVfbglKdUxyBSpjJt9BzzvzXdw2gLZ8VpbCma0r4R4PITMN08UjVDQDqU/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>

Note: to add together your ain pic for the posts alongside no thumbnail, supercede the epitome url inward bluish alongside your own

Update! For a ameliorate epitome resolution add together this script inward a higher identify the </body> tag:

<script type='text/javascript'>                  
component subdivision changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i&lt;thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize("label_with_thumbs",210);             
</script>

Now Save the template to complete alongside your changes.

So, what nosotros convey added, is the CSS to mode the widget in addition to the script to larn inward work. Now all nosotros convey to create is to add together the widget's code to the spider web log sidebar inward a HTML/JavaScript gadget:

Step 4. Go to Layout - click on Add a Gadget

Step 5. From the pop-up window, conduct the HTML/Javascript widget in addition to glue this script within the empty box:

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Name-of-the-label?published&alt=json-in-script&callback=labelthumbs"></script>

Note: Where it says Name-of-the-label should live the advert of the label that y'all desire to display, in addition to if your label is illustration sensitive, similar inward my example, in addition to so y'all should type it that way.

Within the end code, at that spot are these parts which tin sack live customized - modify true with false or vice versa:

var numposts ← Number of posts to display
var showpostthumbnails ← Show/hide thumbnails
var displaymore ← Show or enshroud the read to a greater extent than link
var displayseparator ← Show/hide separator
var showcommentnum ← Show/hide the issue of comments
var showpostdate ← Show/hide the posts dates
var showpostsummary ← Show or non the posts summaries
var numchars ← Number of posts characters (here y'all convey to modify the 100 value)

Remember that the gadget displays the latest posts from a detail label... therefore, if y'all desire to display the latest posts from other labels, repeat pace five for each additional category that y'all desire to add.

That's it :) Enjoy!

Share this post