How To Create Related Articles Automatic Scroll Based Catagory (Releted Post)

Related articles is very useful for a blog. In addition to increasing page views, related post also helped that our postings are not indexed can be indexed by search engines. Related post is a list of links related posts.

As you can see in this blog, at the end of each posting article titles are other articles related to these posts. You can display related articles according to the title or label the same category automatically, so if you do not have to make postings written again, we only need to install it scripnya code and related articles will appear by itself. More or less like the picture below.

To set up automatic related articles before ........ pray first and then follow the steps below.

1. login to your blogger account
2. In dasboard, select the layout -> edit html (before manipulate the XML code templates are advised to download the first instance as a backup if something goes wrong)
3. Tick the Expand Widget Templates readings.
4. Find the following code,

<p><data:post.body/></p>

In order to more quickly use the existing facilities in your broswer, On the Edit menu -->Find on this page or Ctrl + F and will appear a small window above the input code click Find Nex If not wrong. If the code above is not in the find, Find the following code.

2. <div class='post-footer-line post-footer-line-1'/>

5. If you've met Scrip Copy paste the code below and put it under one of the above code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Releted Articel:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>

Attention: You can change the color Scrip code on your taste

6.   While the store can be used. and than find the code bellow.

]]></b:skin>

7. If you've met Copy the code below and put it right over the barrier above.

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 2px; background-color: #000000;-moz-border-radius:5px; margin:5px;} .rbbox:hover{background-color: rgb(0, 0,0);}

8.  If you've click Save or Save the changes and see the results

Ok good luck.

We apologize if a lot of mistakes