How To Add Inline Related Posts Middle Of The Content In Blogger

0
Inline Related Posts will show random posts between a blogger post. When user opens a blog post, He will find multiple inline related posts links, Inline related post is basically a link to a relevant article in the middle of a blog post which increase pageviews. In this article, How To Add Inline Related Posts Middle Of The Content On Blogger I will show you how to add inline related posts in blogger blog posts.

inline related posts, blogger, blogspot, multi related posts, middle of content, blog post, how to inline related post blogger

By adding inline related post to your blog, many visitors like to read other blog articles, so by adding realated posts inside content in blogger will improving more pageviews. it also improve SEO because this is basically interlinking your content.

How To Add Inline Related Posts Middle Of The Content In Blogger Blogspot

1. Log in to your Blogger Account from your Blogger Dashboard.
2. Click On Theme >> Edit HTML.
3. (Press Ctrl+F) to Find </head> Add the below CSS before </head>.
JS Script
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Blogger 4 Ever Multi Related Post */
.blogger4evermultirelated{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}
.blogger4evermultirelated .content{padding:8px 15px}
.blogger4evermultirelated .content .text{margin-right:5px}
.blogger4evermultirelated .content a{color:#000;text-decoration:none;line-height:1.5em}
.blogger4evermultirelated .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}
.blogger4evermultirelated:hover .icon,.blogger4evermultirelated .content a:hover{color:#0984e3}
</style>
</b:if>
4. Now again (Press Ctrl+F) to find <data:post.body/> and paste below Javascript after it.
HTML
<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'] = 'blogger4evermultirelated';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 blogger4evermultirelated() {var text = 'Also read :';let r = Math['floor']((relatedTitles['length'] - 1) * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.blogger4evermultirelated');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>
5. Now Save template.

Customize Inline Related Posts

If you want to change the text search for Also read : and replace Also Read : with your custom text.

If you want to change the number of related post displayed on your blog post then search for 4 and change the 4 to number you want.

Conclusion:
I hope this will be helpful for you. We hope this article How To Add Inline Related Posts Middle Of The Content In Blogger Blogspot would turn out to be useful for you. If you like this post, share it with your friends. If you have any issue regarding this feel free to comment or contact us.

You might also like: How To Add Contact Form Widget In Blogger Blogspot
How To Add Lazy Load Images In Blogger To Improve Page Speed
Tags

Post a Comment

0 Comments
Post a Comment (0)
To Top