Cara Membuat Artikel Terkait di Bawah Postingan Blog

Cara Membuat Artikel Terkait di Bawah Postingan Blog - Artikel Terkait atau Related Posts merupakan sebuah widget artikel terkait yang berfungsi menampilkan sejumlah judul artikel yang berkaitan dengan artikel yang sedang dibaca sesuai dengan label baik itu berbentuk link, thumbnail ataupun link saja dan terletak di bawah postingan blog. Maka dengan begitu widget ini akan menarik minat para pembaca di blog anda yang sedang membaca salah satu artikel untuk membuka atau meng-klik salah satu judul artikel di dalam artikel terkait.

Ada banyak bentuk widget artikel terkait di internet, ada yang disertai gambar maupun tanpa gambar, icon yang terletak di samping judul dan sebagainya. Dalam hal ini saya akan share sebuah related posts/artikel terkait tanpa gambar ataupun icon disamping judul dengan tujuan ketika pembaca mengakses salah satu artikel di blog anda, menjadi tidak akan terasa lama atau memberatkan loading halaman blog. Karena keberadaan gambar ataupun icon merupakan salah satu penyebab beratnya loading halaman blog ketika diakses. Berikut contoh penampakan artikel terkait atau related posts yang akan saya share kepada sobat semua.

Related Posts

Bagaimana sobat? Apakah anda berminat? Jika anda berminat silahkan anda simak langkah-langkahnya.

Cara Membuat Artikel Terkait atau Related Posts di Bawah Postingan Blog

1. Silahkan login ke akun blogger anda.
2. Pada menu blogger atau dashboard, pilih menu Template atau Tema.

3. Klik Backup/Cadangkan yang terletak di sebelah kanan atas untuk membackup semua kode template blog, hal ini dilakukan untuk berjaga-jaga jika terjadi kesalahan saat anda melakukan edit template.

4. Klik Download Tema, setelah selesai silahkan klik Tutup.

5. Selanjutnya klik Edit HTML.

6. Cari kode </head>, gunakan Ctrl+F pada keyboard untuk mempermudah pencarian.
7. Jika sudah ketemu, copy-paste kode dibawah ini tepat diatas 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>

Script atau kode diatas fungsinya untuk mengatur Artikel Terkait kita agar nanti setiap artikelnya masuk dalam Unordered List ( ul ) jadi nanti kita bisa mengeditnya dengan mudah melalui css.
8. Kemudian cari kode <data:post.body/>, jangan lupa untuk menggunakan Ctrl+F untuk mempermudah pencarian.
9. Copy-paste kode berikut ini tepat dibawah kode <data:post.body/>.

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<h4>Artikel Terkait</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>

Catatan :
- Tulisan 5 warna merah adalah jumlah link judul yang akan ditampilkan, kalian bisa menggantinya dengan jumlah yang anda inginkan.
- Setiap template biasanya memiliki dua sampai empat buah kode <data:post.body/>.
- Silahkan anda mencoba meletakkan kode diatas, dimulai dari kode <data:post.body/> yang pertama sampai kode <data:post.body/> ke empat. Pada kode template blog saya terletak pada kode <data:post.body/> yang kedua.
- Jika kebetulan anda pernah memasang tombol like and share seperti yang pernahkan saya bagikan pada artikel yang berjudul Memasang Tombol Like Share di Bawah Postingan Blog, silahkan anda letakkan kode diatas dibawah kode tombol like share yang pernah anda pasang dahulu.
10. Jika sudah berhasil dan muncul ditempat yang anda inginkan, silahkan anda klik Save Template atau Tema.

Dengan memasang artikel terkait di bawah postingan blog, maka akan menarik minat pembaca blog anda untuk membuka salah satu judul artikel yang berada di dalam artikel terkait serta menambah page view blog.
Demikian artikel tentang bagaimana cara membuat artikel terkait di bawah postingan blog. Semoga bisa bermanfaat. "Happy Blogging"

Related Posts :

Silahkan klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG