Cara Mengatasi Gambar Buram (Blur) di Blogger

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.

Untuk mengatasinya, tinggal memasukkan kode di bawah ini dalam template. Kode ini di-share dte.web.id.

Cara Mengatasi Gambar Buram di Homepage Blogger

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’/>

loading...
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.

Cara Lain Mengatasi Gambar Buram

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.

Loading...

JANGAN LUPA DOWNLOAD APLIKASI PRIBUMI ONLINE VERSI ANDROID
SILAKAN KLIK GAMBAR DI BAWAH INI

Comments

comments

Related posts

Leave a Comment