How To Create Beautiful Related Post Box Below Your Post

Hai guys do you know how to create beautiful related post box below your post? i'll give you a tutorial how to create beautiful related post box below your post. But remember maybe this related box isnt beautiful, its very simple. I just write the Title like this "How To Create Beautiful Related Post Box Below Your Post" because maybe it can increase my visitor, cause they are interested how to create a beautiful related post box below your post LOL. Thats the part of SEO.

---

1. Login to blogger
2. Layout/Design - Edit HTML - Expand Widget Template
3. Find this code

</b:skin>

4. And then paste this code below before </b:skin> code

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

5. After that lets find this code

<data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

6. And then paste this code after the code on step 5

<br/>
<a href="http://blogyahyagan.blogspot.com"><h2>You Might Also Like :</h2></a>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:0px 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>
<b:else/>

7. Save your template

---

Ok thanks for visit my blog. If you've some problem in this tutorial "How to create Beautiful Related Post Box Below Your Post"

Lets see this awesome web design tutorial How To Create A Rounded Corner On Blogger Widget