Related Post is simply a suggested post inside your website's post or article. From the word "related", Blogger will automatically detects all the posts or labels that are related to the current viewed post. Most of the related posts are only can be seen below the article before the comment section. But for this tutorial, we will add this related post widget within or inside the post itself like the image below.


One very important effect of having this widget inside your post is, it will greatly affect your website's overall bounce rate. The higher the bounce rate the lesser the time a visitor stays in your post. And the lower the bounce rate the higher or the longer the amount of time your visitor stays on your post. Definitely, if the suggested post is really related to the one which is he is currently reading, it will greatly caught his interest and might click on it. You can check your website's current bounce rate using the Alexa.com website.

Another effect that the related post widget will give to you, is additional income of your blog or website. The longer the time your visitor is staying because of it, the higher the possibility that he will see the ads inside your post and might also click on it. As a blogger, we need conversions (clicks) to be able to earn money out of it and earn a living out of blogging.

The widget that we are going to install or put inside the template's HTML will automatically generate good-looking related post inside your post when done. It will have the "Also read:" at the beginning followed by the TITLE of the related post. If you want a live example of this tutorial, you can immediately see the related post suggestions in this particular post.

Now, here are the steps to have your own related post widget within or inside the post.

STEPS:

1. Open your Blogger Theme > click the Edit HTML button.

2. Inside the HTML editor of your Theme, click anywhere and press CTRL + F (find) and type </head to find the closing head tag. Above the </head> closing tag, paste the given code below.

<!-- RELATED POST WITHIN A POST CSS START -->
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Multi Related Post */
.arldzgnMultiRelated{background-color:#2a2a2a; color:#fff; margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;overflow:hidden;transition:all .3s}
.arldzgnMultiRelated:hover{background-color:#222}
.arldzgnMultiRelated .content{padding:12px 15px}
.arldzgnMultiRelated .content .text{margin-right:5px}
.arldzgnMultiRelated .content a{color:#fff;text-decoration:none;line-height:1.5em}
.arldzgnMultiRelated .content a:hover{text-decoration:underline}
.arldzgnMultiRelated .icon{height:auto;min-width:55px;background:#f44336 url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23fff&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;transition:all .3s}
</style>
</b:if>
<!-- RELATED POST WITHIN A POST CSS END -->

3. Back to the search field, type <data:post.body/> to find it. If you find two or three <data:post.body/> then copy and paste all the given code below, below all the <data:post.body/> tags.

<!-- RELATED POST WITHIN A POST START -->
<b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
// Multi Related Post
(function() {var jumlah = 4;let post = document['querySelectorAll']('.post-body br, .post-body p'),a = jumlah + 1,b = post['length'] / a;c = Array['from']({length: jumlah}, (redfx, blufx) => blufx + 1);
for (let d = 0; d < c['length']; d++) {let e = c[d],f = parseInt((b * e)),g = document['createElement']('div');g['className'] = 'arldzgnMultiRelated';if (post[f]['nodeName'] == 'P') {post[f]['parentNode']['insertBefore'](g, post[f])} else {post[f]['parentNode']['insertBefore'](g, post[f]['nextSibling'])}}})();
var relatedTitles = new Array();var relatedTitlesNum = 0;var relatedUrls = new Array();function related_results_labels(nerdfx) {for (var desfx = 0; desfx < nerdfx['feed']['entry']['length']; desfx++) {var nefx = nerdfx['feed']['entry'][desfx];relatedTitles[relatedTitlesNum] = nefx['title']['$t'];for (var ciafx = 0; ciafx < nefx['link']['length']; ciafx++) {if (nefx['link'][ciafx]['rel'] == 'alternate') {relatedUrls[relatedTitlesNum] = nefx['link'][ciafx]['href'];relatedTitlesNum++;break}}}}
function removeRelatedDuplicates() {var viefx = new Array(0);var labfx = new Array(0);for (var desfx = 0; desfx < relatedUrls['length']; desfx++) {if (!contains(viefx, relatedUrls[desfx])) {viefx['length'] += 1;viefx[viefx['length'] - 1] = relatedUrls[desfx];labfx['length'] += 1;labfx[labfx['length'] - 1] = relatedTitles[desfx]}};relatedTitles = labfx;relatedUrls = viefx}
function contains(yelfx, yufx) {for (var grefx = 0; grefx < yelfx['length']; grefx++) {if (yelfx[grefx] == yufx) {return true}};return false}
//]]>
</script>
  <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
      <b:if cond='data:view.isPost'>
        <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=100&quot;'/>
      </b:if>
</b:loop>
  </b:if>
<script type='text/javascript'>
//<![CDATA[
(function arldzgnMultiRelated() {var text = 'Also read :';let r = Math['floor']((relatedTitles['length'] - 1) * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.arldzgnMultiRelated');while (i < relatedTitles['length'] && i < jumlah['length']) {for (let a = 0; a < jumlah['length']; a++) {jumlah[a]['innerHTML'] = '<span class="content"><span class="text">' + text + '</span><a href="' + relatedUrls[r] + '" title="' + relatedTitles[r] + '">' + relatedTitles[r] + '</a></span><span class="icon"></span>';if (r < relatedTitles['length'] - 1) {r++} else {r = 0};i++}}})();
//]]>
</script>
</b:if>
<!-- RELATED POST WITHIN A POST END -->

4. Save your template. View any of your post and see the four (4) related post suggestions within it.

5. Done!

Customize the Related Post Widget:

a. If you want to to change 'Also read :' with your own then you can do so. You can replace it by anything that you wanted like 'Read next :'

b. If you want more related post suggestions to appear, then change this code: var jumlah = 4;

c. If you want to change the background color of the related post, then change this line of code: background-color:#2a2a2a;

d. If you want to change the color of the text inside the related post, then modify this line of code: color:#fff;

This post was originally seen here. We just added some more details about the tutorial for easier understanding of adding the widget.

If you have something to ask or share regarding this post, please leave a comment below. Thank you.