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

GAMBAR buran (blur) alias tidak terang menjadi dilema serius bagi sebagian blogger.

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

Gambar buram terjadi alasannya ialah ukuran thumbnail orisinil 72 pixel. Jika ukuran tampilan lebih besar, contohnya 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 isyarat 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 isyarat berikut ini di atas isyarat </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 isyarat di atas tidak berfungsi atau gagal mengatasi gambar buram halaman depan blog Anda, maka lakukan langkah ini:

1. Template > Edit HTML
2. Copas isyarat berikut ini di atas isyarat </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 isyarat image/gambar yang buram di halaman depan. Sesuaikan dengan isyarat gambar thumbnail halaman depan blog Anda.
- Jika yang buram ialah gambar related post, maka ganti isyarat tersebut dengan isyarat gambar related post, misalnya .related-posts 

3. Pastikan ada link ke isyarat jQuery di template blog Anda, ibarat ini:

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

Jika isyarat jQuery tersebut belum ada, maka tambahkan di atas isyarat no. 2 atau di atas isyarat </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 isyarat berikut ini di atas isyarat </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 isyarat Blog1 di isyarat terakhir dengan isyarat elemen gambar yang buram.

Gambar Buram Popular Posts

Untuk gambar Popular Posts berukuran besar (biasanya 300 pixel sesuai ukuran sidebar), gunakan isyarat berikut ini, simpan di atas isyarat </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 memakai auto readmore ialah 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 memakai isyarat di atas, secara otomatis akan mengubah isyarat s72-c menjadi w300-h225-p-k-no-nu dan menciptakan 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.idtutorial.com).*

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours