Cara Mengatasi Gambar Blur pada Popularpost Blogger

PASBLOGZ

PASBLOGZ merupakan sebuah blog yang terdapat banyak ilmu pengetahuan yang bermanfaat

Saya menulis artikel ini karena saya ingin berbagi pengalaman dan ilmu yang saya dapat dan semoga bermanfaat.

Cara Mengatasi Gambar Blur pada Popularpost Blogger

Tutorial ini saya buat berdasarkan pengalaman ketika saya mendapat masalah dengan gambar Thumbnail pada Popular Post Blog tampil Blur atau Buram, segala upaya saya coba dengan menyerang dan mengutak atik CSS dan penambahan Javascript namun sayang tak membawa hasil, gambar tetap Blur atau Buram.

Namun saya berpikir, tentu ada jalan keluar mengatasi masalah ini dan yang saya langsung berpikir untuk melihat kode HTML Popular Post yang berkaitan dengan Thumbnail dan saya yakin ini bisa menjadi solusi dan Ahayyyyy……… ternyata benar disitu terdapat value yang mencantumkan nilai dari resolusi gambar standart Blogger, resolusi standar untuk gambar thumbnail yang disediakan pihak Blogger adalah 72pixel ( s72-c ).

Jika kita memaksakan untuk menampilkan gambar thumbnail dengan ukuran yang lebih besar ( misal pada kode CSS menggunakan parameter {width:100%;height:auto}, dampak yang paling dirasakan adalah tampilan gambar thumbnail menjadi buram, blur,mblereng kata orang Jawa Timur.

Cara Mengatasi Gambar Blur pada Popularpost Blogger

Sebenernya tutorial Cara Mengatasi Gambar Blur pada Popularpost Blogger yang akan saya berikan ini cukup simple atau sederhana :

1. Silahkan masuk akun Blogger

2. Pada Dashboard >> Theme ( Tema ) >> Edit HTML

3. Klik arah bawah pada Jump to Widget lalu klik pada menu Popularpost

4. Setelah itu sampean akan mendapati kode HTML dari Popularpost seperti gambar dibawah ini.

5. Silahkan sampean ganti nilai data:post.featuredImage 72 menjadi 300 atau 600 sesuai keinginan namun dua nilai 300,600 ini sudah standart artinya gambar sudah tampak sempurna dan bening. lebih jelasnya kode lihat dibawah ini :

<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<b:with value='data:post.featuredImage.isResizable? resizeImage(data:post.featuredImage,72, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>
<img alt='' border='0' expr:src='data:image'/>
</b:with>
</a>
</div>

6. Kemudian tekan Save Template, Selesai dan lihat hasilnya….

Catatan sebagai tambahan wawasan bagi Sobat Blogger :

Saya ingin sedikit menjelaskan maksud nilai 72,300,600 ( ketiganya ini adalah nilai satuan pixel ). Dan nilai 72 adalah ( 72pixel atau dalam javascript banyak ditulis menjadi s72-c ) ini adalah nilai standart yang ditetapkan pada HTML Blogger.

Nilai standart ini tentu akan bertabrakan ketikan CSS image thumbnail yang mengatur parameter {width:100%;height:auto} maka gambar atau thumbnail akan tampil sepenuhnya sesuai bingkai aslinya. Maksudnya begini Mas/Mbak logikanya jika Wadah/Bingkainya dibuat lebar 100% dengan gambar distandartkan 72px tentu gambar akan tampak blur karena menyesuaikan lebar dan tinggi bingkainya tho…!!!! Misal lebar dan tinggi bingkai 300px x 180px dan gambar hanya dibuat 72px maka gambar akan tampak pecah2/Blur karena memaksa tampil sesuai bingkainya 300px.

Jika Cara diatas masih gagal,gimana..? Coba cara dibawah ini ya ...

1. Silahkan cari kode </body>, lalu letakkan Javascript dibawah ini diatas kode tersebut.

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

Demikian tutorial Cara Mengatasi Gambar Blur pada Popularpost Blogger, semoga bermanfaat buat Sobat Blogger semuanya…! Jika tutorial ini dirasa bermanfaat, saya mohon keikhlasannya untuk share tutorial dengan menekan tombol dibawah ini.

PASBLOGZ