How to Add Related Post for Blogger

English Version
Hello there!

Today DindingCoret will share a blogger hack tutorial, How to Add Related Post for Blogger Blog. This widget will appear after your blog post and show links to other post in the same category/label/tag. With this hack, your reader will stay longer in your blog because they read related post they are interested in.

The great thing of this hack are you can limit the related post link, there are no duplicate link, and you can customize the code easily!

So here are the steps :

Go to your template editor, Design > HTML Editor.
Do not forget to Download your existing template! So when there are an error appear you have a backup.
Check the check box "Expand Widget Templates".
See the code below, add the code before </head> tag.

Now, search the <data:post.body/> tag. If you can't find it anywhere, some template have the tag like this : <div class='post-body'>
Add the code below after the tag you searched for

<b:if cond='data:blog.pageType == "item"'> <div id="related-posts"> <font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div></b:if>

Last step, save your template and you're done! =]

Customize the Code :

The default setting of the code are :

Five related post links appear.
Link color : Blue.
RSS image for "Unordered list" list of link.

If you want show more than 5 related post link, then you should change this : max-results=5 in the second code.

Change the link color :
In the CSS code, search this code #related-posts a { text-decoration : none; } then add color:#.......;. For example : #related-posts a { text-decoration : none; color:#FFFFFF;}

Change RSS image :
In the CSS, search this code background : url("http://a.imageshack.us/img85/8260/rssn.png"). If you don't want any image, just delete it. But if you want change the image, replace the URL with your image URL.

If you have any questions, please do not hesitate to asking in comment form. We are happy to help you. =]
Oh, and don't forget to give us a feedback so we can understand about your feel of this tutorial.

Versi Bahasa Indonesia

Cara Menambahkan Related Post pada Blogger

Nah, sekarang kita masuk ke seri bahasa Indonesianya! =]

Ini merupakan post pertama yang menggunakan bilingual, alias dual bahasa. hehehe..
Pada kesempatan ini DindingCoret ingin bagikan cara untuk menambahkan Artikel Yang Berkaitan atau Related Post. Kegunaan hack ini adalah untuk menampilkan artikel yang sama dalam satu kategori/label/tag. Tujuannya adalah saat pembaca blog sobat melihat artikel yang berkaitan dengan artikel yang dia baca maka pembaca dapat tinggal lebih lama pada blog sobat.

Kelebihan hack ini dibandingkan dengan hack yang lain :
(1) Dapat diatur banyak link yang muncul. (2) Tidak akan ada link yang sama, duplicate link. (3) Sobat dapat memodifikasi tampilan dengan mudah.

Langkah-Langkahnya

Masuk ke dalam Template Editor sobat Design > HTML Editor.
Jangan pernah lupa untuk Download Template sobat! Bahaya kalau sampai lupa! Bayangin aja kalau ternyata error dan template sobat cacat gimana? Jadi download biar sobat masih ada file backup.
Centang kotak dengan tulisan "Expand Widget Templates".
Lihat kode dibawah, mari di copy-paste sebelum kode </head> tag.

Sekarang cari kode :<data:post.body/>. Kalau sobat tidak dapat menemukannya, jangan khawatir karena mungkin juga bentuknya seperti ini : <div class='post-body'>, sekarang cari lagi kodenya =]
Setelah ketemu, salin kode dibawah ini tepat dibawah kode yang baru sobat cari tadi

Langkah terakhir! Save template sobat =] Nah, santai sejenak. Siapkan teh atau kopi dulu deh... ^^

Yak, cukup minum tehnya.. Kita lanjuttt.. =]
Sekarang kita bahas satu persatu bagian-bagian dari kode-kode HTML dan CSS diatas.
Secara standar, related post akan muncul :

5 link artikel akan muncul.
Warna link : biru.
Gambar icon adalah gambar icon RSS.

Kalau sobat sudah senang dengan tampilan standarnya, ya ngga usah diganti-ganti lagi tapi kalau belum puas dengan tampilannya nih cara ngopreknya :

Kalau sobat ingin yang tampil lebih dari 5 link artikel maka sobat perhatikan kode ini : max-results=5, ganti angka 5 dengan keinginan sobat.

Ganti warna link :
Pada kode CSS, lihat kode ini : #related-posts a { text-decoration : none; } kemudian tambahkan color:#.......;. Untuk contoh aja nih : #related-posts a { text-decoration : none; color:#FFFFFF;}

Ganti gambar icon RSS :
Pada CSS, cari kode berikut : background : url("http://a.imageshack.us/img85/8260/rssn.png"). Kalo sobat ngga mau ada gambar iconnya, ya itu tinggal delete aja, tapi kalau mau diganti ya masukkan URL gambar sobat disana. Ocey? =]

Akhir kata, semoga tutorial ini bermanfaat. Kalau ada yang mau ditanyakan jangan sungkan untuk tanya di bagian komentar. Cheersss..

How to Add Related Post for Blogger

So here are the steps :

Customize the Code :

Cara Menambahkan Related Post pada Blogger

Langkah-Langkahnya

So here are the steps :

Customize the Code :

Cara Menambahkan Related Post pada Blogger

Langkah-Langkahnya

Get Updates!

DindingCoret Community

Blogging

Photoshop

Other

Blog Archieve

Newest Post