Penting!! Sobat Blogger yang ingin re-post atau menulis kembali artikel kami diblog/website Anda, harap lihat halaman DISCLAIMER ( beberapa blog telah diproses di Google Removal Content ) Setiap tindakan pelanggaran hak cipta (COPAS) akan dilaporkan, TANPA pemberitahuan.

Membuat dan pasang artikel terkait atau related post pada blog, baik itu dipasang sebagai widget atau dipasang pada postingan artikel memang merupakan hal yang dibutuhkan bagi setiap blogger. Betapa tidak, dengan pasang artikel terkait / related post tentu akan menambah pageview blog Anda. Tentu pengunjung juga akan mudah mencari dan medapatkan informasi atau artikel yang berhubungan dengan topik yang dibaca.

Tutorial Blogger proBlogiz membagi tip dan trik Seo OnPageCara Buat dan Pasang Artikel Terkait / Related Post di postingan artikel. Penempatan related post tepat dibawah postingan artikel tentu memberikan keuntungan dan kemudahan bagi pengunjung maupun si-empunya blog. Karena pengunjung dapat menemukan artikel-artikel berkaitan diakhir artikel utama dan mereka akan senantiasa berlama-lama di blog Anda dan meningkatkan kualitas pageview blog dan memberikan value SEO yang baik.

Pada pemasangan artikel terkait kali ini, kode script related post tidak menggunakan thumbnail (gambar) melainkan hanya memakai sebuah icon RSS, yang relatif lebih cepat dimuat atau loading pada web browser. Untuk menambah menarik dan tampilan yang lebih professional dilengkapi dengan auto scroll, sehingga tidak banyak memakai halaman web page / blog Anda.
Contoh pemasangan related post dengan icon RSS, seperti gambar screenshot di bawah ini :


 related post
related post pada blog

Cara Buat dan Pasang Artikel Terkait di Postingan

Langkah Pertama

Masuk Blogger>>> pilih Template >>> edit HTML
backup template jika perlu
Tekan F3 >>> cari kode tag </head>
Copy kode script dibawah ini :
Dan pastekan atau letakkan semua code CSS tersebut sebelum tag </head>

Langkah Kedua

Masih di edit Template >>> cari kode <data:post.body/>
Copy dan pastekan kode HTML dibawah setelah tag <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <font face='Arial' size='3'><b>Artikel Terkait : </b></font><font color='#151515'><b:loop values='data:post.labels' var='label'><data:label.name/><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=10&quot;' type='text/javascript'/></b:if></b:loop> </font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div></b:if> 
note :
pada beberapa template terdapat lebih dari satu tag <data:post.body/>, oleh karena itu Anda bisa pilih salah satu kalau gagal tag yang pertama pilih tag yang kedua atau cobalah semuanya dimana yang berhasil dan ganti color font sesuai dengan blog Anda 

Kemudian silahkan Save Template.

Selesai. Anda bisa lihat hasilnya pada halaman postingan blog, dibagian paling bawah post artikel akan nampak Related Post / Artikel Terkait yang simple dengan icon RSS.

Selamat mencobanya Pasang Artikel Terkait di Post di blog Anda
Apabila menemukan kesulitan atau saran silahkan ditanyakan di form komentar.
Artikel Terkait Lainnya:
Click here for comments

20 komentar

Trima ksih, tuturial yang bagus dam kebetulan sudah saya lakukan hal tersebut...Happy blogging sob

REPLY

oia kang gmn cara letakkannya pas di atas komentar?
n gmn caranya agar "artikel terkait" g ikut scrol? mksd na, tulisan "artikel terkait" nya ada di atas kotak scrol.
mohon pencerahan na kang..
n makasih banyak atas ilmu na. :D

REPLY

maaf baru balas mas,
untuk Related Post yang Anda maksud, itu harus dengan penamabahan kode CSS untuk box, dan kode HTMLnya seperti <DIV class='.box'> di template

Atau untuk lebih jelasnya Anda bisa baca Membuat Related Post Dengan Fungsi Scroll-DropDown

Artikel diatas mungkin yang Anda cari.

Untuk penempatan diatas form komentar sebenarnya langkah diatas sudah benar, kalau yang anda maskud Related Post di situs ini, itu karena saya pasang permalink box diatas form komentar ini.

terima kasih, semoga membantu

REPLY

manjur gan, nice post. btw kalo kita mo ganti background warnanya gmn ya? thx.

REPLY

halo damar
tinggalin
tambahin kodenya, contoh: {background: #eeeeee;} pada #related-posts {....}

REPLY

gan sya ada kendala...tulisan artikel terkait sudah kluar tpi tdk ada scrolnya dan isi,ya
apakah karna sy menggunakan widget linkwithin...apabila iya gmn cara menghapus,y karna saya kurang puas dg widget itu karna hanya menampilkan 5 postingan tdak sperti related post yg bisa melihat semua post kita...yg dari agan sudah kluar tulisan artikel terkait,y aja scroll dan isi postingan tdak ada,cuma ada jarak setelah itu widget linkwithin gan...cek blog saya gan..mohon pencerahaannya gan..

REPLY

harus diberi label mas postingannya
coba cek yb ini pake scroll juga http://problogiz.blogspot.com/2012/11/membuat-related-post-dengan-fungsi.html

REPLY

Mantap gan,berhasil.. ijin copas ya
http://seventhwebs.blogspot.com

REPLY

bisa dicoba nih, tapi masih agak kurang jelas untuk newbie seperti saya ..hehe

REPLY

postingannya diberi nama label mas

REPLY

Nice Post Mas,,,,
Numpang jalan2...
Salam

REPLY

saya sudah coba pasang mas, tapi pas script yang kedua sepertinya kena di karena sebelumnya waktu masang script "readmore" kode kan harus dihapus dan diganti dengan script yg akan dipasang

sejak itu setiap mau masang script lain di kode gak bisa lagi tampil hasilnya di posting blog, mohon solusinya. trims

REPLY

sukses gannn,thankks buatt widgetnyaa

REPLY

punya saya kok ga ada kode nya yah,,
ada solusi lain?

REPLY

info yang sangat bagus mas,,,info yang sngat bermanfaat sekali buat saya,,terima kasih banyak ya...semoga selalu menciptakan karya-karya terbaiknya,, dan selamat berkarya...mantap!!

REPLY

Mantap neh tutornya.. ijin tempelin ya bang
http://www.cyberblanks.blogspot.com

REPLY

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

Artikel Terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|