Cara Mudah Mengatasi Thumbnail Blur di Blogger Versi Terbaru
Akhir-akhir ini banyak sekali pengguna atau user yang merasakan resah terhadap tampilan blogger yang berubah secara total semenjak ada update dari versi klasik ke versi terbaru. Pasalnya banyak sekali yang berpendapat bahwa blogger versi terbaru mempunyai banyak bug salah satu contohnya adalah bug di Thumbnail Post yang menjadi buram dan kurang jelas.
Tujuan saya menulis artikel ini adalah ingin memberitahukan kepada beberapa sobat blogger yang memiliki masalah tersebut pada blogger versi Terbaru. Maka dari itu langsung saja kita ke praktek dan tutorialnya.
Cara Mudah Mengatasi Thumbnail Post yang Blur di Blogger Versi Terbaru
Seperti biasa langkah yang paling pertama adalah, buka Blogger sobat dan klik pada bagian Menu Tema - Edit HTML. Kemudian cari kode yang mirip seperti kode di bawah ini (Perlu diketahui juga setiap tema atau template blogger berbeda jadi tinggal sesuaikan saja dengan tema yang sobat pakai atau gunakan):
<script type='text/javascript'>
document.write(lunarSummaryThumb("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script>Setelah itu ganti kode Javascript di atas dengan kode Javascript di bawah ini:
<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, 280, "300:200")' height='186' width='280'/>
</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/AVvXsEhsFs22ghZne6v5djZcXbWOzedJQFdXyzPmWcBWwPa8BraMVnwNKMKj01r6aPBmIu-niuDGETbGtCfLv_9MyvS1jpTiY7xej4hfPwD7GcDn9VQrsULm0TYEebXsejw4s8_YOeRRqnaKcYaJ/s1600/noimage.png'/></div>
</a>
</b:if>
</b:if>Keterangan:
Angka 280 Menunjukkan dimensi gambar yang akan di tampilkan,
300:200 menunjukkan rasio gambar dengan format landscape. Yang dimana 300 untuk lebar dan 200 untuk tinggi. Sobat pun bisa mengganti rasio tersebut dengan format lain contohnya seperti 1:1 4:3
dan 16:9. Namun sayang sekali format gambar blogger belum mendukung untuk rasio gambar dengan format potrait. Sehingga ukuran tinggi gambar tidak akan bisa melebihi lebar gambar.
Ada baiknya juga sobat ingin mempersingkat tulisan, sobat masih tetap menyimpan kode snippet seperti ini:
<script>
snippet_count = 120;
//<![CDATA[
function removeHtmlTag(n,e){if(-1!=n.indexOf("<")){for(var t=n.split("<"),i=0;i<t.length;i++)-1!=t[i].indexOf(">")&&(t[i]=t[i].substring(t[i].indexOf(">")+1,t[i].length));n=t.join("")}for(e=e<n.length-1?e:n.length-2;" "!=n.charAt(e-1)&&-1!=n.indexOf(" ",e);)e++;return n=n.substring(0,e-1),n+"..."}function createSnippet(n){var e=document.getElementById(n),t=snippet_count,i='<div class="snippets">'+removeHtmlTag(e.innerHTML,t)+"</div>";e.innerHTML=i}
//]]>
</script>Dan untuk pemanggilan kodenya seperti ini:
<b:if cond='data:view.isMultipleItems'>
<div itemprop='description articleBody'>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>createSnippet("summary<data:post.id/>");</script>
</div>
</b:if>Jika sudah klik Simpan Tema dan selesai. Silahkan lihat hasilnya di blog sobat.
Itulah Cara Mudah Mengatasi Thumbnail Blur di Blogger Versi Terbaru. Mungkin segini saja Artikel yang saya tulis dan saya bagikan semoga bermanfaat dan membantu untuk sobat blogger yang mengalami masalah tersebut.
haloo
BalasHapusTest komentar
BalasHapus