Cara Membuat Artikel Terkait (Related Post) dengan Thumbnail

Widget Artikel terkait atau sering kita lihat dengan tulisan related post memang sangat kita perlukan bagi para blogger, sebenarnya tutorial ini sudah lama saya dapatkan, mungkin sudah 2 tahun yang lalu, makanya saya sudah lupa dimana mendapatkan tutorial artikel terkait atau related post dengan thumbnail ini, namun tidak salahnya saya postkan disini sebagai catatan saya pribadi dan arsip saya sendiri, agar suatu saat diperlukan saya bisa membukanya kembali.


seperti gambar di atas bisa kita lihat contohnya, jadi langsung saja saya sertakan tutorialnya :
  • Login ke blogger
  • pilih template dan jangan lupa backup dulu buat jaga-jaga apabila terjadi kesalahan
  • kemudian klik edit html
  • Klik Expand Template Widget
  • cari kode </head>  
  • letakkan kode berikut ini tepat di atas kode </head>  
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}#related-posts a{
color:black;
}#related-posts a:hover{
color:black;
}#related-posts  a:hover {
background-color:#d4eaf2;
}</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='http://2.bp.blogspot.com/-wOF_sxiw1BY/T2s4wEPPl0I/AAAAAAAABv4/r5Roi6o24q8/s1600/noimage.png';
}
if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
}
}}
}function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i]))
{tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;
}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}function printRelatedLabels_thumbs() {
for(var i = 0; i < relatedUrls.length; i++)
{if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i])))
{relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
i--;
}
}var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px #d4eaf2;"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:72px;height:72px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="width:72px;padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}i++;
}document.write('</div>');
relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
relatedTitles.splice(0,relatedTitles.length);
}//]]>
</script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

  • kemudian cari kode berikut ini :
<div class='post-footer-line post-footer-line-1'>
  • kalau tidak ketemu coba cari kode yang mirip seperti ini : 
<p class='post-footer-line post-footer-line-1'> 
  • Jika sudah ketemu, kemudian letakkan kode berikut tepat setelah kode diatas
<!-- Related Posts with Thumbnails Code Start-->
<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_thumbs&amp;max-results=8&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=7;
var relatedpoststitle=&quot;Related Posts&quot;;

removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
  • Terakhir simpan template anda

Untuk mengganti jumlah related posts-nya, silahkan edit var maxresults=5, ganti angka 5 dengan angka yang sesuai lebar postingan blog sobat. Sedangkan untuk mengganti judul dari related posts, silahkan edit var relatedpoststitle="Related Posts", ganti dengan judul yang sobat inginkan
Share Product :
Terima kasih Anda telah membaca artikel Cara Membuat Artikel Terkait (Related Post) dengan Thumbnail, Disclaimer: Artikel, gambar ataupun video yang ada di blog ini terkadang berasal dari berbagai sumber media lain, dan Hak Cipta sepenuhnya dipegang oleh sumber lain tersebut. Jika kami salah dalam menentukan sumber yang pertama, mohon beritahu kami dengan memberikan komentar yang bijak di bawah ini.

2 komentar:

  1. Salam kenal gan, mampir di blog saya juga ya ^_^

    BalasHapus
  2. Wahh...mantappzz...gan, izin Copy-paste..

    addekurniawan.blogspot.com

    BalasHapus

 
Support : Souvenir Pernikahan | Souvenir Ulang Tahun
Copyright © 2013. Lentera Pengetahuan - All Rights Reserved
Responsive by Mas Yadi Template Created by Creating Website
Proudly powered by Blogger