Cara Mengatasi Thumbnail Post Buram

Kali ini saya akan memberikan tutorial cara membuat thumbnail post tidak buram atau blur, kalau kita lihat thumbnail post blur itu rasanya gak enak dipandang. banyak kasus seperti thumbnail post buram atau gambar di popular post dan related post buram dan terpotong.

Kali ini saya akan memberikan tutorial mengatasi semua itu, berikut tutorialnya

1. Cara Memperbaiki Gambar Yang Kabur di Blogger

Silahkan simpan kode dibawah ini, diatas 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>

silahkan 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'/>

Taruh kode diatas, diatas 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>

Taruh code diatas, diatas 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>

Silahkan 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://addbloggerthemes.blogspot.com/2018/07/cara-mengatasi-gambar-buram-blog.html

Share this post