Cara Mengatasi Gambar Buram (Blur)

Cara Mengatasi Gambar Buram (Blur)

Gambar Thumbnail Buram
Cara Mengatasi Gambar Thumbnail Buram 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.

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

Cara 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 Cara Mengatasi Gambar Thumbnail Buram di Halaman Depan Blog. Happy Blogging! (www.contohblog.com).*

Labels: Desain Blog

Related Posts

0 Komentar untuk "Cara Mengatasi Gambar Buram (Blur)"

1. Komentar spam, menyertakan Link Aktif dan Alamat Blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *