Cara Menciptakan Related Post / Artikel Terkait Di Blogger

Ada beberapa cara menciptakan artikel terkait di blogger yang sanggup kita gunakan.

Sobat, pada kesempatan kali ini saya akan menuliskan bagaimana cara menciptakan related post di blogger sederhana tanpa gambar / thumbnail.

Artikel terkait ini hanya akan menampilkan judul dari artikel terkait berdasarkan label dengan jumlah artikel terkait yang sanggup kita tentukan sesuai keinginan.

Oke, mari kita mulai.

Membuat Related Post Sederhana Tanpa Thumbnail

Ada beberapa cara menciptakan artikel terkait di blogger yang sanggup kita gunakan Cara Membuat Related Post / Artikel Terkait Di Blogger

Untuk menciptakan related post di blogger dengan tampilan sederhana ini maka kita harus mengedit template yang digunakan.

Tujuannya yaitu untuk menambahkan isyarat script related post.

Adapun langkah - langkah menciptakan related post di blogger yaitu sebagai berikut :

Pertama silakan masuk ke dasbor blogger, dan buka halaman Template yang ada pada dasbor blogger.

Apabila sudah berada pada halaman Template maka sebaiknya Backup / Cadangkan dahulu template yang sahabat gunakan untuk jaga - jaga jikalau terjadi hal - hal yang tidak diinginkan.

Walau tolong-menolong ini tidak wajib dan bukan bab dari cara menciptakan related post di blogger.

Namun berdasarkan saya ini sangat perlu dilakukan, sehingga jikalau terjadi hal - hal yang tidak diinginkan menyerupai template error, dan lain sebagainya kita sanggup dengan gampang mengembalikan menyerupai semula (sebelum template di edit).

Selanjutnya klik tombol Edit Html, maka sahabat akan dibawa ke halaman editor template blogger.

Temukan isyarat ]]></b:skin> lalu sisipkan isyarat CSS berikut sempurna di atas isyarat ]]></b:skin> (di antara <b:skin><![CDATA[ dan ]]></b:skin>)

.related-post {padding:5px 10px;floatLleft;clear: both;} .related-post h4{padding:0;margin:0.5em 0 1em 0;}

Silakan edit isyarat CSS di atas untuk merubah tampilan widget related post untuk blogger ini.

Cari isyarat </head> dan pasang script related post sederhana untuk blogger di bawah sempurna di atas isyarat </head> tadi (intinya harus berada di antara isyarat <head> dan </head>)

<b:if cond='data:blog.pageType == &quot;item&quot;'> <script type='text/javascript'>var relatedTitles = new  Array();var relatedTitlesNum = 0;var relatedUrls = new Array();function  related_results_labels(json) {for (var i = 0; i &lt;  json.feed.entry.length; i++) {var entry =  json.feed.entry[i];relatedTitles[relatedTitlesNum] = entry.title.$t;for  (var k = 0; k &lt; entry.link.length; k++) {if (entry.link[k].rel ==  &#39;alternate&#39;) {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 &lt; 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 &lt; 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(&#39;&lt;ul&gt;&#39;);while (i &lt;  relatedTitles.length &amp;&amp; i &lt; 20)  {document.write(&#39;&lt;li&gt;&lt;a  href=&quot;&#39; + relatedUrls[r] +  &#39;&quot;&gt;&#39; + relatedTitles[r] +  &#39;&lt;/a&gt;&lt;/li&gt;&#39;);if (r &lt;  relatedTitles.length - 1) {r++;} else {r =  0;}i++;}document.write(&#39;&lt;/ul&gt;&#39;);}</script> </b:if>

Temukan lagi isyarat <b:includable id='post' var='post'> dan cari kode
<data:post.body/>
atau <div class='post-footer-line post-footer-line-3'>
Kemudian pasang isyarat berikut di bawah isyarat <data:post.body/> atau <div class='post-footer-line post-footer-line-3'> yang ada pada area <b:includable id='post' var='post'> ... </b:includable>

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

Pada isyarat di atas terdapat angka 5 (max-results=5), silakan ganti angka 5 tersebut dengan jumlah related post yang ingin sahabat tampilkan.

Terakhir silakan simpan pengaturan template dengan cara mengklil tombol Selesai.

Sekarang silakan buka salah satu artikel yang ada pada blog sobat.

Praktis - mudahan related post / artikel terkait sudah tampil.

Namun jikalau related post tidak tampil, maka mungkin ada kesalahan waktu memasang isyarat widget related post tadi atau artikel yang sahabat buka tidak mempunyai label atau mungkin juga label yang ada pada artikel tersebut hanya mempunyai 1 artikel saja.

Selamat mencoba dan mudahan artikel ini gampang dimengerti dan ada manfaatnya.