Installer Related Post With Scrool Function

Hello my friend, how are you today, hopefully in good health. In the my previous post about seo tips I've talked about the importance of using heading tags H1 on the blog title and post title (Read: Manipulation Heading Tags For Your Blog) and Breadcrumb Navigation for Your Blog (Read : Installer Breadcrumb Navigation On Blogspot).

In this post, I will share about how to make Related Post With the scroll function. Related post useful as a reference for visitors to find articles related to the article he was reading. It can make our blog visitors last a long time to read our article on the our blog.

Okay, let's start how to build widgets Related Posts With Scrolling Functions under your blog post.
1. Login to your blogger
2. From Dashboard, click the Layout
3. On the menu tab, select Edit HTML
4. Check the small box Expand Widget Templates
5. Find the code <p> <data:post.body/> </ p>
    Put the following code after the code :

<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>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>

6. Now find this code ]]></ b: skin>
    Place the following code before the ]]></ b: skin> code :

. rbbox {border: 1px solid # D8D8D8; padding: 5px;
background-color: # E0F8E0;-moz-border-radius: 5px; margin: 5px;}
. rbbox: hover {background-color: # EFFBEF;}

Note:
Change the code marked in accordance with the color of your blog, if you do not know the color code, please check the HTML Color Code
# D8D8D8 : Color edge (border)
# E0F8E0 : Color Background
# EFFBEF : Background Color, too, but will be visible when the box is highlighted with the pointer

7. Then Click Save Template


Problems for Using Readmore :
For users of the facility Readmore then you sometimes see Related Post Widget also appears on your Home page, if you just want a Related Post only appear on pages Post! So Here's the solution!!

• Find the code <data:post.body/>, When you find the code then you find there are two codes in your template (Usually there on the blog users readmore). Paste Code Related to the post after searching a second code of <data:post.body/>
• Then Click Save Template

Look at the results ! Ok so this tutorial, hopefully useful for all of you, Do not forget to comment. Thanks

.:: HAPPY BLOGGING ::.

Related Post:

Comments