Cara membuat related post dibawah posting blogger

Setelah membuat related post di side bar blog seperti yang kita bahas sebelumnya, kali ini kita akan belajar membuat related post atau artikel terkait yang di letakan pada bagian bawah halaman blog kita di blogspot.

Sebenarnya penempatan artikel terkait atau related post sama saja baik di bagian bawah halaman maupun di bagian side bar blog. Hal ini tergantung selera Anda mana yang lebih bagus kelihatannya.

Baiklah, sekarang langsung saja ikuti panduan dan tutorial cara membuat related post atau artikel terkait di bawah halaman posting berikut ini:

1. Login menggunakan Username dan Password google account atau gmail Anda di blogger.com

2. Dari halaman dasbor/dashboard, pilih dan klik Design atau Rancangan.

3. Klik Edit HTML dan tandai Expand Widget Template (sebaiknya download dulu template Anda sebagai backup)

4. Cari kode ini
<data:post.body/>

5. Letakkan script code berikut ini di bawah kode diatas (lihat kode di nomor 4):

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Related Post</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

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

maxNumberOfPostsPerLabel = 100;
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;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>

6. Save Template, lihat hasilnya.

Selamat mencoba dan semoga berhasil.

sumber: Blogger Group

Ditulis Oleh: Bli Wahyu

8 komentar:

  1. udah deh.. udah bisa. makasih ya. hehe

    BalasHapus
  2. yaw, sama-sama kawan... ^-^

    BalasHapus
  3. thx gan, berhasil... hehehheh
    cihuiiii.. blog ane, lebih bagus lagi, thx yahhhh

    BalasHapus
  4. Tampilannya kok jelek, gak sama seperti di blog ini?

    BalasHapus
  5. kayaknya perlu dieksperimenkan ini.thanks bro ud share, slam blogger :)

    BalasHapus
  6. wah mantap ne..boleh di coaba untuk memperindah blog,,janan lupa kunjungi juga blog saya gan

    BalasHapus