Memasang Artikel Terkait Blogger Dengan Thumbnail

Beberapa postingan yang membahas tentang artikel terkait blogger atau yang biasa disebut dengan related posts blogger sebelumnya telah diposting di blog ini. Dua diantaranya adalah memasang artikel terkait blogger versi classic atau versi yang pertama kali muncul dan artikel terkait blogger versi 1.0.

Keunggulan artikel terkait versi 3.0 ini adalah kemampuannya yang mampu menampilkan gambar mini atau thumbnail artikel yang ditampilkan pada widget. Gambar ini diambil dari gambar yang ikut diposting pada arrtikel, jika artikel tidak disertai dengan gambar, maka secara otomatis widget artikel terkait versi 3.0 ini akan menggantinya dengan gambar versi default yang telah ditambahkan pada script. Widget ini telah diterapkan pada blog Glori Puisi, berikut screenshootnya.

Glori Puisi

Istallasi Artikel Terkait Blogger With Thumbnail

1. Log in ke Blogger » Template » Backup template (direkomendasikan)

Backup Template Blogger

2. Klik Edit HTML » cari kode berikut (CTRL+F)

</head>

3. Copy kode CSS dan JavaScript berikut kemudian letakkan di atas kode pada langkah No. 2

<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'>var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGL1OAqzjpUrv3ydUg0yitJ471yiGpA64EpQ1LnaOn8fFL-BQll_Vn3aQKTPQ_mka7twcMt1ddCJY2R457E844KU4XLnDsiGGGPlGbm4Fm7p0mN5JgEJrByf0m-sKtxdpOtbZBjoaWdAE/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
</b:if>

Keterangan:

• Anda bisa mengubah kode CSS di atas supaya lebih sesuai dengan style template blog atau website Anda
• var maxresults=5; » nilai menentukan jumlah artikel yang tampil pada widget sejumlah 5 artikel, ubah nilai 5 tersebut sesuai dengan keinginan Anda
• var relatedpoststitle="Related Posts"; » menentukan judul widget, ubah kalimat Related Posts sesuai dengan versi milik Anda sendiri

4. Cari kode berikut

<div class='post-footer-line post-footer-line-1'>

5. Copy  kode XML dan JavaScript berikut kemudian letakkan tepat di bawah kode pada langkah no.4

<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>
<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=6&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div>
<div style='clear:both'/>
</b:if>

6. Simpan Template dan preview blog Anda

Berikut source code JavaScript Artikel Terkait dengan gambar kecil (Related Posts Blogger With Thumbnail v.3.0)

// ------------------------------------------
// SHOW RELATED POSTS WITH THUMBNAIL BLOGGER
// ------------------------------------------
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{if(typeof(defaultnoimage)!=='undefined'){thumburl[relatedTitlesNum]=defaultnoimage}else{thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGL1OAqzjpUrv3ydUg0yitJ471yiGpA64EpQ1LnaOn8fFL-BQll_Vn3aQKTPQ_mka7twcMt1ddCJY2R457E844KU4XLnDsiGGGPlGbm4Fm7p0mN5JgEJrByf0m-sKtxdpOtbZBjoaWdAE/s400/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(current){var splitbarcolor;if(typeof(splittercolor)!=='undefined'){splitbarcolor=splittercolor}else{splitbarcolor="#d4eaf2"}for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==current)||(!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 '+splitbarcolor+';"');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>');i++;if(r<relatedTitles.length-1){r++}else{r=0}}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}

Tweet

Postingan terkait:

Ditulis EM — Tuesday 16 April 2013 — Add Comment — Blogger, Blogger Widgets