Menghilangkan Cropping Pada Thumbnail Related Posts Dte

Menghilangkan Cropping Pada Thumbnail Related Posts DTE - Related Posts yakni sebuah widget yang keberadaannya cukup penting untuk sebuah blog. Related Posts sanggup menekan bounce blog dengan meningkatkan jumlah page views visitor. 

Dengan adanya Related Posts, pengunjung sanggup mengunjungi halaman menarik lainnya dengan gampang yang bekerjasama dengan artikel yang sedang dibacanya. Tentunya hal ini sangat manis untuk menambah jumlah page views blog.

Salah satu widget related posts yang saya rekomendasikan untuk dipakai di blog yaitu related posts dari DTE. Alasannya sebab widget related posts dari DTE ini tidak error dikala validasi HTML5 untuk label dengan 2 kata atau lebih.

Ada 6 jenis related posts yang sanggup Anda pilih yang sanggup diubahsuaikan dengan selera Anda. Salah satunya yaitu related posts dengan thumbnail semoga keberadaannya semakin menarik pengunjung blog sebab 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 semoga gambar tidak gepeng.

Lantas bagaimana semoga gambarnya tidak terpotong sehingga yang tampil yakni gambar utuh?

Nah bagi Anda yang memakai related posts dengan thumbnail dari DTE dan tidak menginginkan gambar related posts terpotong, silahkan ikuti trik gampang di bawah ini.

Pertama, silahkan buka link isyarat javascriptnya dengan meng-copy link js dan paste di address kafe browser lalu tekan enter. Link js tampak ibarat berikut.

 http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js

Script yang di sanggup akan ibarat di bawah ini. Atau jikalau di template Anda js-nya sudah dibuka maka silahkan cari isyarat ibarat 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)+"&hellip;":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)+"&hellip;":"";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="Menghilangkan Cropping Pada Thumbnail Related Posts DTE Menghilangkan Cropping Pada Thumbnail Related Posts DTE" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="Menghilangkan Cropping Pada Thumbnail Related Posts DTE" 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="Menghilangkan Cropping Pada Thumbnail Related Posts DTE Menghilangkan Cropping Pada Thumbnail Related Posts DTE" 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="Menghilangkan Cropping Pada Thumbnail Related Posts DTE" 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="Menghilangkan Cropping Pada Thumbnail Related Posts DTE"'+b+'><img alt="Menghilangkan Cropping Pada Thumbnail Related Posts DTE Menghilangkan Cropping Pada Thumbnail Related Posts DTE" 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="Menghilangkan Cropping Pada Thumbnail Related Posts DTE" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="Menghilangkan Cropping Pada Thumbnail Related Posts DTE Menghilangkan Cropping Pada Thumbnail Related Posts DTE" 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="Menghilangkan Cropping Pada Thumbnail Related Posts DTE" 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 isyarat berikut di bawah ini

 .media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c")

Lalu silahkan hapus isyarat +"-c" dari isyarat di atas sehingga menjadi ibarat di bawah ini.

 .media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize)

Kemudian silahkan simpan kodenya dengan mengganti script js ibarat 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 ibarat di bawah ini, atau Anda sanggup menghosting js-nya pada akun hosting Anda dan menyimpannya di template blog ibarat script di atas.

 <script type='text/javascript'>
 //<![CDATA[
 KODE SCRIPT JS DI SINI
 //]]>
 </script>

Nah gampang bukan? Selamat mencoba...

Setelah dihapus isyarat crop pada js-nya, tampilan gambarnya menjadi full ibarat pada screenshot di bawah ini.

Sumber https://www.kompiajaib.com/

Share this post