2 Cara simple menambahkan 'Related Post' pada blog

Bingung dengan terlalu banyak artikel yang dipost sesetengah blogger yang menerangkan cara menambahkan 'Related Post' pada blog menggunakan scripts atau code? Jangan risau, pada tutorial ini saya akan menerangkan 2 cara simple menambahkan 'Related Post' pada blog anda. 

Bagi anda yang mempunyai blog tentu anda berminat untuk menambah 'Related Post' di dalam blog anda. Tentu anda tertanya-tanya mengapa perlu menambah' Related Post' ke dalam blog anda. 

Pertama untuk menjadikan pengunjung blog anda mengambil masa lama untuk 'expore' blog anda. Kedua jika anda meletakkan iklan 'pay per click'  'Related Post' ini amat penting dan wajib dipasang di blog anda bagi membolehkan pengunjung blog anda berlama-lama di blog anda dan peluang untuk pengunjung terclick iklan anda adalah lebih besar.

'Related Post' ini juga berfungsi menarik pengungung blog yang sama pada masa lain. Di artikel ini saya akan menerangkan 2 cara simple menambahkan 'Related Post' pada blog anda.

Cara Pertama (Cara agak Susah kerana melibatkan coding). 

Nota : Script ini bergantung kepada template anda.

1. Login di akun Blogger Anda.

2. Cari Template / Edit HTML / cari code (gunakan control+F) ]]></b:skin>, kemudian copy dan pastekan kode CSS di bawah ini  tepat diatas kode ]]></b:skin> tadi.

/* Related Post */













.related_posts{margin-top:5px;padding:0 10px;border:1px solid #B7E8FF;background:#EEEEEE;}




.related_posts h4{color:#111;font:normal 19px/19px Arial, sans-serif;letter-spacing:-0.5px;padding:7px 0;border-bottom:solid 1px #fafafa;}
.related_posts a{color:#000;}
.related_posts ul{padding:0;}




.related_posts ul li{list-style:none;padding:4px 5px 4px 17px;border-bottom:1px solid #f9f9f9;line-height:18px;background: #EEEEEE;} 

3. Seterusnya, cari code ini (gunakan control+F) <div class=’post-footer-line post-footer-line-1′>. Kemudian copy dan pastekan kode HTML di bawah ini tepat di bawah kode <div class=’post-footer-line post-footer-line-1′>. 

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

<div class='related_posts'>




<h4>Artikel Terkait</h4>
<div class='widget-content'>




<script type='text/javascript'>
<div id='data2007'/><br/><br/>




var maxNumberOfPostsPerLabel = 10;
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfLabels = 2;




function listEntries10(json) {
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 2;
var ul = document.createElement(&#39;ul&#39;);




json.feed.entry.length : maxNumberOfPostsPerLabel;
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;




var li = document.createElement(&#39;li&#39;);
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 a = document.createElement(&#39;a&#39;);
a.href = alturl;




if (json.feed.link[l].rel == &#39;alternate&#39;) {
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++) {




var h = document.createElement(&#39;b&#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);
h.appendChild(txt);




var script = document.createElement(&#39;script&#39;);

var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;




<b:loop values='data:posts' var='post'>

+ 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;




var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
<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);
labelArray.length : maxNumberOfLabels;




</b:if>

if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>




</div>

4. Akhir sekali, Save template dan View Blog. 

Cara Kedua tidak melibatkan scripts
1. Pergi ke linkwithin

2. Setelah masuk, isikan semua yang perlu seperti, email, blog link anda contohnya www.contoh.com, platform, width dan 'Get Widget'.

Setelah langkah dua selesai, Windows ini akan keluar, sila pilih 'Install Widget'













Setelah itu, keluar pula windows ini. isikan apa yang patut dan tekan 'Add Widget'.









3. Anda akan dibawa semula ke page blogger anda di bahagian template. Disana anda hanya perlu menempatkan semula box linkwithin ke bawah kotak Main.

4. Save template anda. Bagi setengah template ia mengambil beberapa minit untuk load 'Related Post' tersebut. Sila tunggu. Harap berjaya.