JavaScript: Memperjelas Tampilan Gambar Buram Blog di HomePage

JavaScript: Memperjelas Tampilan Gambar Buram Blog di HomePage - Dalam beberapa kasus tampilan gambar blog terkadang tidak sesuai dengan khualitas tampilan gambar yang sebenarnya, terkadang tampilan yang muncul jelek atau buram, sehingga membuat tampilan blog terlihat tidak bagus. Berubahnya tampilan khualitas gambar menjadi buram dikarenakan penggunaan kode-kode tertentu misalnya pemasangan auto readmore yang manggunakan post snippet. Tidak seperti penggunaan auto readmore dengan javascript, pada auto readmore dengan post snippet, nilai yang terpasang pada gambar (image) sudah terpasang secara otomatis dengan ukuran yang sangat minimalis, biasanya 70 x 70, sehingga dengan ukuran tersebut, saat gambar blog diperbesar secara manual maka perubahan pun terjadi yaitu tampilan gambar blog menjadi buram, hal ini dikarenakan karena ukuran yang terpasang tidak sesuai dengan ukuran yang ada didalam kode post snippet

Ingat, tampilan gambar buram hanya terjadi di halaman homepage blog, sedangkan di halaman artikel tidak terpengaruh. Jika didalam blog Anda terdapat permasalahan adanya tampilan gambar blog yang buram di homepage karena pengaturan tertentu didalam kode post snippet, berikut caranya:

JavaScript: Memperjelas Tampilan Gambar Buram Blog di HomePage

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <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>
  </b:if>
</b:if>
<div class='clear'/>

Salin kode script diatas. setelah atau dibawah kode berikut ini:

HTML

<b:section class='main' id='box-posting' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable>...</b:includable>
</b:widget>
</b:section>

Sehingga hasilnya seperti berikut ini:

<b:section class='main' id='box-posting' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable>...</b:includable>
</b:widget>
</b:section>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <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>
  </b:if>
</b:if>
<div class='clear'/>

Simpan template

Oya untuk mengganti ukuran gambar pada kode script diatas, silahkan ganti pada kode resizeThumb('Blog1', 300);
Misalnya ukuran 500 x 500, maka ganti resizeThumb('Blog1', 300); menjadi resizeThumb('Blog1', 200); atau bisa tetap. Jika ukuranya 100 x 100 dan menggunakan ukuran 300 pada resizeThumb('Blog1', 300);, kemungkinan hasilnya akan jelek, silahkan di coba..

Sebenarnya terdapat pengaturan tambahan yang perlu dilakukan didalam kode post snippet agar tampilan gambar blog di homepage tidak buram dan tidak perlu menggunakan kode diatas. Untuk yang ini, akan saya jelaskan pada artikel selanjutnya atau mungkin ada teman-teman blogger yang telah mengetahuinya, silahkan di share melalui komentar artikel blog ini, Memperjelas Tampilan Gambar Buram Blog di HomePage