How to add automatic related post in blogger posts| Increase your views by adding related posts in you're blogger posts.

 

Why we need to create internal links in our blogger posts?

Related Posts Help Our Blog Get More Views While Also Improving ON-Page SEO. If you have a Blogger blog, you no longer need to manually add the read article. Here is a simple code that will automatically generate related post links for a single blog post with a stylish design. 

👉👉👉Please Note: Before going to add the following code do backup you're theme incase of any issue with you're website then you will be able to restore you old theme. 

Please go through the follow steps to add the code in you're blogger theme. 

Go to you blogger theme. as shown in below image.

As mentioned above please take backup first before applying any kind of code into you're blogger or WordPress theme. To take backup click on Theme as shown in above image. 

Click on Icon shown in below image.

Select Backup and safe backup on your computer for safe restoration incase of anything gone wrong after applying the code. 

Now after taking a backup click on Edit HTML option. After Editing in HTML you will se whole code of your blogger theme. This is actually you website setting, design and layout which you're displaying to your visitors. 

Now click anywhere in this code and Press Ctrl+F from keyboard. A small Search Box will appear as shown in below image.

Now search for </head> in this search bar and paste the below code above </head>. 

<b:if cond='data:blog.pageType != &quot;index&quot;'> <style type='text/css'> /* Multi Related Post */ .gourabdesignmultiRelated{background-color:#e3feff;color:#002bff;margin:15px auto;display:-moz-box;display:-ms-flexbox;border-radius: 50px;border: 2px solid #00eaff;display:flex;flex-wrap:nowrap;justify-content:space-between;overflow:hidden;transition:all .3s} .gourabdesignmultiRelated:hover{background-color:#feffe6} .gourabdesignmultiRelated .content{padding:6px 27px} .gourabdesignmultiRelated .content .text{margin-right:9px} .gourabdesignmultiRelated .content a{color:#f00;text-decoration:none;line-height:1.5em} .gourabdesignmultiRelated .content a:hover{text-decoration:underline} .gourabdesignmultiRelated .icon{height:auto;min-width:55px;background:#20757d 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>

After pasting the above code now search again for <data:post.body/> and paste the code-2 below  <data:post.body/>.

👇👇Code-2👇👇

<b:if cond='data:view.isPost'> <script type='text/javascript'> //<,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'] = 'gourabdesignmultiRelated';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'> //< * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.gourabdesignmultiRelated');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>

👆👆Code-2👆👆

After pasting now click on Save Option to save newly applied settings to your theme. Save option is on right top corner as shown in below image. 

That's it. Done. Now go to your website and option any post you will see automatically related post are linked in your post. 

Tags:

related post in blogger
related post widget for blogger
simple related post widget for blogger
related posts widget for blogger with thumbnails
blogger related posts with thumbnails
related posts for blogger
stylish related post widget for blogger
how to add automatically related post link in blogger posts
How do you add related posts to Blogger?
What is post feed redirect URL in Blogger?
How do I add links to my Blogger widget?
How do I create an RSS feed for my Blogger blog?
how to add related post in blogger
related post widget for blogger