How to put "Also read", "Related post" within Blogger Post/Article
👉 Go to Theme > Customize > Edit HTML
👉 Press CTRL + F (find/search) and type /head and press ENTER.
👉 Above </head> copy and paste the given code below.
<!-- RELATED POST WITHIN A POST CSS START --><b:if cond='data:blog.pageType != "index"'><style type='text/css'>/* Multi Related Post */.listphcommultiRelated{color:#000000;font-weight:bold;display:flex;flex-wrap:nowrap;justify-content:space-between;overflow:hidden;transition:all .3s}.listphcommultiRelated .content{padding-top:10px; padding-right: 5px;padding-bottom:10px}.listphcommultiRelated .content a{color:#f00;text-decoration:none;line-height:1.5em}.listphcommultiRelated .content a:hover{text-decoration:underline}</style></b:if><!-- RELATED POST WITHIN A POST CSS END -->
👉 Press CTRL + F (find/search) again and type <data:post.body/> and press ENTER.
👉 Below <data:post.body/> copy and paste the given code below.
<!-- RELATED POST WITHIN A POST CSS START --><b:if cond='data:view.isPost'><script type='text/javascript'>//<![CDATA[// Multi Related Post(function() {var jumlah = 2;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'] = 'listphcommultiRelated';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='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=100"'/></b:if></b:loop></b:if><script type='text/javascript'>//<![CDATA[(function listphcommultiRelated() {var text = '👉 Also read: ';let r = Math['floor']((relatedTitles['length'] - 1) * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.listphcommultiRelated');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 CSS END -->
👉 Done!
If you wanted to show more also read and related posts then, just change the value 2 in jumlah = 2 .
See live demo here: [ Sample Blogger post with Also read link within article ]
Note: All the Also read and related posts will appear automatically within your posts.
0 Comments
Please comment according to the post topic. Any links and off-topic comments will not be published. Thanks!