HOW TO ADD INLINE RELATED POSTS
INSIDE ARTICLE CONTENT ON BLOGGER
Making
related post box inside the article content on blogger is the key to
successfully decrease Bounce rate and raising the value of your website on
Google search engine.
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.
Also Download - amongusmodapk.pro
Download Latest Version PPSSPP Gold APK - http://ppssppgoldapk.app
Without
wasting much time, I will show you how to add a related post box inside the
article content on blogger. This script uses the pure Javascript program that
designed and developed with Arlina Design.
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
CLICK HERE TO GET THIS FIRST CODE TO PASTE ON HEAD
<b:if cond='data:blog.pageType !=
"index"'>
<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("data:image/svg+xml,%3Csvg viewBox='0 0 24 24'
xmlns='http://www.w3.org/2000/svg'%3E%3Cpath
d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'
fill='%23000'/%3E%3C/svg%3E") 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
CLICK HERE TO GET THIS SECOND CODE TO PASTE ON BODY POST DATA
<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='"/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 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.
ReplyDeleteVery nice Useful Post, Please share information like this..
if anyone interested in Students Scholarship Please visit here:
Scholarship list
SM Scholarship Open to Apply
Phinma RC Scholarship
New CHED Scholarship
UNIFAST Scholarship Open to Apply
Scholarship Application Form
Thanks in Advance
Nice it works
ReplyDeleteThanks for sharing