How to Make Related Articles in the Middle of Post

How to Make Related Articles in the Middle of Posts - Installing related posts or related articles in blog posts in the middle of the article is one way to attract visitors to read other articles on your blog. One reason to post related articles in the middle of a post is to replace the related article or related post used by adsense ads, we know that there are some bloggers who have used advertisements with formats such as related or related post articles are "Matched Content" ads.
How to Make Related Articles in the Middle of Post
This adsense matched content ad has a style or appearance as related articles, therefore posting related articles in blog posts is a solution to replace the related article section that is used or converted to ad matched content.

How to make an article related or related post in the middle of a post is not much different from the tutorial on how to put adsense ads in the middle of a post that I have explained in the previous article. Here we only need to add some additional JavaScript code and CSS code to display the related post widget.

Many people ask how to install or make Related Articles, Related Posts, Read Also in the middle of blog posts? And on this occasion I will try to explain how to make related articles in the middle of blog posts.

How to Make Related Articles in the Middle of Blog Posts
1. Log in to Blogger.com
2. Then click Theme> Edit HTML

3. Look for the code </ head> or & lt; / head & gt; & lt;! - <head /> - & gt; (use ctrl + f to make it easier)
4. Copy the code below, then Paste above the code </ head> or & lt; / head & gt; & lt;! - <head /> - & gt;

<b: if cond = 'data: blog.pageType == & quot; item & quot;'>
<style type = 'text / css'>
/ * related and ads on middle postpage * /
#inline_wrapper {display: block; padding: 0; margin: 0 auto}
.related_inline_wrapper {width: 100%; display: block; overflow: hidden}
.related-post-by-title {width: 70%; margin: 15px auto; display: block; float: left; position: relative}
.related-post-by-title ul {padding: 18px 17px 17px 30px; border: 1px solid #ddd; margin: 0}
.related-post-by-title h4 {display: inline-block; background: #fff; padding: 0 15px; margin: 0; position: absolute; top: -12px; left: 40px; font-size: 15px; font -weight: 700}
.related-post-by-title li a {font-size: 14px; font-weight: 700! important; margin-top: 10px! important}
.ads_middle {margin: 15px auto 0; padding: 0; text-align: center; display: block; position: relative;}
.ads_middle span {background: #ddd; color: # 999; display: none! important; margin: 15px 0 0; padding: 0 9px! important; float: left; font-size: 12px;}
@media screen and (max-width: 600px) {. related-post-by-title {width: 100%;}}
</ style>
<script type = 'text / javascript'>
// <! [CDATA [
var relatedTitles = new Array (); var relatedTitlesNum = 0; var relatedUrls = new Array (); function related_results_labels (json) {for (var i = 0; i <json.feed.entry.length; i ++) {var entry = json.feed.entry [i]; relatedTitles [relatedTitlesNum] = entry.title. $ t; for (var k = 0; k <entry.link.length; k ++) {if (entry.link [k] .rel = = 'alternate') {relatedUrls [relatedTitlesNum] = entry.link [k] .href; relatedTitlesNum ++; break;}}}}
function removeRelatedDuplicates () {var tmp = new Array (0); var tmp2 = new Array (0); for (var i = 0; i <relatedUrls.length; i ++) {if (! contains (tmp, relatedUrls [i] )) {tmp.length + = 1; tmp [tmp.length-1] = relatedUrls [i]; tmp2.length + = 1; tmp2 [tmp2.length-1] = relatedTitles [i];}}
relatedTitles = tmp2; relatedUrls = tmp;} function contains (a, e) {for (var j = 0; j <a.length; j ++) if (a [j] == e) return true; return false;}
function printRelatedLabels () {var r = Math.floor ((relatedTitles.length-1) * Math.random ()); var i = 0; document.write ('<ul>'); while (i <relatedTitles.length && i <3) {document.write ('<li> <a href="'+relatedUrls[r]+'">' + relatedTitles [r] + '</a> </ li>'); if (r < relatedTitles.length-1) {r ++;} else {r = 0;}
i ++;}
document.write ('</ ul>'); document.write ();};
//]]>
</ script>
</ b: if>
5. Look for a code similar to the code below
<b: if cond = 'data: blog.pageType == & quot; item & quot;'>
<div class = 'artbody' itemprop = 'articleBody'> <data: post.body /> </ div>
</ b: if>
Note:
To make it easier to find a code similar to the above, please look for the code <data: post.body /> (code like this in each template is different and maybe more than 2, please select code 2).

6. After meeting the code (number 5), please replace it with the code below

<b: if cond = 'data: blog.pageType == & quot; item & quot;'>
<div class = 'widget-middle' id = 'widget-middle' itemprop = 'articleBody'> <data: post.body /> </ div>
</ b: if>
7. Then add this code and place it under code (number 6)
<b: if cond = 'data: blog.pageType == & quot; item & quot;'>
<div class = 'inline_wrapper' id = 'inline_wrapper'>
<div class = 'related_inline_wrapper' id = 'related_inline_wrapper'>
<! - Related posts inline ->
<div class = 'related-post-by-title' id = 'related-post-by-title'>
<h4> Also read: </ h4>
<b: loop values ​​= 'data: post.labels' var =' label '> <b: if cond =' data: label.isLast! = & quot; true & quot; '/> <b: if cond =' data: blog .pageType == & quot; item & quot; '> <script expr: src =' & quot; / feeds / posts / default / - / & quot; + data: label.name + & quot;? alt = json-in-script & amp; callback = related_results_labels & amp; max-results = 3 & quot; ' type = 'text / javascript' /> </ b: if> </ b: loop> <script type = 'text / javascript'> removeRelatedDuplicates (); printRelatedLabels (); </ script>
</ div>
<! - Related posts inline ->
</ div>
</ div>
<script type = 'text / javascript'>
insertAfter function (addition, target) {var parent = target.parentNode; if (parent.lastChild == target) {parent.appendChild (addition); } else {parent.insertBefore (addition, target.nextSibling);}}
var middleads = document.getElementById (& quot; inline_wrapper & quot;); var target = document.getElementById (& quot; widget-middle & quot;);
var option1 = target.getElementsByTagName (& quot; br & quot;); if (Pilihan1.length & gt; 0) {insertAfter (middleads, option1 [3]);}
var option2 = target.getElementsByTagName (& quot; blockquote & quot;); if (Pilihan2.length & gt; 0) {insertAfter (middleads, options2 [0]);}
var option3 = target.getElementsByTagName (& quot; h2 & quot;); if (Pilihan3.length & gt; 0) {insertAfter (middleads, option3 [0]);}
</ script>
</ b: if>
8. Then click Save theme

Note:
1. Look at the code above (number 7) there is a max-results code = 3 number 3 which is the number of related articles that you want to display.
2. Look at the code above (number 7) there is a code [3], [0], and [0] this is an option to place the position of the corresponding article widget in the post, the higher the value, the more it will go down.

That's a tutorial on how to make related posts in the middle of posts, using
Related articles in the middle of the post have many benefits including increasing the pageview of the blog and also minimizing the bounce rate of your blog. If I still use the manual method to provide related articles and certainly more relevant than this automatic method.  
DONASI VIA SUBSCRIBE Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi Anda membantu Admin untuk lebih giat lagi dalam membagikan artikel blog yang berkualitas. Terima kasih.
Newer Posts Newer Posts Older Posts Older Posts

More posts

Comments

Post a Comment