Menghilangkan Cropping Pada Thumbnail Related Posts DTE - Related Posts adalah sebuah widget yang keberadaannya cukup penting untuk sebuah blog. Related Posts dapat menekan bounce blog dengan meningkatkan jumlah page views visitor.
Dengan adanya Related Posts, pengunjung dapat mengunjungi halaman menarik lainnya dengan mudah yang berhubungan dengan artikel yang sedang dibacanya. Tentunya hal ini sangat bagus untuk menambah jumlah page views blog.
Salah satu widget related posts yang saya rekomendasikan untuk digunakan di blog yaitu related posts dari DTE. Alasannya karena widget related posts dari DTE ini tidak error ketika validasi HTML5 untuk label dengan 2 kata atau lebih.
Ada 6 jenis related posts yang bisa Anda pilih yang bisa disesuaikan dengan selera Anda. Salah satunya yaitu related posts dengan thumbnail agar keberadaannya semakin menarik pengunjung blog karena disertai dengan gambar. Silahkan Anda kunjungi halaman konfigurasi widgetnya pada link di bawah ini.
- http://blogger-json-experiment.googlecode.com/svn/resources/related-post/widget-configuration.html
Secara default thumbnail related posts akan di-crop, artinya gambar yang tampil akan dipangkas sesuai dengan dimensi yang ditentukan dan agar gambar tidak gepeng.
Lantas bagaimana agar gambarnya tidak terpotong sehingga yang tampil adalah gambar utuh?
Nah bagi Anda yang menggunakan related posts dengan thumbnail dari DTE dan tidak menginginkan gambar related posts terpotong, silahkan ikuti trik mudah di bawah ini.
Pertama, silahkan buka link kode javascriptnya dengan meng-copy link js dan paste di address bar browser kemudian tekan enter. Link js tampak seperti berikut.
http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js
Script yang di dapat akan seperti di bawah ini. Atau jika di template Anda js-nya sudah dibuka maka silahkan cari kode seperti di bawah ini
/*! Related Post Widget for Blogger by Taufik Nurrohman => http://gplus.to/tovic */
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"…":t;r=("media$thumbnail" in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):d.noImage;u=("summary" in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"…":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
Kemudian silahkan cari kode berikut di bawah ini
.media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c")
Lalu silahkan hapus kode
+"-c" dari kode di atas sehingga menjadi seperti di bawah ini..media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize)
Kemudian silahkan simpan kodenya dengan mengganti script js seperti di bawah ini.
<script type='text/javascript' src='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js'/>
Ganti dengan script yang sudah dibuka dan diperbaharui di atas tadi dengan penulisan seperti di bawah ini, atau Anda bisa menghosting js-nya pada akun hosting Anda dan menyimpannya di template blog seperti script di atas.
<script type='text/javascript'>
//<![CDATA[
KODE SCRIPT JS DI SINI
//]]></script>
Nah mudah bukan? Selamat mencoba...
Setelah dihapus kode crop pada js-nya, tampilan gambarnya menjadi full seperti pada screenshot di bawah ini.
