Monday, December 19, 2011

Let's Create Beautiful Related Post Box Below Your Post

1 komentar
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
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
<b:if cond='data:blog.pageType == &quot;item&quot;'>
6. And then paste this code after the code on step 5
<a href=""><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;; k++) {
if ([k].rel == &#39;alternate&#39;) {
alturl =[k].href;
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);
for (var l = 0; l &lt;; l++) {
if ([l].rel == &#39;alternate&#39;) {
var raw =[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;);
var div1 = document.createElement(&#39;div&#39;);
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
<script type='text/javascript'>RelPost();</script>
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"
Source :

1 comment:

My photo
15 years old blogger from Indonesia. Yahya Ayyash. Born on 4th March 1996. Started blogging since 2011, part time blogger. Just an amateur web designer, graphic designer and blogger. Student at SMAN 9 Bandung, at Ten Three Class. Please follow my twitter and like my facebook fan page.