Cara membuat Simple Related Post di blog

Dalam tutorial sebelumnya tentang Widget Related Post, kita telah menjelaskan bagaimana cara menambahkan Related Posts widget yang akan menampilkan related post dengan thumbnail dari kategori atau label yang sama, berdasarkan pada label yang diberikan, ini akan muncul pada akhir posting blog anda. Jika anda lebih suka memunculkan widget related post diatas postingan silahkan saja. Tapi kali ini kita akan memunculkannya di bawah postingan dengan versi yang sederhana dan menarik yang hanya akan menampilkan judul posting.

pic demo

Jika anda tertarik dengan kesederhanaan dari simple related post diatas dan ingin menambahkannya di blog anda, silahkan ikuti langkah-langkah dibawah ini dengan benar:

Cara menambahkan Widget Related Post untuk Blogger

Langkah 1. Terlebih dahulu masuk ke dashboard blogger, kemudian masuk ke tab 'Template' dan tekan tombol 'Edit HTML'.

Langkah 1

Langkah 2. Setelah template editor terbuka, klik di mana saja pastikan di dalam area kode dan tekan tombol CTRL + F, kemudian ketik tag berikut di dalam kotak pencarian ( tekan Enter untuk menemukannya):

</head>

membuka kotak pencarian di editor template blogger

Langkah 3. Tepat di atas tag </ head>, tempelkan kode dibawah ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>
#related-posts {
margin: 15px 0px;
}
#related-posts h2 {
font-size: 27px;
font-weight: normal;
color: #fff;
text-shadow: 1px 0px 2px #888;
margin-bottom: 0.75em;
}
#related-posts a {
font-size: 13px;
color: #949494;
text-transform: capitalize;
border-bottom:1px dotted #E2E2E2;
display:block;
padding:13px;
text-decoration: none;
}
#related-posts a:hover {
color: #555;
background: #F4F4F4;
}
#related-posts ul {
padding: 0px;
list-style-type: none;
background: #f9f9f9;
border-left: 5px solid #f2f2f2;
}
#related-posts li {
padding: 0px;
}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<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(currenturl){for(var i=0;i<relatedUrls.length;i++){if(relatedUrls[i]==currenturl){relatedUrls.splice(i,1);relatedTitles.splice(i,1)}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>1){document.write('<h2>'+relatedpoststitle+'</h2>')}document.write('<ul>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}
//]]>
</script></b:if>

Sesuaikan Widget Simple Related Posts untuk Blogger

• Untuk mengubah ukuran (27px) dan warna (#fff) pada judul 'Related Posts', ubah nilai-nilai yang berwarna merah. 
• Untuk warna link related posts, ganti nilai # 949494 hijau. 
• Untuk mengubah warna latar belakang, ganti warna #f9f9f9 hex warna ungu (Anda bisa menggunakan kode generator Color ini untuk memilih warna favorit anda). 
• Untuk warna latar belakang pada mouseover/hover, ubah nilai # F4F4F4 berwarna biru. 

Langkah 4. Sekarang cari (CTRL + F) kode pada baris di bawah ini:

<b:includable id='postQuickEdit' var='post'>

Langkah 5. temukan tag </ b: includable> di atas kode yang kita cari dan kita temukan - lihat screenshot untuk bantuan lebih lanjut: 

Bantuan lebih lanjut

Langkah 6. Tepat di atas </ b: includable> pastekan kode di bawah:

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <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=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script><a style="font-size: 9px; color: #CECECE; float: right;" href="http://duniatutorials.blogspot.com/2016/09/cara-membuat-simple-related-post-di-blog.html" rel="nofollow" >Simple Related Posts Widget</a></div></b:if>

Catatan: Untuk mengubah jumlah related posts maksimum untuk setiap label, ubah "nilai 5 dari" max-results = 5 

Langkah 7. Simpan update dengan mengklik tombol 'Save Template', silahkan lihat blog anda dan klik salah postingan untuk melihat widget simple related post. Hanya itu!!!

Related Posts: Widget Related Posts dengan Thumbnail dan summary untuk Blogger

Jika ada error silahkan periksa dengan seksama setiap langkah diatas!!!, jangan lupa untuk meninggalkan komentar anda di kolom komentar!!!