Ada beberapa tutorial yang cukup banyak untuk membuat Widget Artikel Terkait dengan metode yang berbeda. Namun, tutorial ini akan menunjukkan kepada Anda cara menerapkan widget Posting Terkait dengan thumbnail dan cuplikan posting yang akan muncul dibawah postingan blog Anda.
Anda juga bisa membuat Widget Artikel Terkait / Related Posts yang sederhana di postingan sebelumnya.
Cara Membuat Widget Artikel Terkait dengan Thumbnails
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>
4. Tepat di atas tag </head>, tempel kode script berikut:
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgou0r3PwLSaFH3Uhq1w6Snzgs5dNsB5s23i2pDUc_6wo4IJ4RFbrP1_UXjxgnK6WBJ2z9Qa3YOjqZF8kOt5_Vgktho08b5maved3W6fe1bUyhq6bw_eRSMdzW2NXFsWBA7NtdajxqV8Tym/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 sedang ditampilkan, ubah nilai 4 (dalam warna merah)
- Untuk mengubah jumlah karakter yang akan ditampilkan dalam ringkasan posting, ubah nilainya 75
- Untuk mengubah foto default untuk postingan tanpa gambar, tambahkan URL Anda,
5. Setelah kita menambahkan skrip, kita perlu menambahkan gaya CSS. Cukup tempelkan kode berikut di atas tag </ head> :
<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>
Menyesuaikan Widget Pos Terkait Thumbnail :
- Ubah nilai yang berwarna merah (120px) untuk menyesuaikan lebar area widget
- Ganti #linkcolor dengan nilai hex warna untuk mengubah warna judul posting
- Jika Anda ingin mengubah ukuran thumbnail, ubah nilai (82px)
- Untuk menentukan pembulatan batas, ubah nilai (50%)
- Untuk mengubah warna snipet pos, ubah #summarycolor dengan nilai hex warna
6. Cari (CTRL + F) kode berikut dalam HTML :
<b:includable id='postQuickEdit' var='post'>
7. Setelah Anda menemukannya, Anda perlu mengklik panah ke samping yang akan memperluas kode. Gulir ke bawah hingga Anda menemukan tag </b:includable> - lihat screenshoot
8. Tepat di atas tag </b:includable>, tempelkan kode berikut :
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=readpostlabels&max-results=50"' 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-->
<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=readpostlabels&max-results=50"' 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-->
9. Simpan perubahan dan selesai. Coba lihat postingan blog Anda apakah script sudah bekerja dengan sempurna.