Cara Mengatasi Gambar Thumbnail Blur dan Burem di Halaman Utama Versi Blogger Terbaru

Contoh Gambar Thumbnail Pada Halaman Depan Blog Yang Burem dan Tidak Jelas

Cara Mengatasi Gambar Thumbnail Blur dan Burem di Halaman Utama Versi Blogger Terbaru, Assalamualaikum warahmatullahi wabarakatuh Pada kesempatan kali ini kami akan berbagi informasi tentang bagaimana pada update blogger terbaru memang banyak sekali kode javascript yang error yang di mana hal ini banyak diungkapkan di beberapa forum dan group tentang update dari dasbor blogger ini yang mengakibatkan beberapa datascrip sudah tidak berfungsi lagi yang salah satunya yaitu javascript untuk thumbnail gambar pada blogger.

Mudah-mudahan dengan adanya tutorial ini bisa bermanfaat karena dari beberapa panduan yang saya temukan di Google yang dimana panduan-panduan tersebut sudah tidak bisa berlaku lagi terutama dengan beberapa artikel yang memberikan solusi tentang memperbaiki dari gambar blur ataupun gambar pada halaman depan blog Anda atau website anda tidak jelas tetapi masih menggunakan kode javascript yang pada umumnya

Oleh karena itu kami di sini ini akan memberikan panduan khusus versi blogger terbaru Jadi mungkin ada baiknya beberapa postingan yang sudah nongkrong di halaman 1 Google untuk segera diperbaiki agar tidak menguntungkan dan untuk pengunjung yang sedang membutuhkan tutorial tersebut

Oke tanpa basa-basi lagi langsung saja disimak Bagaimana cara mengatasi maupun memperbaiki thumbnail blog yang pecah ataupun tidak jelas dan berikut adalah panduannya

SOLUSI PERTAMA MENGATASI THUMBNAIL ERROR

1. Pertama buka blogger masuk ke bagian Tema lalu pilih edit html setelah terbuka silahkan ctrl + f lalu cari kode data:post.thumbnailUrl setelah ketemu kira-kira seperti ini seperti kode yang ada pada template arlina

<script type='text/javascript'>
document.write(arlina_thumb_size("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script>

2. Hapus semua kode tersebut jika mulai dari <script type='text/javascript'> sampai </script> patokannya adalah data:post.thumbnailUrl lalu ganti dengan kode dibawah ini.

PILIH KODE 1 GAMBAR TANPA TITLE

/*Mulai Kode Thumbnail Ketika disorot Gambar Tanpa Title*/

<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, 290, "300:200")' height='150' width='200'/>
   </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/AVvXsEhJCwZwWLNGCHrjnZkH4vhiLWIMLjsF664WbSPnEJ9-aJH_teNy_KVUqHrMW_Lb01LsvFjFPTJdW4GFsFs6ZfNKo6bmt7yICVGScg9ONQ_yAciuuMlLFwgSALTdHm27JS1m9QqFdNJIZYib/s1600/noimage.png'/></div>
      </a>
   </b:if>
</b:if>

/*Akhir Kode Thumbnail Ketika disorot Gambar Tanpa Title*/

ATAU PILIH KODE 2 GAMBAR MENGGUNAKAN TITLE

/*Mulai Kode Thumbnail Ketika disorot Gambar Muncul Title*/

<b:if cond='data:post.thumbnailUrl'>
   <a class='thumb' expr:href='data:post.url'>
   <img class='lazy' expr:alt='data:post.title' expr:title='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 290, "300:200")' height='150' width='200'/>
   </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/AVvXsEhJCwZwWLNGCHrjnZkH4vhiLWIMLjsF664WbSPnEJ9-aJH_teNy_KVUqHrMW_Lb01LsvFjFPTJdW4GFsFs6ZfNKo6bmt7yICVGScg9ONQ_yAciuuMlLFwgSALTdHm27JS1m9QqFdNJIZYib/s1600/noimage.png'/></div>
      </a>
   </b:if>
</b:if>

/*Akhir Kode Thumbnail Ketika disorot Gambar Muncul Title*/

Dan silahkan simpan tema anda untuk mengubah ukuran gambar silahkan sesuaikan tinggi dan lebarnya pada height='150' width='200' dan angka 290 untuk dimensinya sedangkan 300:200 untuk rasionya.

SOLUSI KEDUA MENGATASI THUMBNAIL ERROR

Dan untuk solusi kedua adalah jika pada cara pertama anda tidak menemukan kode seperti ini

<script type='text/javascript'>
document.write(arlina_thumb_size("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script>

anda bisa mencari kode data:post.thumbnailUrl seperti ini

<b:if cond='data:post.thumbnailUrl'>
        <a expr:href='data:post.url'><div class='img-thumb'><img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' expr:title='data:post.title' height='74' width='74'/></div>
        </a>
   <b:else/>

<b:if cond='data:post.firstImageUrl'>
        <a expr:href='data:post.url'><div class='img-thumb'><img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title' height='74' width='74'/></div>
        </a>
   <b:else/>

<a expr:href='data:post.url'><div class='img-thumb'><img expr:alt='data:post.title' expr:title='data:post.title' height='74' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCB9AwNFb6N8obWmJCjsBtQE7kPun1DPyblGSd-ImqYYPKU48MyQWKj7hUq3dm3907PBWtQECOliQSCVbCMQpoMdNPp1Jqk_YBM-jVjkrMHX_6m-WwIFfLD_aF7IMsMMFIhtOjysXApEUh/w100-c-h100/no-image.png' width='74'/></div>
        </a>

Patokannya adalah data:post.thumbnailUrl, data:post.firstImageUrl, data:post.url akan terlihat secara berurutan pada template atau tema blog anda.

Dan yang perlu kalian lakukan hanyalah merubah kode yang saya beri tebal biru contohnya adalah

A. BARIS 1

Ganti dengan

B. BARIS 2

Ganti dengan

C. BARIS 3

Ganti dengan

Maka Kode Hasil Akhirnya akan seperti ini.

<b:if cond='data:post.thumbnailUrl'>
        <a expr:href='data:post.url'><div class='img-thumb'><img class='lazy' expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 290, "300:200")' height='150' width='200'/></div>
        </a>
   <b:else/>

<b:if cond='data:post.firstImageUrl'>
        <a expr:href='data:post.url'><div class='img-thumb'><img class='lazy' expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title' itemprop='image'/></div>
        </a>
   <b:else/>

<a expr:href='data:post.url'><div class='img-thumb'><img class='lazy' expr:alt='data:post.title' expr:title='data:post.title' itemprop='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJCwZwWLNGCHrjnZkH4vhiLWIMLjsF664WbSPnEJ9-aJH_teNy_KVUqHrMW_Lb01LsvFjFPTJdW4GFsFs6ZfNKo6bmt7yICVGScg9ONQ_yAciuuMlLFwgSALTdHm27JS1m9QqFdNJIZYib/s1600/noimage.png'/></div>
        </a>

SOLUSI KETIGA MENGATASI THUMBNAIL ERROR

Untuk solusi ketiga belum ada soalnya sejauh ini dengan 2 solusi diatas bisa teratasi pada beberapa blog dan website yang saya miliki.

Hanya itu dulu apa yang bisa kami sampaikan tentang bagaimana cara mengatasi gambar thumbnail pada sebuah blog yang tidak tampil sempurna atau blur ataupun burem ataupun tidak jelas terlihat oleh mata kita terima kasih