Cara Menciptakan Artikel Terkait Dengan Gampang Di Bawah Postingan Blog

Membuat Artikel Terkait  - Tampilan related post atau biasa disebut artikel terkait ini memiliki tampilan yang bermacam-macam menurut selera dan kemampuan teman untuk membuatnya..

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

model dalam menampilkan artikel terkait ini bermacam-macam juga ada yang memakai gambar atau thumbnail, related post yang hanya goresan pena saja, bergeser dengan sendirinya memakai java script, dan masih banyak lagi.

Bingung mencari cara gampang untuk menciptakan related post di bawah postingan?

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

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

jikalau teman 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 dikala loading suatu blog terlalu berat karena memang itu cukup besar lengan berkuasa di mata google dan ini merupakan salah satu langkah dalam seo on page..

jikalau teman penasaran kecepatan blog, teman 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 ialah sekumpulan link judul yang berfungsi untuk memudahkan pembaca untuk menemukan konten yang hampir sama dengan halaman yang sedang di buka.

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

apa keutungan yang di sanggup dengan memasang artikel terkait ??

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

Kenapa??

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

Namun hingga disini teman harus bakir menciptakan judul untuk merangsang pembaca teman 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 klarifikasi maka secara tidak pribadi blog teman 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 pribadi bagaimana menciptakan related post.

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

Pilih tema dan edit html..

Setelah script template teman 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/AVvXsEiI1hAFu4lDlYkSHykTlrXxx1Q3th4RNDHf7Y4msWrJNSLdLnPodCm9xk1oKV5WL5IKUz8bYdIl27VggH_fXWg-35RFq1x-YeUhCcfdMeeUU4KVl32P8RWHEPUVGrETVtK7NJWVd7NkRIHO/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, kemudian 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, alasannya ialah 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 melaksanakan langkah langkah di atas.

Berikut sedikit klarifikasi untuk warna-warna script di atas yang teman 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 pribadi berkomentar dengan sopan atau ke Contact Us.

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

Jangan lupa balik and cmiiw

Tweet

Subscribe to receive free email updates: