How to add inline related post on blogger

How to Add inline related post widget to Blogger site, inline related post on blogger, Blogger inline related post how to add. These words have only one meaning, How to add inline related post on blogger, today’s blog post will discuss this topic.

Hi! My name is Kartick Khilari, and today I’m going to show you how do create inline related post on blogger. I have been creating blogs and websites since 2018. Besides, I am also a YouTuber. so without wasting, any time let’s get started.

Features of InArticle Related Posts Widget

InArticle or Contextual Related Posts is a popular Blogger widget that lets you display a list of related posts in your blog posts on the Blogger platform.

The list is focused on the title and/or content of the posts, making them more interesting and likely to pique the readers’ attention. This enables you to keep users on your site longer, lower bounce rates, and refresh old entries.

Even though there are many similar widgets available today, InArticle Related Posts is one of the most feature-rich, supporting custom post types and CSS styles.

Why need to add Inline Related Posts on blogger

In most cases, you simply interlink your blog posts naturally when writing. For all the other times, bloggers usually rely on related posts plugins that shows related content at the end of the post.

Showing related posts allows your readers to see more great content on your site that’s relevant to them.

Benefits of related post box inside the article content

By adding the related post box, many visitors they like to read other blog articles, so by adding realated posts inside content on blogger will increase the time for your visitor. This is good to your website if you add this.

If you add a related post box in the main content of the blog, The possibility of your article clicks made by visitors will be even greater.

How to add inline related content on blogger

First go on your blogger dashboard, Find a word THEME and click on that, then switch to edit HTML. Click ctrl + F Find </head> and add (paste) this code shown below infront of. Example </head>CODE

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Multi Related Post */
.arldzgnMultiRelated{color:#0984e3;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;border:1px solid rgba(0,0,0,0.2);transition:all .3s}
.arldzgnMultiRelated .content{padding:8px 15px}.arldzgnMultiRelated .content .text{margin-right:5px}
.arldzgnMultiRelated .content a{color:#000;text-decoration:none;line-height:1.5em}
.arldzgnMultiRelated .icon{height:auto;min-width:55px;background:transparent 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;%23000&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;border-left:1px solid rgba(0,0,0,0.2);transition:all .3s}
.arldzgnMultiRelated:hover .icon,.arldzgnMultiRelated .content a:hover{color:#0984e3}
</style>
</b:if>

Now after pasting this code on  </head> go on your keyboard do as before, Click ctrl + F Find <data:post.body/> and add (paste) this code shown below infront of. Example <data:post.body/>CODE

<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>

And the last step click save and then go to your one of your post check, a related post box inside the article content on blogger will appear. Wishing you good luck.

Now it’s time for a conclusion Right!

On the responsive blogger theme, the related post widget will automatically adjust. This section’s design and the interface can be entirely customized by advanced users. If you’re having trouble integrating it, please contact me and I’ll do my best to assist you.

Thanks for reading and Have a good day… I’ve tried to make all of these scripts as descriptive as possible. and I hope you have usefully create inline related post on blogger. And If you have any questions in your mind, then definitely tell me by commenting, I will try my best to answer them and how you like this post of ours, it is my request to you guys to tell me by commenting that.

If you liked this post, then you must share it on social media so that more people can get information about it.