Showing posts with label Posts. Show all posts
Showing posts with label Posts. Show all posts

Monday, 10 October 2016

How to Remove Label Message In Blogger.

"Showing Post With Label" Message in blogger

How To Remove "Showing Post With Label" Message in Blogger


It is set a default for any Blogspot platform user, the message Showing post with label xx xx" appears when your readers search your blog via the label. It is pretty useless, unprofessional and annoying if you wish to remove this feature from your blog, follow the steps below.

Steps to Removing "Showing post with label ... show all posts."


==>log into blogger.com dashboard > Template >> Edit Html (save template if required)

==> Click any point in the template and Hit Ctrl+F keys in window, Cmd+F keys for Mac.

==> Search for the code below using the search box
<b:includable id='status-message'>

==> When found, click on the little black arrow sign by the left to expand it.
==> The below is what you will need to remove alongside the first one as well.
<b:includable id='status-message'>
      <b:if cond='data:navMessage'>
      <div class='status-msg-wrap'>
        <div class='status-msg-body'>
          <data:navMessage/>
        </div>
        <div class='status-msg-border'>
          <div class='status-msg-bg'>
            <div class='status-msg-hidden'><data:navMessage/></div>
          </div>
        </div>
      </div>
      <div style='clear: both;'/>
      </b:if>
    </b:includable>
Removing showing post with label in blogger

==> Replace with this
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
==> Save your template, you done, visit your site, click on any label, the "Showing post with tag" message Should be gone.
Read More

Sunday, 9 October 2016

How To Break Post In Multiple Pages In Blogger (Post Pagination)

You wish to divide post into different pages, this one is for you, you might have written a very long post and wish to divide the post into different page to make your readers more engaged and get less bored with your writing, using Post Pagination is what you need to this awesome styling.

Add-Post-Pagination-In-Blogger


Apart from having a very long post written, there may be lots of other reason you might want to use this pagination for blogger, like making it easier for google to crawl it, that's to say it's an SEO factor also to increase your readers interest.

Lets get to the  steps in Adding awesome Post Pagination For Blogger.

Steps To add Pagination in Blogger

==> Log on to blogger.com > Template >> Edit Html, save a copy of your template if required.
==> Make sure your template has jquery, if not kindly add it, the code is right below you.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Make sure its not double in your template, it can give negative effects.

==> For the next step search for
]]></b:skin
==> Add the CSS code below just above the ]]></b:skin tag
.post-pagination {
    margin: 40px auto;
    text-align: center;
    width: 100%;
 float:left;
}
.button_1, .button_2, .button_3 {
    border: 2px solid #f4655f;
    font-weight: 900;
    padding: 6px 36px;
    color:#f4655f;
    transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
    background: none repeat scroll 0 0 #f4655f;
    color: #fff;
    text-decoration: none;
}

==> Search
</head>
==> Paste the script below just about the </head> Tag

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>

==> Save your template,we are almost done.

==> Not go to Post > New post, click the Html button at the left corner around your post title to switch, past the code below there.
<div class="content_1">
Add Content Here
</div>
<div class="content_2" style="display: none;">
Add Content Here
</div>
<div class="content_3" style="display: none;">
Add Content Here
</div>
<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>

Replace " Add Content Here" with the body of the post you want in a particular page.

Click publish and go over to your post, you will see you post divided into pages. Post Pagination for blogger have been added to your content.
Read More

Friday, 7 October 2016

How To Add Auto Read More With Thumbnail In Blogger

Hey Guys, lets learn how to add auto read more with thumbnail in blog posts. Talking about professionalism, the auto read more gives your blog the look, gets your blog really organized and more beautiful.
What this does is to help you shorten your blog posts automatically and add "read more" link for your reader to click on and see the full content.

Auto Read More  with Thumbnails In Blogger


The steps requires you to go to your blog template, so save a copy of the template before applying the steps.

Also read
Add Recent Post Widget In Blogger
Add Floating Share Buttons In Blogger (Easy Steps)

Steps

==> Sign into blogger.com dashboard > Select the blog.

==> Locate and click on Template > Edit Html

==> Click anywhere in the template and hit Ctrl+F buttons for window, Cmd+F buttons for Mac.
==> Copy the highlighted code below and paste in the search box
<data:post.body/>
==> Press Enter key to find its location in template.
==> You might find the code up to two or three times, please make use of the second one.
==> Replace the above code with the one below

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
<span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

 Note: If you don' t notice any change after you applied its applied, kindly replace the third <data:post.body/>  tag too with the code above

==> Now search for </head> in the template and place the code below directly above it

<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
 .readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>
==> Save your template, you are done.

Customization

Modify the number of character shown in homepage there isn't a photo(thumbnail) useing the 490 value in red, to modify the number of character shown when is a photos(thumbnail) in the post, the 400 value in red also.
To modify the size of the Thumb, use the values in yellow
160 height and 180 width

Hope It helps, comment if any difficulty.
Read More

Wednesday, 5 October 2016

Add Floating Share Buttons For Blogger (Easy Steps)

How To Add Floating Share Buttons To Blogger

Right here, we will discuss how to add floating share buttons in blogger. This share buttons are shown vertically at the left hand side beside your blog post,

Add share buttons to blog


See steps to add it below..

Steps
Step 1: Open blogger template > Edit HTML.

Step 2: Locate this code <b:includable id='post' var='post'> Do that by using control + F key to show to bring out a search box in template, input the code there.

Step 3 paste the code below directly below this <b:includable id='post' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/*<![CDATA[*/
#btnt-social {  bottom: 10%; margin-left: -50px; position: fixed; }
#btnt-social ul { list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}
#btnt-social ul li { display: inline;background:none;margin:0;padding:0;}
#btnt-social ul li a { display:block;  width: 32px; height:32px; margin: 5px 0; }
#btnt-social ul li a.twitter    { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Ax7CvJ16AkwHDVvZ4LdKip9_o_jy71LpLIe7k1HJTr5jOmOXaDtQfBwRfGsXLVl1P9zKI2phV4Rr4JwVdFWkAvDWArT8M36nIFNRGfp3FJlflxnl174FdTyb9I7pKXw9ljWa5prlGjna/s32/twitter.png") repeat scroll 0 0 transparent;  }
#btnt-social ul li a.facebook   { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZM4zu0bEQgd_JRnt8udQMiItUZqDn6RZMI10NCUuDFcoTO7XJqE2rShlEEhZUShfb1e2q6LoNW4tDrogUZg4H92tT47WV1CatwrjsBlway22xSsxsXSF_w9Gcniz2jihp_pOHGT96eteK/s32/facebook.png") repeat scroll 0 0 transparent; }
#btnt-social ul li a.stumbleupon  { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkJrdhvLdU9EpTg4nsAKaoxEhGKSMt_YHtYcnK9ChGWRe8V9QCbEMmKeupjy8vUjyGgYPdZLExOFKX5CGOrC2XDWyVP0tE79bAZRnaM6dckHpzcchJarTDvmdJp2820V0PYNaeJvvDKDyf/s32/stumbleupon.png") repeat scroll 0 0 transparent;  }
#btnt-social ul li .google-plus    { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicEeGCXUCDrLZ3qn-e3JbSfGiIp8RQV7q24qOYjAccXfn_1QFwfVg7NhB3lgBDKxB867Qfpxq4K0DtOtxhd1NhGMwyyl78eYtF1a6zAyR-fnlRGnVCcTfoEpBcAg6WCiP3vkSqEfeo_FVH/s1600/g-plus.png") repeat scroll -1px 0 transparent;  }
#btnt-social ul li a.pin-it-button   {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUEwYQ-bv600DI54AapiwH0gDQMKF7ytyQHYuo81QUrfOyH5_fai5Y6Q82s7_D3BYi1eGJaIAAyXJ7emWLh7_8oZd9i51673at_rNGgHvI9Pe7bDkPilWBPkO3XfvFMoHoeGtEf3405G36/s32/pinterest.png") repeat scroll 0 0 transparent;  }
#btnt-social ul li .addthis_32x32_style .dummy .at300bs, #btnt-social ul li .addthis_32x32_style .at300bs, #btnt-social ul li .addthis_32x32_style .at15t   { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKWDKSgLmlAZtOEkzWkcvc76zCY6-b95pxANIFZQfzIOR-kw0p1Dxy9SKKYyi_IODwqyOl7dhlNckVppJhw6LYffRQw2wbblZbLv7J8QKOT1SVE4f7JGiWTjG290TG2niPj76wfyHsAVYP/s32/sharethis.png") repeat scroll 0 0 transparent;  }
/*]]>*/
</style>
<div id='btnt-social'>
<ul>
<li><a class='twitter' expr:href='&quot;http://twitter.com/?status=&quot; + data:post.title + &quot; - &quot; + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>
<li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li>
<li><a class='stumbleupon' expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li>
<li><a class='google-plus' expr:href='&quot; http://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Google+ '/></li>
<li><a class='pin-it-button' href='javascript:void(run_pinmarklet())'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
    var e=document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
    document.body.appendChild(e);
}
</script></li>
<li><div class='addthis_toolbox addthis_32x32_style'>
<a class='addthis_button_compact'/>
</div>
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: &quot;blogtipsntricks.com&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#0080FF&quot;
}
</script>
<script src='http://s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'/></li>
</ul>
</div>
</b:if></b:if>

Step 5: Save your template.
You are done, go to your blog, you will find the share buttons beside your blog post.
Read More

Tuesday, 4 October 2016

How To Fix Comment Box Not Showing in Mobile | Blogger

Fix Missing Comment Box In Mobile For Blogger

Sometimes, the comment box goes hidden in the mobile view for no reason, lots of blogger platform users have that problem, it doesn't mean it's unsolvable.

There are three I know that causes to the problem which
  • You have the custom mobile view checked
  • You are using a third-party template
  • You edit your templates a lot and get things messed up

Well not to worry, I will help you fix this issue in a while, all you have to do is to follow the simple instructions below.

To fix this comment box issue, you are required to go into your blog template, if you have never gone in there, cause it's a blog brain box, you are required to save a copy of your template somewhere, so you can easily restore in case it get messed up

Steps to fix missing comment box

Step 1: Sign in blogger.com > Select blog

Step 2: Open Template > Edit Template (make sure its backed up)

Step 3: Click anywhere inside the template and hit Ctrl+F keys(window), Cmd+F(Mac)
Copy this ]]></b:skin> and paste in the search box on the top right corner and hit enter key to take you right to the code's position(with yellow shade)

Step 4 Paste the CSS code below just above the ]]></b:skin>
code

.mobile .blogger-iframe-colorize {
display: block !important;
}
.blogger-iframe-colorize {
display: block !important;
}

Step 5: Then save your template.

Visit your blog with a mobile device, you will find your comment box already waiting up for you.
And that's how to fix comment box not showing in mobile for blogger. 

Friendly Tip

Try and avoid more of this issues by always saving up a copy of your template before going into your blogger brain box(Template), I call it the brain-box so the word can scare me and make me save a copy before I venture into it.

Steps to save a blogger template
Before you hit the Edit Html button, at the top right corner of that page, you will see backup/restore button, click on it, will show a download template button, you know what to do.
Read More

Wednesday, 21 September 2016

How To Show Post Title Before Blog Title In Blogger | Seo Tip

How To Fix Blog Title Showing Before Post Title In Blogger

Talking about SEO, this is one of the most important step to getting ranked by Google, showing your blog title before your post title won't aid that instead it reduces your website rank.

If your blog remain in this state(blog title appearing before post title in search engines), you may find your daily visits depreciating, that is a real heart breaker for bloggers especially the newbies.

Changing How blog title show before post title (FIx)
Now you might be wondering how a blog title coming before post titles can effect a blog appearance in search engines, let me explain.
You see, in Google search, only 65 characters are allowed to display in search result titles, Imagine if your blog name has up to 45  characters and comes before your post title, it means Google will not show your post at all in search engines or  will also reduce the show up, hope you are getting what am trying to explain here, so you see why it's important we make this change to our blogs.
 This is a default setting for Blogger platform, I still don't know why Google made it so.

Without much talk, lets get to the steps in make this modification to our blogs. Just in case you still don’t get the reasons this change should be made, read the explaination below. I used the two basic errors or should i say two basic negativities to be encountered if this change is not made, if you get it, skip to the steps


Effect of your blog title showing before 

1. Your Blog will lose visitors: It has explained its self, your blog visits will reduce daily and that could cause a great percentage loss in revenue at the end of the month, no Blog Owner would want that. Making this change will put that situation away.

2. Your Content won't show up in search engines:It can be heart breaking after writing an awesome Content, with very high percent of demand in your niche and ending up not showing in search engines, making the change could avoid that.
Like I stated above the reason your blog might not show up in search is if your blog name is very long, like 30 to 65 characters, when Google only show 65 characters.

Lets get to the simple method to fix this default issue.

Steps to make post title show before blog title.

Before I start listing out steps on my tutorials, I first go for safety measures to avoid unnecessary errors in the process of any modification, This is the safety measure.

This modification requires you to go into your blog brain box, which is your template, it is advisable to always save a copy of your template before going into any modification, just in case of any mess made in your template you can easily restore back to its previous state.

Steps

This process is completely save and easy to apply.
Step 1:Login to blogger.com and select the blog your wish to make this change.

Step 2: In the left menus, locate and hit template> Edit Html

Step 3: While your template is Open (remember to save a copy of your template), you need to search for this code <data:blog.pageTitle/>, to do that, click anywhere in the template and hit Ctrl+F keys for windows or Cmd+F keys for Mac.
This will show a search box in the template. Insert the code <title><data:blog.pageTitle/></title> in the box and hit enter key, It will take you directly to the position of the code.

Step 4: Now replace that code with the one below

<b:if cond='data:blog.pageType == "item"'>

<title><data:blog.pageName/> | <data:blog.title/></title>

 <b:else/>

<title><data:blog.pageTitle/></title>

</b:if>

Step 5: When done with the replacement hit the Save Template button to save your changes.

That is pretty much everything, now your blog should be showing properly in search engines in a while, post title appearing before blog title.
If you encounter any difficulties during this modification, please state in the comment below so we know how to help you.

Note: if your template was messed up during this process, go to Backup/restore to restore with your previously saved template, before trying this steps again.

Read More

Tuesday, 13 September 2016

Widget: How to add Related post to blogger with Thumbnails

Add Related post widget to blogger blog

Nowadays, hardly can you see a blog without a related post widget displayed below their posts, unless, if or maybe the blog is new, that is to say you must have a new blog for you to be reading this post right now, if you ain't, then what the heck have you being doing?

Anyway, you are all welcome here whether you are new to blogging or you are a pro.

Related posts add certain benefits to your blog, as a matter of fact, lots of benefits, the most important is to increase your site pageviews and also make you blog fun for your readers, without much talks/write-ups, let get straight to steps to add this related post widget to your BLOGGER/BLOGSPOT blog.

Blogger Related Post Widget easy to add


Steps to add related post To Blogger

1. Open your blogger, locate template and click on Edit HTML button as indicated in the photo below.
Go to Edit Html to add this related post widget to blogger

Note: it very advisable to save a copy of your template in case you get it messed up in this process. please do so.

2. While the template is opened, click any point inside the code area and hit your CTRL+F Key in windows, CMD+F keys in Mac, this will pop out a search box.
Use control F to show the search box
Ctrl+F keys to pop out the search box
3. In the search box input this code </head> and hit your enter key
 this will take you to the tag position shaded with yellow. Looks like this </head>
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts h4{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.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[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxgcc1sMZxAsfzXQpTpsXgnYIEMFwqDST-A8g7mxUY77eKxLhW9hVJymXlfpPPVlSoSg0WNR2TGfE5HLy8WqUjvYfQLfKK89rrSfZaGvDW9B-Mzb_THiRM4q1i0TRGfdNltYekU1lU8cCD/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h4>'+relatedpoststitle+'</h4>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

4. Copy the code below and paste right above the </head> Tag
5. Use the search box again input the code below. Note: you might find the code more than once in your template go for the second one, that what we will be making use of
<div class='post-footer'>
6. Copy the code below and paste right above the <div class='post-footer'> tag

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a  style="font-size: 9px; text-decoration: none;" href="https://blogwox.blogspot.com/2016/09/how-to-add-related-post-widget-blog-design.html" rel="nofollow" >Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

If you are unable to see this related post widget after saving template,  add the code (step 6) just above the </b:includable> tag which can be found above this line  <b:includable id='postQuickEdit' var='post'>  in your template.

Customization

You can change the number of post that appear in your related post by changing the 5 value, that Max results=5 to your preferred number, to easily locate this, use the search box in template and input this code
var maxresults=5;

To change the size of the thumbnails(width and Height) change the values which are 110px and 100px
input this in the search box
cover;width:110px;height:100px;

Read More