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.
  1. Log ini ke akun blogger sobat;
  2. Pilih menu Rancangan » Edit HTML;
  3. Beri tanda centang pada tulisan Expand Template Widget;
  4. 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 -->
  1. 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.

34 Komentar "Cara Membuat Related Post (Artikel Terkait)", Baca atau Masukkan Komentar

nday said...

wah...trim"s banget ni...atas info nya,,
bolehdi coba ni,,menarik jg kayak nya ni,,,!

Eckhart™ said...

Sudah dicoba di tmpt sya & berhasil.
Trima kasih Om......
Klo ada waktu maen ke Blog ku.

lintas dunia said...

keren abis, sangat bermanfaat kawan.

kunjungi blog aye juga kawan

Latif said...

Mampir untuk menimba ilmu.. :D salam kenal

Distrubinfo said...

Terima kasih untuk artikelnya,,akhirnya saya dapat juga,,tutorial di blog lain gak ada yang berhasil,
^^sukses slalu

Media Joko said...

makasi inponya...

kunjungan balik yach....

http://mediajoko.blogspot.com/

lintas dunia said...

mantab infonya sob

kifli said...

nice to post ,,, visit me back

vina said...

makasih infonya...

mau blog anda jadi mesin pencari uang..
kunjungi blog ku . tips supaya blog anda menjadi mesin pengumpul uang

sari1099|bisnis internet said...

terima kasih ya tutorialnya, kebetulan blog saya belum pasang artikel terkait

Seribu Info said...

Bagus banget tutorialnya..
sangat membantu :)

Kunjungi yaa www.faktakita.com

Thanks :)

Rabbani Palimbano said...

Naruh teks daftar isinya dimana sob..

sejuta trik blogger said...

dari awal ane ngeblog, ampe sekarang, belum bisa deh buat artikel terkait, ane coba dlu yang ini, moga ini bisa. makasih gan

MasTer Q said...

Alhamdulillah, senang bisa berbagi dengan para pembaca setia,,
Thanks atas kunjungannya,,

Bun No Ichi said...

Sempurna juragan hasilnya :D
thanks
mampir di mari ya juragan http://bunnoichi.blogspot.com/

gio887 said...

makasih infonya
tapi kok jadi gini ya??
cara menghilangkan di halaman utama gimana???

MasTer Q said...

@gio887 mungkin ada sedikit kesalahan saat anda membaca tutorial ini, letakkan kode tersebut setelah kode data:post.body yang kedua, jika masih belum berhasil, coba baca artikel tentang fungsi kode b=if, klik disini

blogger bondowoso said...

thanks gan dah di share

Aslikan Ahmad said...

trims sobat tipsnya, sudah ku coba n hasilnya alhamdulillah ok punya,,,,

Ardianta Sisgo said...

thanQ

gopar-it said...

thaks gan,, menarik tips nya,,

Ricky Pesiwarissa said...

kunjung balik gan

Lowongan kerja said...

Trima kasih Om......

lowongan kerja terbaru said...

Sepertinya layak dicoba nih tri. Related post kadang membuat pengunjung blog makin betah baca2 artikel lainnya yang menarik.

belajar said...

sebenarnya hubungannya dengan seo itu gimana sob..? mohon dijelaskan..nubi gak ngerti nih,,,

kta dbs said...

bagus sekali post nya

sangat bermanfaat bagi saya

terimakasih

Sukalagu said...

Mantab gan, informasi yang baik buat para blogger newbie

Ardian Caisar said...

Terima kasih mas Tutorialnya :D

info lowongan said...

related post kalo ditaruh di sidebar gmn caranya mas? selama ini pake scriptnya feedburner

budiana wayan said...

thanks artikelnya mantaff kunjungi saya juga
http://smbjagasatru.blogspot.com/

Riko Yudiansyah said...

terimakasih kawan infonya, sekarang blog cerita cinta milik saya sudah memiliki related post.
good luck ya.

Ragiel satrio said...

Teimakasih infonya sob

Fatahillah Hendrawan said...

Wah, thanks banget ya gan!! Saya Terapkan ya!!

Abdul Rahman said...

wah,, kode htmlnya panjang juga ya... lowongan kerja.

Followers