Cara Membuat Related Posts Di Bawah Postingan Blog

Z-T Blog - kali ini saya akan berbagi membuat Artikel Terkait atau Related posts di bawah postingan, untuk apa artikel terkait ini..? mungkin sobat sudah tahu tujuannya. cukup mudah saja tujuannya agar pengunjung blog kita mengetahui artikel apa saja yang berhubungan yang artikel yang dia baca, selain widget Random Post , related posts atau artikel terkait ini menampilkan post berdasarkan category atau label yang sedang di baca pengunjung, siapa tahu adanya related posts ini bisa menambah pengunjung blog sobat dan pastinya terhindar dari dari Bounce rate ,oke langsung saja ke caranya.. :)

1. Masuk Ke Template (lebih baik di backup terlebih dahulu, untuk jika terjadi kesalahan)
2. Edit HTML
3. Centang Expand Template Widget
4. Lalu Cari Kode Di Bawah Ini

]]></b:skin>

     
     5.  Lalu letakan kode di bawah tepat di atas kode 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;}

Catatan :

• Kode yang berwarna Merah adalah warna sisi dari related posts, bisa di ubah jika perlu, lebih jelas bisa lihat gambar di bawah..
• Kode yang berwarna Orange adalah warna background dari Ralated Posts, ubah jika perlu.. :)

     6.  Lalu Cari Kode Dibawah ini

<div class='post-footer-line post-footer-line-1'>

     

     7.  Lalu Masukkan kode di bawah ini tepat di bawah kode tadi

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related_posts'>
<div class='widget-content'>
<h4>Related Posts</h4>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 10;
var maxNumberOfLabels = 2;
maxNumberOfPostsPerLabel = 11;
maxNumberOfLabels = 2;
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;data2007&#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>
</div>
</b:if>

Catatan :

• Kode yang berwarna Kuning adalah nama yang akan di tampilkan, jika mau ganti, silahkan di ganti jika perlu

     8.  lalu simpan dan lihat hasilnya.. :)

nanti hasilnya akan seperti ini.. 

selesai.. kerenkan..? :D ,semoga bermanfaat untuk posting hari ini.. ,semoga related post ini bisa menambah pengunjung sobat.. jangan lupa tinggalkan jejak,terima kasih.. :)