How to Make Related Articles / Related Post with scroll

How to Make Related Articles / Related Post with scroll - How to Create Articles related - Perhaps the term related post or the linked article is not foreign anymore for bloggers. for who do not know it's related article is a collection of articles relating to or associated with the title of the post mate,, well for related articles this time I modified a little by adding a scroll function. By adding the scrolling function on related posts widget so visitors no longer bothered with related articles that are too long down. Moreover, related post widget is placed on the bottom of the post. nahh for my friend who already install related posts widget long without scrolling function , it must be removed first. Confused how to remove it? How did the backward flow (from bottom up) by following the instructions. Examples Related Articles I mean kaya gini nihh:

In the picture there appears to be a scroll that can be hung upside down to see related postings. Okay, go to  How to Create Related Articles / Related Post with a scroll  in the bottom of the post to your blog.

1. Login to blogger with your id
2. Click the Draft
3. On the tab menu, select Edit HTML
4. Check the small box Expand Widget Templates
5. Search code <p> <data:post.body/> </ p> atau <data:post.body/>
6. Place the following code under the code above:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Related Post:</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 = 50;
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>
<small><p>Widget by [ <a href='http://iptek-4u.blogspot.com' target='new'>Iptek-4u</a> ]</p></small>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>

7. If so, now find this code ]]> </ b: skin>

8. Place the following code in the code above:

/ * - Modified by http://blogs-id.blogspot.com-- related posts * /
. rbbox {border: 1px solid # D8D8D8; padding: 5px;
background-color: # E0F8E0;-moz-border-radius : 5px; margin: 5px;}
. rbbox: hover {background-color: # EFFBEF;}

9. Click SAVE TEMPLATE 

10. Done 

There is a script in red Related Posts can be replaced with your favorite text. For color codes too, customize your template design. Now let's see one of your posts. Thus  Related Articles / Related Posts with scroll  will be under the posts. It looks even more beautiful with the box that surrounds this widget. Easy is not it, okay good luck. ^ _ ^







How to Make Related Articles / Related Post with scroll  How to Make Related Post How to Make Related Articles / Related Post with scroll  How to Make Related Post How to Make Related Articles / Related Post with scroll  How to Make Related Post How to Make Related Articles / Related Post with scroll  How to Make Related Post How to Make Related Articles / Related Post with scroll  How to Make Related Post How to Make Related Articles / Related Post with scroll  How to Make Related Post How to Make Related Articles / Related Post with scroll  How to Make Related Post How to Make Related Articles / Related Post with scroll  How to Make Related Post How to Make Related Articles / Related Post with scroll  How to Make Related Post How to Make Related Articles / Related Post with scroll  How to Make Related Post How to Make Related Articles / Related Post with scroll  How to Make Related Post How to Make Related Articles / Related Post with scroll  How to Make Related Post How to Make Related Articles / Related Post with scroll  How to Make Related Post How to Make Related Articles / Related Post with scroll  How to Make Related Post How to Make Related Articles / Related Post with scroll  How to Make Related Post