Cara Membuat Related Post (Artikel Terkait)

Tutorial blog kali ini akan membahas mengenai cara membuat related post atau artikel terkait di blogspot. Artikel atau posting terkait yang dimaksud di sini adalah artikel yang berada pada kategori atau label yang sama. Tentunya sobat blogger sudah mengerti dengan maksud saya bukan.

Related post ini tentu akan memudahkan pengunjung dalam menemukan artikel-artikel yang berhubungan dengan artikel yang sedang dibaca. Selain itu, related post juga akan berpengaruh terhadap SEO. Jadi, saya sarankan sobat untuk menggunakan cara ini.

Nah, bagi sobat yang ingin membuat related post di blogspot ikuti tutorial berikut ini.

Log ini ke akun blogger sobat;

1. Pilih menu Rancangan » Edit HTML;
2. Beri tanda centang pada tulisan Expand Template Widget;


3. Carilah kode <data:post.body/>,biasanya terdapat 2 kode ini jika sobat memasang readmore, kemudian copaskan kode berikut tepat dibawah kode <data:post.body/> yang kedua.
   

<!-- BAWAH POST -->

<br/>

<a href='http://www.wakrizki.net/2011/01/cara-membuat-related-post-artikel.html' target='_blank' title='klik, untuk mengetahui cara membuat artikel terkait'><b style='color:red;'>Baca Juga Artikel Menarik Lainnya :</b></a>

<DIV style='margin:0; padding:10px;height:300px;overflow:auto;'>

<DIV id='rizki'/>
<SCRIPT type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 5;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 5;
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;rizki&#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>

<!-- membuat posting terkait selesai -->

5. Kemudian simpan template sobat dan lihat hasilnya.

Ket :

1. Lihat tulisan yang berwarna merah, sobat bisa merubahnya sesuka hati sobat;
   
2. Kode yang berwarna biru adalah untuk membuat scroll sehingga jika ada banyak postingan yang tampil hanya sedikit;
   
3. Rubahlah ukuran height:500px; dengan ukuran sesuka hati sobat untuk membuat tinggi halaman. Tapi jika sobat ingin menampilkan semua artikel terkait, sobat tinggal menghapus kode div tersebut.
   
4. Tutorial ini saya sisipkan link back ke blog ini, jika sobat berkenan, tolong jangan dihapus.

Artikel terkait :