Cara Mengatasi Gambar Thumbnail Buram di Halaman Depan Blog Cara buat blog itu- Cara Mengatasi Gambar Buram (Blur) di Blogger
Cara Mengatasi Gambar Thumbnail Buram di Halaman Depan Blog.

GAMBAR buran (blur) alias tidak terperinci menjadi duduk perkara serius bagi sebagian blogger.

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

Gambar buram terjadi sebab 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 arahan 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 arahan berikut ini di atas arahan </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 arahan di atas tidak berfungsi atau gagal mengatasi gambar buram halaman depan blog Anda, maka lakukan langkah ini:

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

3. Pastikan ada link ke arahan jQuery di template blog Anda, menyerupai ini:

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

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

Gambar Buram Popular Posts

Untuk gambar Popular Posts berukuran besar (biasanya 300 pixel sesuai ukuran sidebar), gunakan arahan berikut ini, simpan di atas arahan </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 arahan di atas, secara otomatis akan mengubah arahan 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.carabuatblogitu.com).*

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours