Cara Mengatasi Gambar Thumbnail Buram (Blur) di Halaman Depan Blog

Baca Juga

Cara Mengatasi Gambar Thumbnail Buram dan Terpotong di Halaman Depan Blog.

GAMBAR buran (blur) alias tidak jelas menjadi masalah serius bagi sebagian blogger.

Gambar atau postingan blog jadi tidak enak dipandang kerena gambarnya blur di halaman depan ataupun halaman dalam.

Gambar buram terjadi karena ukuran thumbnail asli 72 pixel. Jika ukuran tampilan lebih besar, misalnya jadi 100 atau 300 pixel, maka gambar akan blur.

Default image thumbnail auto read more 72 pixel di homepage, biasanya gambar jadi buram alias blur aka blurry image.

Selain buram, masalah lain gambar thumbnail adalah terpotong (cropped), tidak utuh. Untuk mengatasi gambar thumbnail buran dan terpotong, maka kita tinggal memasukkan kode di bawah ini dalam template.

Cara Mengatasi Gambar Buram & Terpotong di Homepage Blogger

1. Tema > Edit HTML

2. Copas kode berikut ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
function thumbnyabener(e,t){for(var g=document.getElementById(e),m=g.getElementsByTagName("img"),r=0;r<m.length;r++)m[r].src=m[r].src.replace(/\/s72\-c/,"/s"+t),m[r]}thumbnyabener("Blog1",1600);
//]]>
</script>

3. Save!

Silakan cek, semoga gambar thumbnail tidak lagi buram dan terpotong, melainkan utuh, meski ukurannya kecil tidak seperti aslinya atau seperti yang muncul di halaman artikel.

Cara Mengatasi Gambar Buram Saja di Homepage Blogger

Jika masalah gambarnya hanya buram, maka gunakan kode berikut ini.

1. Tema > Edit HTML

2. Copas kode berikut ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("Blog1");
theText = bodyText.innerHTML;
theText = theText.replace(/s72-c/gi, "s200-c");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>

3. Save! Simpan template.

CARA LAINNYA

Jika kode di atas tidak berfungsi atau gagal mengatasi gambar buram halaman depan blog Anda, maka lakukan langkah ini:

1. Template > Edit HTML

2. Copas kode berikut ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {$('.post-thumbnails').attr('src', function(i, src)
{return src.replace( 's72-c', 's640' );});});
//]]>
</script>

Catatan:

- Kode .post-thumbnails adalah kode image/gambar yang buram di halaman depan. Sesuaikan dengan kode gambar thumbnail halaman depan blog Anda.

- Jika yang buram adalah gambar related post, maka ganti kode tersebut dengan kode gambar related post, misalnya .related-posts 

3. Pastikan ada link ke kode jQuery di template blog Anda, seperti ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js' type='text/javascript'/>

Jika kode jQuery tersebut belum ada, maka tambahkan di atas kode no. 2 atau di atas kode </head>

4. Save template!

Demikian Cara Mengatasi Gambar Buram (Blur) di Halaman Depan Blogger.

CARA LAIN LAGI Mengatasi Gambar Buram

1. Template > Edit HTML
2. Copas kode berikut ini di atas kode </body> atau </head>

<script>//<![CDATA[function resizeThumb(parentID, size) { var parent = document.getElementById(parentID), image = parent.getElementsByTagName('img'); for (var i = 0; i < image.length; i++) { image[i].src = image[i].src.replace(/\/s72\-c/, "/s" +
size + "-c"); image[i].width = size; image[i].height = size; }} resizeThumb('Blog1', 300);//]]> </script>

3. Save Template!

Kode di atas juga berfungsi mengubah gambar blur di Related Post atau Popular Posts. Tinggal ubah kode Blog1 di kode terakhir dengan kode elemen gambar yang buram.

Gambar Buram Popular Posts

Untuk gambar Popular Posts berukuran besar (biasanya 300 pixel sesuai ukuran sidebar), gunakan kode berikut ini, simpan di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(".popular-posts img").attr("src",function(t,s){return s.replace("/w72-h72-p-k-no-nu/","/s350-c/")}),$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))}),$(".popular-posts ul li .item-content a").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>=6&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>
</script>

Cara Lain Mengatasi Gambar Buram di Blogger

Cara mengatasi gambar blog yang buram lainnya, khususnya di homepage yang menggunakan auto readmore adalah sebagai berikut.

Ganti kode:

<img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>

dengan kode:

<b:with value='data:post.thumbnailUrl ? resizeImage(data:post.thumbnailUrl, 300, &quot;4:3&quot;) : data:post.thumbnail' var='image_bro'>
  <img expr:alt='data:post.title' expr:src='data:image_bro'/>
</b:with>

Dengan menggunakan kode di atas, secara otomatis akan mengubah kode s72-c menjadi w300-h225-p-k-no-nu dan membuat resolusi gambar thumbnail berubah dari 72px × 72px menjadi 300px × 225px. Dengan demikian gambar thumbnail akan terlihat jelas, tidak buram, meskipun ukurannya diperbesar.

Demikian beberapa cara mengatasi gambar thumbnail buram di halaman depan blog. Happy Blogging! (www.contohblog.com).*