Tips Membuat Related Post di Blogger

Contoh Related Post

Related post merupakan sebuah fitur dari blogger yang memungkinkan kita untuk memberikan link untuk membuka artikel lainnya di blog kita yang masih terkait dengan
artikel tersebut. Related post, selain memudahkan pembaca, ternyata juga mampu meningkatkan jumlah view halaman kita. Hal ini dikarenakan efek psikologis ketika membaca sebuah artikel yang mebuat penasaran, maka pembaca akan membuka artikel lain yang serupa dan berharap mendapatkan informasi lebih dari sana.
Berikut adalah langkah-langkah membuat related post pada blog.

1. Login ke akun Blogger Anda.
2. Klik Template lalu backup template tersebut untuk berjaga-jaga andaikata terjadi sesuatu yang tidak diininginkan sehingga Anda bisa kembali ke keadaan semula.
3. Klik Edit HTML.
4. Klik di bagian dalam kotak HTML
5. Cari kode ]]></b:skin> atau </style> di dalam kode HTML. Gunakan CTRL+F agar pencarian menjadi lebih cepat.
6. Jika sudah ditemukan, masukan kode berikut ini di atas ]]></b:skin> atau </style>.

/* Related Post Cepat
--------------------------------- */#related-postsku{float:left;width:100%;margin-top:5px;margin-left:0px;font-size:13px;font-family:Arial,serif;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://lh3.googleusercontent.com/-6iznc81V_pQ/UcmgB6yKU3I/AAAAAAAABWc/NhxmD6789YU/s25/rss.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;}
Jika sudah dimasukkan, cari kode </head>. Sebagai catatan, jika Anda mengenal JQuery dan sudah menggunakan JQuery lainnya, maka lewati langkah ini. Jika belum, masukkan kode berikut di atas </head>.
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js' type='text/javascript'/>
<!-- Artikel Terkait Start -->
<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>
<!-- Artikel Terkait End -->

Jika sudah, cari kode <div class='post-footer'> . Perlu Anda ketahui bahwa kode tersebut ada 2 buah, satu untuk mobile dan satu lagi untuk web desktop. Fokus pada kode yang diperuntukkan untuk web desktop, yakni kode kedua yang ditemukan, lalu masukkan kode berikut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-postsku'>
<font style='font-size:19px;color:#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=5&quot;' type='text/javascript'/>
</b:if></b:loop></font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
</b:if>

Pada kode di atas, ada beberapa bagian yang memiliki berbagai warna berbeda. Tulisan yang memiliki warna adalah tulisan yang bisa Anda ganti sesuai keinginan sendiri dan berikut adalah keterangannya.
Pink: tulisan “Artikel Terkait” yang bisa Anda ganti misal menjadi “Artikel Serupa”.
Ungu: kode warna tulisan “Artikel Terkait” tersebut.
Biru: ukuran tulisan “Artikel Terkait”.
Jangan lupa untuk menyimpan template HTML tersebut agar hasilnya mulai bekerja.
Itulah langkah-langkah yang bisa Anda lakukan untuk dapat membuat sebuah related post di bawah postingan blog Anda. Kode-kode di atas adalah sebuah rangkaian kode untuk mengaktifkan related post yang memiliki waktu loading yang lebih singkat dari biasanya. Dengan begitu, maka pembaca tidak akan meninggalkan blog Anda karena loading yang singkat. Dengan cara ini, blog Anda akan mendapatkan lebih banyak pengunjung dari biasanya.

Selamat mencoba Selamat berkreasi Salam dari @CyberClown ,,,