Cara Membuat Artikel Terkait Dengan Mudah Di Bawah Postingan Blog

Membuat Artikel Terkait  - Tampilan related post atau biasa disebut artikel terkait ini mempunyai tampilan yang beragam berdasarkan selera dan kemampuan sobat untuk membuatnya..

dengan menampilkan artikel terkait di bawah postingan atau di tengah tulisan artikel maka kita bisa mengatasi bounce rate blog yang terlalu tinggi.

model dalam menampilkan artikel terkait ini beragam juga ada yang menggunakan gambar atau thumbnail, related post yang hanya tulisan saja, bergeser dengan sendirinya menggunakan java script, dan masih banyak lagi.

Bingung mencari cara mudah untuk membuat related post di bawah postingan?

Tenang sobat, cara yang akan saya sampaikan ini cukup mudah dan sederhana.

Saya sendiri menggunakannya untuk menghiasi sedikit postingan dengan beberapa artikel terkait atau related post.

jika sobat ingin membangun blog pribadi yang ingin blog tersebut ringan dan tidak berat loadingnya maka script untuk menampilkan artikel terkait berikut cukup ringan dan tidak terlalu memberatkan loading blog.

pasalnya saya juga tidak terlalu betah ketika loading suatu blog terlalu berat karena memang itu cukup berpengaruh di mata google dan ini merupakan salah satu langkah dalam seo on page..

jika sobat ingin tau kecepatan blog, sobat bisa mengetahuinya di poastingan cara mengetahui kecepatan template blog.

Pengertian Related Post

Sebelum saya melanjutkan ada baiknya saya sedikit jelaskan dulu apa itu artikel terkait ??

Artikel terkait atau related post adalah sekumpulan link judul yang berfungsi untuk memudahkan pembaca untuk menemukan konten yang hampir sama dengan halaman yang sedang di buka.

jika sobat bingung, coba sobat scrol ke bawah pada postingan ini maka akan terdapat beberapa artikel yang serupa dengan judul yang sobat sedang baca sekarang yaitu seputar blogger.

apa keutungan yang di dapat dengan memasang artikel terkait ??

1. Yang jelas memudahkan pembaca untuk menemukan beberapa artikel serupa.
2. Meningkatkan page view dari blog.
3. Dan mengurangi nilai bounce rate

Kenapa??

Ketika suatu blog mempunyai artikel terkait, si pembaca ketika selesai membaca secara otomatis akan melihat judul apa saja yang ada..

Namun sampai disini sobat harus pintar membuat judul untuk merangsang pembaca sobat untuk meng-klik judul tersebut..

Judul yang menarik, isi konten yang berkualitas dan informative, dan tentunya unik.

Ketika si pengunjung nyaman dengan isi blog sobat, sudah pastikan mereka tertarik dan ingat nama blog dan juga akan kembali lagi.

Dari sedikit penjelasan maka secara tidak langsung blog sobat bisa dikatakan Seo karna dari isi artikel, navigasi, dan pengunjung betah untuk berlama-lama.

Ternyata sudah panjang lebar penjelasannya.

Cara Menampilkan Artikel Terkait Dibawah Postingan Blog

Mari kita peraktekan saja langsung bagaimana membuat related post.

Saya pastikan anda sudah login di dalam akun blog masing-masing..

Pilih tema dan edit html..

Setelah script template sobat muncul, gunakan ctrl + f untuk mencari script ]]></b:skin> dan letakan script css di bawah ini di atasnya..

/* ----------ijo-gading.com---------------------------------*/
#related-postsku{float:left;width:100%;margin-top:5px;margin-left:0px;font-size:13px;font-family:Arabolical;margin-bottom:0px;}
#related-postsku a{text-decoration:none;}
#related-postsku a:hover{text-decoration:none;}
#related-postsku ul{border:medium none;margin:10px 0px 10px 0px;padding:0;}
#related-postsku ul li{display:block;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigqPLy_9qvN8w-_cdJbtFTnyW-z64HktgF2aPCMA3PoZKMXqz4BOAER3MGR9p5ofCxvKAF3mYOzBh6hwfOKpxQQn61hJjD6C7kQLdI6Jo5A5JsAj-H15nQer0n3sF4r9xSC5A8dhN-l_f6/s1600/arrow_state_grey_right.png") no-repeat 0 0;margin:0;padding-top:0;padding-right:0;padding-bottom:1px;padding-left:30px;margin-bottom:5px;line-height:2em;border-bottom:1px dotted #cccccc;} 

Lanjutkan dengan script di baawah ini dan paste di atas </head>

<!-- ijo-gading.com-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>
</b:if>

Setelah dua langkah tersebut, lalu cari lagi script <data:post.body/> dan letakan script di bawah ini di bawah script <data:post.body/>...

Letakan scriptnya di bawah script <data:post.body/> yang paling akhir, karena di dalam template biasanya terdapat lebih dari satu script <data:post.body/>…

<!--ijo-gading.com-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-postsku'>
<font #CC333B;font-family:Arial;'><b>Artikel Terkait: </b>
</font><font color='#fff'><b:loop values='data:post.labels' var='label'><data:label.name/>
<b:if cond='data:label.isLast != &quot;true&quot;'/><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=7&quot;' type='text/javascript'/>
</b:if></b:loop></font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
</b:if>

Setelah melakukan langkah langkah di atas.

Berikut sedikit penjelasan untuk warna-warna script di atas yang sobat bisa sesuaikan…

untuk font-family:Arial; sobat bisa mengganti jenis font nya
untuk Artikel Terkait: header judul
untuk max-results=7 jumlah artikel yang di tampilkan
untuk color:#CC333B warna tulisan

Oke demikin untuk sedikit tutorial yang saya tulis hari ini…

Jika ada pertanyaan atau pun saran bisa langsung berkomentar dengan sopan atau ke Contact Us.

Oke demikian dulu untuk postingan saya tentang Cara Membuat Artikel Terkait di Blog yang saya yakin tidak memberatkan waktu loading di blog sobat.

Jangan lupa balik and cmiiw