Cara Membuat Artikel Terkait Blogger 1

 Cara Membuat Artikel Terkait Di bawah Postingan Blogspot/Blogger
catatan: selanjutnya Blogspot/Blogger akan di sebut Blogger saja.

Untuk membuat related post (artikel terkait atau artikel yang berhubungan) tepat di bawah postingan ada banyak macamnya. Ada yang suka dengan tampilan bergambar, ada pula yang hanya menyukai tulisan saja.

Modelnya pun cukup beragam, ada yang berbaris ke samping, ada pula artikel terkait yang memanjang ke bawah. Untuk tutorial kita kali ini, kita akan membuat related post yang bentuknya memanjang ke bawah dengan maksimal 5 tulisan.

target: related post yang bentuknya memanjang ke bawah dengan maksimal 5 tulisan.

Cara membuatnya cukup mudah, ikuti langkah-langkah berikut ini.

Langkah 1
    Pertama-tama login ke akun Blogger Anda, lalu pilih Template > Edit HTML.
    Setelah terbuka cari kode </head>. Agar mudah mencarinya tekan Ctrl F dan jika telah bertemu, copy script berikut ini tepat di bawah 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>

Langkah 2
   Jika selesai, cari lagi kode <data:post.body/>, lalu copy kembali script berikut ini tepat dibawah kode <data:post.body/>. Jika Anda menemukan ada dua <data:post.body/> letakkan script di bawah kode yang pertama (untuk web version) dan kode yang kedua (untuk mobile version).


<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> 

Khusus tulisan berwarna merah pada script bisa diganti sesuai keinginan. Setelah selesai, segera menyimpannya dengan menekan tombol Save Template, lalu kembali ke blog Anda. Refresh dan kini related post atau artiker terkait akan segera muncul.



Jika ingin berkomentar, silahkan.
Semoga bermanfaat.

Related Info