Membuat Artikel Terkait di Sidebar (Related Post)

10/23/2011 Blog Tutorial Blogger Related Post Tips Trik Blog Tutorial Blogger Widget
Salam kangen semua para blogger, lama sekali saya gak posting-posting sudah hampir satu bulan lebih, ya dikarenakan kesibukan pribadi yang tidak mau ditinggalin hehe.

Baik para sobat semua kita langsing aja kali ini saya akan membahas tutorial tentang cara membuat Artikel Terkait di Sidebar (related post)dimana pengunjung akan disuguhkan artikel terkait milik sobat di sebelah postingan atau di sidebar, bukan dibawah postingan yang selama ini kita lihat.



Sebenarnya artikel terkait ini bisa juga diletakkan dibawah postingan, tapi saya tidak akan membahasnya karena sudah pernah saya bahas di postingan saya yang lalu.



Baiklah, sekarang ikuti langkah-langkahnya dibawah ini :



Langkah I

1. Seperti biasa login dulu ke blogger.
2. Masuk ke Elemen Halaman.
3. Kemudian Tuju Edit HTML.
4. Klik Expand Template Widget.
5. Letakkan kode berikut ini sebelum kode </head>


<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>



6. Kemudian cari kode seperti dibawah ini :



<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>



7. Kemudian ganti kode di atas dengan kode di bawah ini :



<b:if cond='data:post.labels'><data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=15&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>


CATATAN :
Perhatikan kode max-results=15, angka 15, itu merupakan jumlah artikel terkait yang akan ditampilkan di sidebar. Sobat bisa menggantinya sesuai keinginan.


8. Simpan Template, sampai disini proses Edit HTML sudah selesai.
9. Sekarang sobat tuju Tata Letak, kemudian klik Tambah Gadget pada sidebar milik sobat.
10. Pilih yang HTML/Javascript, kemudian masukkan kode berikut :



<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>



11. Jangan lupa beri judul, lalu klik Simpan.



Sampai disitu sudah selesai pembuatan artikel terkait di sidebar. Namun artikel terkait akan selalu muncul di halaman depan blog, untuk membuat artikel terkait hanya muncul pada halaman postingan saja, maka sobat harus mengubah beberapa kode lagi.

Berikut langkah-langkahnya.

Langkah II

1. Klik Edit HTML.
2. Klik Expand Template Widget.
3. Cari kode yang seperti ini, dan sisipkan kode yang berwarna merah :



<b:widget id='HTML11' locked='false' title='Artikel Terkait Lainnya' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>



4. Kemudian klik Simpan Template.

PERHATIAN :
Pada kode yang berwarna hijau tebal adalah kode/kata judul widget yang tadi sobat buat.
Kemudian pada kode yang bercetak Kuning, itu sebenarnya sobat abaikan saja apa bila tidak sama kodenya.. karena itu hanya urutuan widget pada blog saja.
Nah, pada kode yang berwarna merah, itu sebenarnya kode yang berfungsi agar widget Related Post hanya tampil pada postingan blog saja.



OK, Mungkin tutorial kali ini sampai disini saja dulu, selamat mencoba aja dan semoga berhasil dan bermanfaat di hati para soba.


KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Loading



Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

31 comments

Pertamax nih.. :D

mantap juga,, tapi syg sidebar ane egk luas..jadi gk ada tempat hehee

Balas
This comment has been removed by a blog administrator.

Makasih kang Fatur infonya.
Karena saya newbie Saya mo coba di blog saya yang laen yg buat ujicoba.
Biar kalo salah langkah g pusing2 amit..
Hehehe...
Salam kenal Kang Fatur..

Balas

Makasih kang Fatur infonya.
Karena saya newbie Saya mo coba di blog saya yang laen yg buat ujicoba.
Biar kalo salah langkah g pusing2 amit..
Hehehe...
Salam kenal Kang Fatur..

Balas

@http://worldsport-blogspot.blogspot.com Sama-sama GAN, met mencoba aja semoga berhasil n bermanfaat

Balas

Very good information you provide. I like this code, maybe will try it on my blogger.
http://www.pfinusa.com & http://www.pfinusa.blogspot.com

Balas

Makasih sob atas berbagi triknya nih..jadi followers sini.Disimpan dulu mungkin nanti lain waktu butuh variasi seperti ini bisa dicoba

Balas

Kunjungan silaturahmi pagi hari dan mendapat ilmu kembali...
Terima kasih sahabat atas berbagi ilmunya

Balas

@webmdmk Terimakasih kembali saya sampaikan n salam silaturahmi

Balas

takbir dah berkumandang…esok raya..ampun dan maaf kiranya ada salah serta silap selama kita bersama…

Balas

Ambil batu asah parang,
Tengah laman lembu terlentang;
Aidil Adha disambut riang,
Jangan lupa pada yang malang.

Balas

kok langkah ke enam gak ketemu d blog aku.....
gmna mau ganti tulisannya gan?
:((

Balas

cara itu sepertinya sudah gak mempan gan,,,mohon solusinya

Balas

kenapa di template saya muncul "undefined" di antara postingannya..
mohon pencerahannya bang

Balas

Mantaf kang ,, langsung izin Praktek . . .

Balas

ane udh coba om,,
tapi ga keluar,,,
kumaha tuh,,,??
http://indo-parfum.blogspot.com
http://yan-9.blogspot.com

Balas

Wah keren tutorialnya mas, saya sudah follow, ditunggu follow baliknya mas, Terimakasih.

Balas

wah mantap ini tips..
langsung saya terapin di http://thephatar.blogspot.com
thaks gan infonya...
salam kenal...

Balas

wah makasih gan, kebetulan ane lagi cari cara bikin artikel terkait buat blog ane yang isinya tutorial komputer

Balas