Cara Membuat Widget Related Posts Dengan Thumbnail

Ikuti langkah demi langkah bagaimana cara membuat widget Related Posts dengan Thumbnail, gambar, photo dan cuplikan artikel yang lebih menarik.

Related Post dengan Thumbnail - Pada postingan sebelumnya telah dibahas bagaimana cara menambahkan widget related post tanpa thumbnail atau tanpa gambar yang hanya menampilkan judul postingannya saja.

Pada Tutorial kali ini kita akan membahas bagaimana cara membuat Related Post yang lebih aktraktif, lebih terlihat eye catching dan lebih terlihat menarik bagi pengunjung blog Anda yakni Related Post menggunakan Thumbnail dan cuplikan postingan Anda.

Jika Anda ingin tahu bagaimana tampilan Related Post dengan Thumbnail, silakan kunjungi blog demo ini.

Sekarang mari kita lihat bagaimana menambahkan widget Related Post dengan thumbnail dan cuplikan artikel di Blogger:

Menambahkan Widget Related Post dengan Thumbnail dan Cuplikan Artikel ke Pos Blogger

1. Langkah Pertama: Dari Dasbor Blogger Anda, buka "Template" dan klik "Edit HTML"

2. Langkah Kedua: Klik di manapun dalam area kode dan kemudian tekan CTRL + F untuk membuka kotak pencarian Blogger

3. Langkah Ketiga: Ketik atau paste tag dibawah ini di dalam kotak telusur dan tekan enter untuk menemukannya:

[</head>]

4. Langkah Keempat: Setelah Anda menemukannya, copas kode dibawah ini tepat di atas kode </head>

[<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;
var relatedPostsNum = 4; // number of entries to be shown
var relatedmaxnum = 75; // the number of characters of summary
var relatednoimage = "https://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg"; // default picture for entries with no image
function readpostlabels(e){for(var t,r,l,a=0;a<e.feed.entry.length&&(t=e.feed.entry[a],a!=e.feed.entry.length);a++){relatedTitles[relatedTitlesNum]=t.title.$t,l="","content"in t?l=t.content.$t:"summary"in t&&(l=t.summary.$t),relatedpSummary[relatedTitlesNum]=removetags(l,relatedmaxnum),r="media$thumbnail"in t?t.media$thumbnail.url:relatednoimage,relatedThumb[relatedTitlesNum]=r;for(var d=0;d<t.link.length;d++)if("alternate"==t.link[d].rel){relatedUrls[relatedTitlesNum]=t.link[d].href;break}relatedTitlesNum++}}function showrelated(){for(var e=new Array(0),t=new Array(0),r=new Array(0),l=new Array(0),a=0;a<relatedUrls.length;a++)contains(e,relatedUrls[a])||(e.length+=1,e[e.length-1]=relatedUrls[a],t.length+=1,t[t.length-1]=relatedTitles[a],r.length+=1,r[r.length-1]=relatedpSummary[a],l.length+=1,l[l.length-1]=relatedThumb[a]);relatedTitles=t,relatedUrls=e,relatedpSummary=r,relatedThumb=l;for(var a=0;a<relatedTitles.length;a++){var d=Math.floor((relatedTitles.length-1)*Math.random()),n=relatedTitles[a],s=relatedUrls[a],m=relatedpSummary[a],i=relatedThumb[a];relatedTitles[a]=relatedTitles[d],relatedUrls[a]=relatedUrls[d],relatedpSummary[a]=relatedpSummary[d],relatedThumb[a]=relatedThumb[d],relatedTitles[d]=n,relatedUrls[d]=s,relatedpSummary[d]=m,relatedThumb[d]=i}for(var u,h=0,o=Math.floor((relatedTitles.length-1)*Math.random()),g=o,f=document.URL;h<relatedPostsNum&&(relatedUrls[o]==f||(u="<div class='relatedsumposts'>",u+="<a href='"+relatedUrls[o]+"' title='"+relatedTitles[o]+"'><img src='"+relatedThumb[o]+"' /></a>",u+="<h6><a href='"+relatedUrls[o]+"' target='_self'>"+relatedTitles[o]+"</a></h6>",u+="<p>"+relatedpSummary[o]+" ... </p>",u+="</div>",document.write(u),h++,h!=relatedPostsNum))&&(o<relatedTitles.length-1?o++:o=0,o!=g););}function removetags(e,t){for(var r=e.split("<"),l=0;l<r.length;l++)-1!=r[l].indexOf(">")&&(r[l]=r[l].substring(r[l].indexOf(">")+1,r[l].length));return r=r.join(""),r=r.substring(0,t-1)}function contains(e,t){for(var r=0;r<e.length;r++)if(e[r]==t)return!0;return!1}
//]]>
</script>]

