$show=post

How to add automatic post break links(Inline Related post) in Blogger

SHARE:

Add automatic post break link in Blogger, Blogger automatic inline related post plugin, Add automatic in-article related post in blogger: That is why today on this page, we are going to show you how to add automatically post break links in Blogger.

How to add automatic post break links(Related post) in Blogger

Just writing blog posts without any internal links pointing to other articles of similar interest will not encourage readers. It is always good for every single post on a website to be linked to other similar posts. Otherwise, the article or post will be an "Orphan article" which will also affect the SEO. So, adding "post break links"(inline related post) should always be a habit for every blogger.

Google uses links to find out what content on your site is related and the value of that content.  Setting up internal links should be in such a way that not only the Googlebot can understand the relationship between post and pages, their relevance and value, but your readers as well.

You may have been doing this the manual way! But have you ever thought of it to be cumbersome? Yes, of course, it is really stressful to have to insert post break links(in-article links or inline links) related to the article you are writing manually. That is why today on this page, we are going to show you how to add automatically post break links in Blogger.

How the automatic post break link widget works


The functionality is simple. The widget works just like a normal related post widget but helps you automatically add internal links(post break links) to your blog post. It randomly shows internal links to content with a similar label(Category) within your blog post.

By making use of this automatic post break link widget, you will not have to do the adding of internal links manually all the time. You just have to write your post and publish and the internal break links will appear automatically.

Adding automatic post break links in Blogger


Below are the steps to follow;
  • Log in to your Blogger account and go to Theme.
Log in to your Blogger account and go to Themes.
  • Next, under "Theme", click on Edit HTML to display your blog HTML source codes.
click on Edit HTML
  • Once the HTML code of your blogger template displays, click inside the code box and then press CTRL + F to open search box. Search for </head> tag and then copy and paste the code below just above the closing head tag.
Code to paste above closing head tag:
[<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Blogger auto post break link*/
.autoblk{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}
.autoblk:hover{background-color:#222}
.autoblk .content{padding:12px 15px}
.autoblk .content .text{margin-right:5px}
.autoblk .content a{color:#fff;text-decoration:none;line-height:1.5em}
.autoblk.content a:hover{text-decoration:underline}
.autoblk .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>]


*You can customise further the look of the widget by changing the colours and more.
Search for closing head tag and paste code just above it
  • Next, search for <data:post.body/> tag and paste the following code just below it. If you find more than one of this tag(<data:post.body/>) then paste the code below each of them and save your template.
Code to paste below <data:post.body/> tag:
[<b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
// Auto post break link
(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'] = 'autoblk';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 autoblk() {var text = 'Also read :';let r = Math['floor']((relatedTitles['length'] - 1) * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.autoblk');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>]

Paste above code after <data:post.body/> tag
*The part of the photo highlighted in orange is the code pasted

After you have pasted all the code at their respective places, save the template and you are done.

This is what we are using on this blog. You can also check from our demo blog.

Customisation


You can customise the different colours(text colour and background colour) of the break link widget. To do that, all you need is edit this part of the CSS found in the code you placed above the closing head tag.

As for the numbers of internal break link to display, you can change it on the second code. Just change the value of the variable underlined in red(var Jumlah = 4) to the desired numbers of break link you will like to display.

COMMENTS


$show=mobile

Name

Android Apps,34,Android Roms,10,Android Tips,8,Blogger Themes,6,Blogger Widget,4,Blogging Tips & Guides,6,Comparisons,1,Computer 101,1,download,2,Downloads,84,Drivers,1,Facebook Tips,2,Facts,1,Fix Over heating on Android,1,Free Paid Apps,34,GAMES,12,GFI,1,How to,2,How-To,35,IDM,1,Internet,20,iOS,16,ITEL,2,ITEL MTK,2,Jetpack Plugin,1,KMSpico,1,Language Packs,4,macOS,1,Microsoft,1,Miracle Team,3,MS Office,4,MTN Smart S730,1,Netflix,1,Online Shopping,2,Operating System,2,Orange Klif,1,PBhev,2,PC Software,12,Rooting,1,S-COLOR,1,SAMSUNG,3,SD Card formatter,1,SEO Tips,2,Skin Packs,2,Streaming,1,Table of Content,1,Tech News,29,TECNO,1,Telegram,2,Tools,4,TOUCHING,1,Unlocking,2,UpdraftPlus,1,VPN,4,WhatsApp Messenger,16,WhatsApp Mod,11,WhatsApp Web,1,WhatsApp Web Dark Theme,1,Wikoo,2,Windows 10,1,Windows 7 Activator,1,Windows 8.1,2,Windows Activator,2,Windows AIO Version,1,Windows OS,4,Wordpress Plugin,6,Wordpress Themes,1,Yoast SEO,1,
ltr
item
237 Solution: How to add automatic post break links(Inline Related post) in Blogger
How to add automatic post break links(Inline Related post) in Blogger
Add automatic post break link in Blogger, Blogger automatic inline related post plugin, Add automatic in-article related post in blogger: That is why today on this page, we are going to show you how to add automatically post break links in Blogger.
https://1.bp.blogspot.com/-jX5g9kzJidA/XYYJsVI8EnI/AAAAAAAAAKU/yJgwI6UGLL0b0TN5qEu1fkTr6Aaab-ZagCLcBGAsYHQ/s640/Also%2BRead_%2BInternal%2Bpost%2Bbreak%2Blink.png
https://1.bp.blogspot.com/-jX5g9kzJidA/XYYJsVI8EnI/AAAAAAAAAKU/yJgwI6UGLL0b0TN5qEu1fkTr6Aaab-ZagCLcBGAsYHQ/s72-c/Also%2BRead_%2BInternal%2Bpost%2Bbreak%2Blink.png
237 Solution
https://www.237solution.net/2019/09/how-to-add-automatic-post-break.html
https://www.237solution.net/
https://www.237solution.net/
https://www.237solution.net/2019/09/how-to-add-automatic-post-break.html
true
4983004729499366028
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy
>