Mengatasi Gambar (Image) Thumbnail Buram di Halaman Depan Blog
Romeltea | Follow @romel_tea
Cara Mengatasi Gambar (Image) Thumbnail Buram di Halaman Depan Blog.
GAMBAR (image) thumbnail di halaman depan buram (blur) tidak enak dipandang mata. Demikian juga jika buram di gambar lain.
Umumnya gambar buram di homepage akibat menerapkan Auto Readmore Blog atau beranda blog hanya menampilkan gambar kecil, judul, dan kutipan artikel.
Gambar yang ukuran normalnya 72 Pixel diubah jadi lebih besar, misalnya 100 pixel atau 300 px.
Maka, untuk Mengatasi Gambar (Image) Thumbnail Buram di Halaman Depan Blog, berikut ini kodenya yang banyak di-share sejumlah blogger.
2. Pastikan ada link ke kode jQuery di template blog Anda, seperti ini (biasanya ada di atas kode </head>)
Jika tidak ada, pasang dulu biar kode mengatasi gambar buram di bawah ini berfungsi dengan baik.
3. Simpan kode di berikut ini di atas kode </body> atau </head>
Dengan kode di atas, gambar (image) thumbnail yang tadinya buram (blur) menjadi jelas, sebagaimana gambar aslinya.
GAMBAR (image) thumbnail di halaman depan buram (blur) tidak enak dipandang mata. Demikian juga jika buram di gambar lain.
Umumnya gambar buram di homepage akibat menerapkan Auto Readmore Blog atau beranda blog hanya menampilkan gambar kecil, judul, dan kutipan artikel.
Gambar yang ukuran normalnya 72 Pixel diubah jadi lebih besar, misalnya 100 pixel atau 300 px.
Maka, untuk Mengatasi Gambar (Image) Thumbnail Buram di Halaman Depan Blog, berikut ini kodenya yang banyak di-share sejumlah blogger.
Mengatasi Gambar (Image) Thumbnail Buram di Halaman Depan Blog
1. Theme > Edit HTML2. Pastikan ada link ke kode jQuery di template blog Anda, seperti ini (biasanya ada di atas kode </head>)
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' type='text/javascript'></script>
Jika tidak ada, pasang dulu biar kode mengatasi gambar buram di bawah ini berfungsi dengan baik.
3. Simpan kode di 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>
Dengan kode di atas, gambar (image) thumbnail yang tadinya buram (blur) menjadi jelas, sebagaimana gambar aslinya.
Kode Alternatif Mengatasi Gambar Buram
Jika acara atau kode di atas gagal mengatasi thumbnail image yang blur, coba gunakan kode berikut ini.
1. Cari kode ini:
<b:if cond='data:post.thumbnailUrl'>BANYAK KODE LAIN DI SINI</b:if>
3. Ganti dengan kode
<b:if cond='data:post.thumbnailUrl'><a class='thumb' expr:href='data:post.url'><img class='lazy' expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 170, "300:200")' height='90' width='170'/></a><b:else/><b:if cond='data:post.firstImageUrl'><a expr:href='data:post.url' expr:title='data:post.title'><img class='lazy' expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title' itemprop='image'/></a><b:else/><a expr:href='data:post.url' expr:title='data:post.title'><div class='postthumb'><img class='lazy' expr:alt='data:post.title' expr:title='data:post.title' itemprop='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifW3uGedNLq3umaytjZWzVBt3TYlUZCX5SczLpKhF3hg7XbRgoxEMGKiiEagWESUBAj_ZrAVtIQT4oiNtmKHWmaRDPc7J5ULHtIldpZqaxqnd1CYFkGncNbf4u6LYjRpLS54eHOqP5UMv2/s1600/noimage.png'/></div></a></b:if></b:if>
Dalam kode itu ukuran gambar thumbnail 170x90 sebagaimana digunakan dalam Blog Romeltea ini. Sesuaikan dengan ukuran gambar thumbnail di blog Anda.
Save!
Semoga berhasil. Gambar tidak buram lagi.
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
gak wok tutorial nya
ReplyDeletepastikan ada link ke jquery di template
Deletepunya saya masih buram padahal udah pakai cara ini bagaimana mengatasinya ya
ReplyDeletemakasih banyak om! jadi tenang hidup gw.
ReplyDeleteterima kasih mas, kodenya fungsi
ReplyDelete