4 Cara Jitu Mengatasi Gambar Buram di Blogger

Tutorial: Tips & Trik Cara Mengatasi dan Memperbaiki Gambar Buram, Blur & Terpotong - Auto Readmore Blogger/Blogspot

Gambar buram, -- disebut juga BLUR (baca: tidak jelas) merupakan masalah serius bagi kebanyakan blogger. Masalah ini biasanya terjadi di halaman depan blog (homepage).

Beberapa kasus yang pernah terjadi pun, didapati pula kondisinya di dalam artikel (SinglePost), dan/atau maupun Related Posts. Jika kondisi yang bermasalah berada di Related Posts, masalahnya seperti gambar yang terpotong (Crop) dan/atau memang kabur.

Pic: YouTube - How to Fix Blurry Photos (Image)

4 Cara Jitu Mengatasi Gambar Buram di Blogger

Apapun dan bagaimana situasi serta kondisinya; salah satu tutorial yang ada di bawah ini, diharapkan bisa mengatasi gambar yang kabur di tampilan blog kamu.

1. Memperbaiki Gambar yang Kabur di Blogger/Blogspot

Silakan simpan kode di bawah 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>

Save Template dan Cek hasilnya bagaimana. Apabila sudah beres, tutorial yang ada di bawah ini tidak perlu dipraktekan lagi.

2. Cara Mengatasi Gambar Buram (Blur) di Blogger/Blogspot

Seandainya apabila kode JavaScript (Js) di atas gagal diterapkan di template blogger yang kamu gunakan, coba gunakan kode JavaScript (Js) di bawah ini.

Simpan kode jQuery di bawah ini:

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

...di atas kode </head> atau </body>

Selanjutnya simpan JavaScript (Js) di bawah ini:

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

...di atas kode </body> kemudian ketuk tombol Save, dan cek hasilnya.

Catatan:
Pada kode JS di atas, ubah (ganti) kode .post-thumbnails dengan kode gambar thumbnail di halaman depan blog. Begitu pula dengan Related Posts, .related-post misalnya.

3. Cara Mengatasi Gambar Keruh, Terpotong & Tidak Jelas di Blogger/Blogspot

Jika yang bermasalah adalah gambar yang berada di Related Posts atau Popular Posts; simpan kode di bawah ini, diatas 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>

...kemudian Save Template!

Catatan:
Pada kode Blog1 yang sudah ditandai, ubah dan/atau sesuaikan dengan kode elemen dari atribut HTML di template blogger yang kamu gunakan saat ini.

4. Cara Jitu Mengatasi Gambar Buram di Blog

Jika kamu menggunakan Auto Readmore di halaman depan (homepage) blog, sebenarnya ketiga tutorial di atas bisa kamu implementasikan dan nyatanya berhasil.

Akan tetapi, jika masih gagal (error) juga, coba ganti kode di bawah ini:

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

Catatan:
Lokasinya bisa di dalam atribut post var='post' atau mobile-index-post (tergantung blogger theme yang kamu gunakan).

...dengan kode di bawah ini:

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

Kode di atas akan mengkondisikan ukuran gambar secara otomatis; yang awalnya s72-c menjadi w300-h225-p-k-no-nu.

Selain itu, kode di atas juga akan mengubah (membuat) resolusi image thumbnail berubah dari 72px x 72px menjadi 300px x 250px sehingga gambar (image-thumbnail) tidak akan terpotong lagi.

Source:
https://bakuloreg.blogspot.com/2017/06/cara-mengatasi-gambar-thumbnail-buram.html
http://www.contohblog.com/2016/03/cara-mengatasi-gambar-buram-blur.html
http://www.panduantemplateblog.com/2013/12/javascript-memperjelas-tampilan-gambar.html

Labels: Tutorial Blogger

Thanks for reading 4 Cara Jitu Mengatasi Gambar Buram di Blogger. Please share this article.

Share this post