Kamis, 19 Desember 2013

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

JavaScript: Memperjelas Tampilan Gambar Buram Blog di HomePage

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

JavaScript: Memperjelas Tampilan Gambar Buram Blog di HomePage Rating: 4.5 Diposkan Oleh: ana sriwahyuni

11 komentar:

  1. Betul mbak Ana, jika tidak menggunakan javascript untuk resize thumbnail maka thumbnail yang muncul jadi standar blogger 70 x 70. nice share mbak Ana... :-d :-d

    BalasHapus
    Balasan
    1. iya mas Adhy, oya ada yang belum dijelaskan diartikel diatas,, tak edit dulu mas... pada kode resizeThumb('Blog1', 300); heheee

      Hapus
  2. bu ana kalok misalkan mau memperjelas gambar di relate post gimana ?

    BalasHapus
    Balasan
    1. dengan script diatas, juga bisa digunakan mbak..

      Hapus
  3. Senang sekali ada tutorial ini, gambar di blog saya tampil bagus :]

    BalasHapus
  4. makasih Bu Ana ini yang sy cari dari kemarin :D

    BalasHapus
  5. Kalau untuk wordpress ada gak Mbak fungsi retina tersebut ?

    BalasHapus
    Balasan
    1. ada mas, yang wordpress yang banyak menggunakan mas Arie

      Hapus
  6. Maksih banyak gan inpoh nya.
    akhirnya ketemu juga hampir stress nyari tutorial ini...


    Nuhun ah..

    BalasHapus
  7. akhirnya dapat juga yang di cari terima kasih ya mbak untuk share nya

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia