How to add Related post widget with Thumbnails or without Thumbnails to blogger blog?

By adding a related post into your blogger blog you can increase your inter traffic and get more benefits. 

If you are thinking it is not necessary to add related posts to your blogger blog, then you are wrong. By displaying related posts in your blogger blog You can easily keep your readers engaged with your blogger blog and with your related posts links that you have previously written.

What are related posts?

Related posts are old posts that related to your current reading posts. It displays base on the label of your current reading post. Let take an example, if you are reading about some post related to blogging label, then under related posts, it displays other old posts titles those related to blogging label. So readers can easily find the content relevant to the previous article that readers currently read. 


Let's think some persons come to visit your site for looking for information, via traffic from search engines, social media, web directories, ref sites, and other sites. If your site hasn’t enough information that they are looking for they will immediately exit from your blog without visiting another page. That will be caused to increase your bounce rate too. 

By adding related posts into your blogger you can avoid that situation. Remember that Related posts play a key role in your site. That facilitating and suggesting to your readers what they want to read next? After solving readers’ issues by reading your article, in the end, they saw other related articles that are related to their searching or intention. Then those readers click on that related post title and continue reading your blog articles. So with that related post, we can prevent our visitors from exiting on our blogger blog.


Also below are some benefits of adding the related post to your blogger. 

·         Improve blog site performances

·         Improve blog traffic

·         Improve internal links

·         Decrease your blog bounce rate

·         Improve your page views

·         Improve user interaction

So today let discuss how to add Related post with Thumbnails and without Thumbnails into your blogger blog. It will be helpful for displaying old post links those related to your current reading post.

How to add Related post widget with Thumbnails to your blogger?

                                          

See demo image of Related post with Thumbnails

Step 01: Sign in to your blogger blog

Step 02: Go to blogger Dashboard>> Template >> Edit HTML button

Step 03: Find (Ctrl + F) </head> and copy below code and paste above or before </head> tag.

<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/AVvXsEiy9l1jB7J_8bnFhIfUSkQflBJBWr2nQuyQ621VnyWLldC1pOQbjBZLLJZlm-TFZ1ofCuGhqP5JtZCkAOTIfYMW3GBunt5FSXMkC6fgWzHED4N9xLae-vEMWb8cnn3Q_qDqn3NeticD9XpR/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>

Step 04: Find ( Ctrl + F ) <div class='post-footer'>. Most of times you will found two <div class='post-footer'> codes. You should stop at second code. Or if that code appear more than 2 times then you should search for conditional tag <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> and stop there.

( If you interest to replace your existing related code with that codes, then you should Find  <div id='related-posts'> code or some code with 'related-posts' below the <div class='post-footer'>.)

Step 05: Now copy and paste below codes beforeor above the <div class='post-footer'> or <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> where you stopped at Step 04. (If you interest to replace your existing related post code with that code, then replace your current code with below code.)

<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://blogfowl.blogspot.com/2017/12/related-post-widget-for-blogger-with.html" rel="nofollow" >Related Posts Widget</a></div>

</b:if>

Step 06: now save your template.

*Note – If related post not showing then placed above code above the  <b:includable id='postQuickEdit' var='post'> tag.

With the above code, you can add beautiful Related post widget with Thumbnails into your blogger blog.

How to add Related post widget without Thumbnails?

Step 01: Sign in to your blogger blog

Step 02: Go to blogger Dashboard >> Template >> Edit HTML button

Step 03: Press Ctrl + F and find </head>code.

Step 04: Copy and paste the below code aboveor before </head> tag.

<style>

#related-posts {

float : left;

width : 100%;

margin-top:20px;

margin-left : 5px;

margin-bottom:20px;

font : 14px Verdana;

margin-bottom:10px;

}

#related-posts .widget {

list-style-type : none;

margin : 5px 0 5px 0;

padding : 0;

}

#related-posts .widget h2, #related-posts h2 {

font-size : 20px;

font-weight : normal;

margin : 5px 7px 0;

padding : 0 0 5px;

}

#related-posts a {

text-decoration : none;

}

#related-posts a:hover {

text-decoration : none;

}

#related-posts ul {

border : medium none;

margin : 10px;

padding : 0;

}

#related-posts ul li {

display : block;

background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzLMEXslaVOolAoTQRb2BCZ1NQReQJFWZ_bK9S4A1RqvZhSP9TV_rN-Qz42H2eiOn-V2xL1T6wfPDN7ZEYkRwcEjNstaVujuAibJLMQ4Wi1JILplN3kTsrpkBnK1mxq_ALsSRK2yq8Hc4/s200/greentickbullet.png) no-repeat 0 0;

margin : 0;

padding-top : 0;

padding-right : 0;

padding-bottom : 1px;

padding-left : 21px;

margin-bottom : 5px;

line-height : 2em;

border-bottom:1px dotted #cccccc;

}

</style>

<script type='text/javascript'>

//<![CDATA[

var relatedTitles = new Array();

var relatedTitlesNum = 0;

var relatedUrls = new Array();

function related_results_labels(json) {

for (var i = 0; i < json.feed.entry.length; i++) {

var entry = json.feed.entry[i];

relatedTitles[relatedTitlesNum] = entry.title.$t;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

relatedUrls[relatedTitlesNum] = entry.link[k].href;

relatedTitlesNum++;

break;

}

}

}

}

function removeRelatedDuplicates() {

var tmp = new Array(0);

var tmp2 = new Array(0);

for(var i = 0; i < relatedUrls.length; i++) {

if(!contains(tmp, relatedUrls[i])) {

tmp.length += 1;

tmp[tmp.length - 1] = relatedUrls[i];

tmp2.length += 1;

tmp2[tmp2.length - 1] = relatedTitles[i];

}

}

relatedTitles = tmp2;

relatedUrls = tmp;

}

function contains(a, e) {

for(var j = 0; j < a.length; j++) if (a[j]==e) return true;

return false;

}

function printRelatedLabels() {

var r = Math.floor((relatedTitles.length - 1) * Math.random());

var i = 0;

document.write('<ul>');

while (i < relatedTitles.length && i < 20) {

document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');

if (r < relatedTitles.length - 1) {

r++;

} else {

r = 0;

}

i++;

}

}

//]]>

</script>

Step 03: Find (Ctrl + F) <div class='post-footer'>. Most of times you will found two <div class='post-footer'> codes. You should stop at second code. Or if that code appear more than 2 times then you should search for conditional tag <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> and stop there or find <b:includable id='postQuickEdit' var='post'> code.

(If you interest to replace your existing related code with that codes, then you should Find <div id='related-posts'> code or some code with 'related-posts' below the <div class='post-footer'>.)

Step 04: Now copy and paste below codes before or above the <div class='post-footer'> or <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> or <b:includable id='postQuickEdit' var='post'> where you stopped at Step 03. (If you interest to replace your existing related post code with that code, then replace your current code with below code.)

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

<font face='Arial' size='5'><b>You May Also Like: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();

</script>

</div>

</b:if>

Customize- Replace <font face='Arial' size='5'><b>You May Also Like: </b> title and title size as you prefer.

Replace max-results=5 with the number of related post titles that you want to display under related post widget.

Step 05: Save the theme.

With the above code, you can add beautiful Related post widget without Thumbnails to your blogger blog.

Those related posts are automatically displayed based on the same label as your current post. You can display your related post with or without thumbnails below the post body. It will increase your readers’ interaction with your blogger blog.

I Hope the above methods help you to add Related post widget with Thumbnails or without Thumbnails to blogger blog. And if you have any problem or know more fixes on this Related post widget with Thumbnails or without Thumbnails, Please share with us in the comments section below. Happy blogging!

How to add back to top or scroll to top button in blogger?

By adding a beautiful and simple back to top or scroll to top button into your blogger blog, you can get a lot of benefits such as go back to the top by one click. 

If your blog homepage has a lot of posts or if you have long posts and the share buttons are placed below the post titles that will be more important. Sometimes after reading your long post by your readers, they may be interesting to share your articles via their social media profiles. 

If your social media buttons placed in the below of your post titles, then readers have to scroll your page back to the top of your post by manually.  But if you have a back to the top button or scroll to the top button you and your readers can go back to the top of your post or homepage by one click within one second without scroll up to the page manually.

What is back to top or scroll to top button?

Simply that is a button at the bottom of your homepage or post pages. By clicking on that button readers can easily go back to the top of your homepage or post page within a second without clicking or scrolling up manually. Because of that button After reading your long post to the end by your readers, they can easily go back to the top of your post by one click.

If your blog hasn’t a better navigation or your share buttons is located at the below the post titles or you are interested to add and text different widgets to your blog or if you are looking to add some professional look for your blogger blog, you can try to add that back to top or scroll to top button into your blogger blog. Not only that back to top button if you like also you can add a widget like News ticker bar for your blog homepage.it will make attractive for your blog.

You can add back to the top/scroll to top button or customized button image as you prefer.

How to add back to top/scroll to top button to blogger blog?

Step 01: Sign in to your blogger blog

Step 02: Go to dashboard >> Template>> click on Edit HTML button.

Step 03: Find (click Ctrl + Fbuttons) ]]></b:skin> and add below code before or above]]></b:skin>

.backtotop {

 display:none;

 position: fixed;

 bottom: 2em;

 right: 0px;

 text-decoration: none;

 color: #ffffff !important;

 background-color: #000000;

 text-transform: uppercase;

 letter-spacing: 2px;

 font-weight: bold;

 font-size: 11px;

 padding: 1em;

 }

.backtotop:hover {

 background-color: #f6f6f;

 text-decoration:none;

 color:#ffffff;

 }

*Customize – you can replace highlighted color as you prefer. 

Step 04: Now find </body> tag and Cope below code and Paste it before or above </body> (or Save above code >> go to Layout >> add a gadget >> copy paste blow code >> save and place it as you prefer (in Footer) >> Click savebutton in layout.)

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

<script>

jQuery(document).ready(function() {

var offset = 220;

var duration = 500;

jQuery(window).scroll(function() {

if (jQuery(this).scrollTop() > offset) {

jQuery('.back-to-top').fadeIn(duration);

} else {

jQuery('.back-to-top').fadeOut(duration);

}

});jQuery('.back-to-top').click(function(event) {

event.preventDefault();

jQuery('html, body').animate({scrollTop: 0}, duration);

return false;

})

});

</script>

<a href="data:blog.url" class="back-to-top">Back to Top</a>

Customize – if the above code not work try to replace 'data:blog.url' with your blogger blog URL

Step 05: Save template

How to add back to top/scroll to top image button to blogger blog?

Step 01: Sign in to your blogger blog

Step 02: Go to dashboard >> Template>> click on Edit HTML button.

Step 03: Find (click Ctrl + F buttons)  ]]></b:skin> and add below code before or above ]]></b:skin>

.backtotop {

position: fixed;

bottom: 10px; /* increase value to move position up */

right: 0px; /* increase value to move position left */

color: #000000; /* color of text */

background-color: #ffffff; /* background color of button */

font-size: 12px; /* changes size of text */

padding: 10px; /* add space around the text */

text-transform: uppercase; /* change text to all caps */

letter-spacing: 1.0px; /* space between letters */

}

.backtotop:hover {

background-color: #333333; /* color of background on hover over */

color: #ffffff; /* color of text on hover over */

text-decoration: none; /* no underline */

bottom: 10px; /* increase value to move position up */

right: 0px; /* increase value to move position left */

padding: 10px; /* add space around the text */

}

*Customize – you can replace highlighted color and codes as you prefer. 

Step 04: Now find </body> tag and Cope below code and Paste it before or above </body> ( or Save above code >> go to Layout >> add a gadget >> copy paste blow code >> save and place it as you prefer (in Footer) >> Click  save button in layout.)

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

<script>

jQuery(document).ready(function() {

var offset = 300;

var duration = 500;

jQuery(window).scroll(function() {

if (jQuery(this).scrollTop() > offset) {

jQuery('.backtotop').fadeIn(duration);

} else {

jQuery('.backtotop').fadeOut(duration);

}

});

jQuery('.backtotop').click(function(event) {

event.preventDefault();

jQuery('html, body').animate({scrollTop: 0}, duration);

return false;

})

});

</script>

<a href="data:blog.url" class="backtotop"><img src="DIRECT IMAGE URL HERE" alt="Back To Top"></a>

Customize –  Replace DIRECT IMAGE URL HERE with your customized button image URL

*if the above code did not work try to replace 'data:blog.url' with your blogger blog URL

Step 05: Save template

If you haven’t customized Button, then choose one of below image button sample.

back to top button image 1

back to top button image 2

back to top button image 3

I Hope the above methods help you to add back to top or scroll to top button in blogger. And if you have any problem or know more fixes on this back to top or scroll to top button for blogger, Please share with us in the comments section below. Happy blogging!