Catatan:

• Untuk mengubah jumlah posting yang ingin ditampilkan, ubah nilai 4 (merah) sesuai keinginan Anda.
• Untuk mengubah jumlah karakter yang akan ditampilkan dalam ringkasan posting, ubah nilai 75 (hijau) 
• Untuk mengubah gambar default untuk posting tanpa gambar, tambahkan URL Anda dan ganti URL yang diberi warna biru.

5. Langkah Lima: Sekarang setelah kita menambahkan scriptnya, kita perlu menambahkan style CSS. Cukup copas kode CSS berikut di atas tag </head> (Petunjuk lihat langkah pertama dan kedua):

[<style>
.relatedsumposts {
padding: 0px 10px;
text-align: center;
/* width of the related posts area */
width: 120px;
float:left;margin-bottom:15px;
border-right: 1px dotted #E5E5E5;
display: inline-block;
}
.relatedsumposts h6 {
margin: 5px 0;
}
.relatedsumposts h6 a {
/* link properties */
color: #linkcolor;
text-transform: uppercase;
font-size:12px;
}
.relatedsumposts img {
/* thumbnail properties */
height: 82px;
width: 82px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.relatedsumposts p {
/* summary properties */
border-top: 1px dotted #E5E5E5;
border-bottom: 1px dotted #E5E5E5;
color: #summarycolor;
font-size: 10px;
height: 4em;
line-height: 1;
margin: 5px 0 0;
padding: 5px 0 15px 0;
}
#relatedpostssum {
width: 100%;
}
.relatedpoststitle {
font-size: 19px;
margin-bottom:15px;
}
</style>]

Catatan: Menyesuaikan Widget Related Posts:

• Ubah nilai merah (120px) untuk menyesuaikan lebar area widget
• Ganti #linkcolor dengan nilai hex warna Anda untuk mengubah warna judul artikel
• Jika Anda ingin mengubah ukuran thumbnail, ubah nilai yang ditandai dengan warna ungu (82px)
• Untuk menentukan kebulatan batas, ubah nilai dalam warna oranye (50%)
• Untuk mengubah warna cuplikan artikel, ganti #summarycolor dengan nilai hex warna
• Untuk mencari warna silakan gunakan Generator Kode Warna.

6. Langkah Keenam: Selanjutnya, cari kode dibawah ini (gunakan CTRL + F)

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

Bila Anda menemukannya, klik panah samping (segitiga hitam menyamping) untuk memperluas kode dan gulir ke bawah sampai Anda menemukan </b:includable> - lihat screenshot untuk lebih jelasnya:

7. Langkah Ketujuh: Di atas kode </b:includable>, tambahkan kode html berikut ini:

[<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
  <div class='post-footer-line post-footer-line-4'>
   <div class='relatedpoststitle'>RELATED POSTS</div>
<div id='relatedpostssum'>
      <script type='text/javascript'>showrelated();</script>
    </div>
    <div style='clear:both;'/>
  </div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->]

8. Langkah Kedelapan: Klik pada tombol "Simpan Template/Save Theme" untuk menyimpan perubahan dan selesai! Sekarang coba lihat blog Anda dan klik salah satu artikelnya dan lihat Related Post dengan thubnail ini berfungsi dengan baik?

Catatan: jika Anda melihat pesan 'undefined', pastikan artikel Anda telah diberi Label/Kategori yang memiliki post lebih dari satu, jika label tersebut baru satu artikel, skrip ini tidak dapat menunjukkan Related Posts.

Demikian semoga bermanfaat.

*Disarikan dari helplogger