Cara Membuat Widget Related Posts Widget Tanpa Thumbnail

Bagaimana cara menambahkan widget related posts tanpa thumbnail di blogger? Berikut ini langkah-langkahnya.

Related Posts Tanpa Thumbnail - Widget simple related post atau widget postingan terkait tanpa thumbnail (gambar). Widget related posts memang cukup penting jika kita ingin agar pengunjung betah berlama-lama di blog kita dengan membaca berbagai artikel yang saling berhubungan.

Lantas apa untungnya jika pengunjung betah berlama-lama membaca blog kita? Dari segi psikis, tentu kita akan merasa puas dengan hasil jerih payah kita dalam menulis, sedangkan dimata google atau SEO dengan berlama-lamanya pengunjung berada di blog kita tentunya menambah nilai lebih akan kualitas blog kita.

Tutorial kali ini, saya akan membahas tentang bagaimana cara menambahkan widget related posts simple tanpa thumbnail atau tanpa gambar. Untuk related posts dengan thumbnail akan dibahas pada artikel selanjutnya.

Baik, kita langsung saja, jika Anda ingin menambahkan widget related posts seperti pada gambar diatas, silakan ikuti langkah-langkah dibawah ini.

1. Langkah Pertama: Pada dasbor blog Anda klik 'Theme' lalu klik 'Edit HTML'

2. Langkah Kedua: Setelah editor template terbuka, klik di manapun dalam area kode dan tekan tombol CTRL + F pada keyboard, lalu ketik kode dibawah ini di dalam kotak pencarian (tekan Enter untuk menemukannya):

[</head>]

3. Langkah Ketiga: Copas kode CSS dibawah ini tepat di atas kode </head> :

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

Cara Menyesuaikan widget Simple Related Posts untuk Blogger:

• Untuk mengubah ukuran (27px) dan warna (#fff) judul 'Related Posts', ubah nilainya (warna merah)
• Untuk warna link Related Posts, ganti nilai #949494 (warna biru)
• Untuk mengubah warna background, ganti warna hex f9f9f9 (warna merah)
• Untuk warna background pada mouseover, ubah nilai f4f4f4 (warna merah)

Catatan: Anda dapat menggunakan kode generator warna untuk memilih warna favorit Anda.

4. Langkah Keempat: Setelah menambahkan script/kode untuk membuat Related Posts berfungsi, maka kita perlu menambahkan kode yang akan menampilkannya di akhir postingan blog kita. Temukan baris kode di bawah ini pada Edit Html (seperti pada langkah pertama dan kedua):

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

5. Langkah Kelima: Setelah kode diatas Anda temukan, Anda perlu mengklik panah samping (segitiga hitam menyamping) yang akan memperluas kode. Gulir ke bawah sampai Anda menemukan kode </b:includable> - perhatikan screenshot dibawah ini:

6. Langkah Keenam: Tepat di atas tag </b:includable>, tempel kode di bawah ini:

[<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://www.hakimtea.com/2018/01/related-posts-tanpa-thumbnail.html" rel="nofollow" >Related Posts Tanpa Thumbnail</a></div></b:if>]

Catatan: Untuk mengubah jumlah artikel pada Related Posts, ganti nilai "5" dari max-results=5

7. Langkah Ketujuh: Simpan perubahan dengan mengklik tombol 'Save Template/Simpan Template' dan kunjungi blog Anda. Sekarang, coba klik salah satu postingan Anda untuk melihat widget related post tanpa thumbnail ini berfungsi.

Demikian, selamat mencoba, semoga bermanfaat!

*Disarikan dari helplogger