Untuk membuat related post atau artikel terkait tepat dibawah postingan ada banyak macamnya. Ada yang suka dengan tampilan bergambar, ada pula yang hanya menyukai tulisan saja.
Modelnya pun cukup beragam, ada yang berbaris kesamping, ada pula artikel terkait yang memanjang kebawah. Kali ini mungkin Anda lebih suka versi sederhana paling simple dari widget posting terkait ini yang hanya menampilkan judul posting.
Jika Anda ingin menambahkan di blog ikuti langkah berikut ini :
Cara Membuat Widget Posting Terkait Paling Sederhana di Blog / Simple Related Posts
1. Login Ke Akun Blog
2. Pilih Tema → Edit HTML.
2. Pilih Tema → Edit HTML.
3. Setelah editor tema terbuka, klik di mana saja di dalam area kode dan tekan tombol CTRL + F, lalu ketikkan tag di dalam kotak pencarian (tekan Enter untuk menemukannya)
</head>
3. Tepat di atas tag </head>, tempel kode CSS berikut:
<b:if cond='data:blog.pageType == "item"'><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="Related Posts";
</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>
Anda bisa menyesuaikan tampilan dengan mengubah kode scriptnya :
- Untuk mengubah ukuran (27px) dan warna (#fff) dalam judul
- Untuk warna tautan, ganti nilai # 949494
- Untuk mengubah warna latar belakang, ganti warna hex #f9f9f9 .
- Untuk warna latar belakang saat di hover, ubah nilai #F4F4F4.
Catatan : Anda dapat menggunakan generator kode Warna untuk memilih warna favorit Anda.
4. Sekarang setelah Anda tambahkan skrip diatas, agar berfungsi maka perlu ditambahkan kode yang akan menampilkannya di akhir posting blog. Temukan tag berikut :
<b:includable id='postQuickEdit' var='post'>
5. Setelah Anda menemukannya, Anda perlu mengklik panah ke samping yang akan memperluas kode. Gulir ke bawah hingga Anda menemukan tag </b: includable> - lihat screenshoot
6. Tepat di atas tag </b:includable>, tempelkan kode berikut :
<b:if cond='data:blog.pageType == "item"'><div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script><a style="font-size: 9px; color: #CECECE; float: right;" href="http://www.aridjaya.com/2018/08/cara-membuat-widget-posting-terkait-paling-sederhana" rel="nofollow" >Simple Related Posts Widget</a></div></b:if>
Catatan: Untuk mengubah jumlah posting terkait maksimum untuk setiap label, ubah nilai "5" di maxresults=5
7. Simpan perubahan dan kunjungi blog Anda. Sekarang, coba cek di salah satu postingan Anda untuk melihat widget posting terkait sederhana.