Memperbesar/Mengubah Ukuran Thumbnail Posting

Tabel Konten
  1. Metode 1: Menggunakan JavaScript Murni 
  2. Metode 2: Menggunakan jQuery 
  3. Thumbnail Lain? 
    1. Versi JavaScript 
    2. Versi jQuery 
Memperbesar Thumbnail Posting

Pertanyaan Al-Firouz: Tentang bagaimana cara memperbesar thumbnail pada posting auto read-more tanpa JavaScript dengan jQuery:

Pertanyaan Al-Firouz: Tentang bagaimana cara memperbesar thumbnail
Dalam pesan Facebook

Pertama-tama, Saya tidak akan memberikan metode mengubah ukuran thumbnail Picasa dengan jQuery terlebih dahulu karena ada cara sederhana yang bisa dilakukan dengan mudah menggunakan JavaScript mentah. Pada intinya, kita hanya mencoba mengubah ukuran thumbnail kecil dari path-nya seperti yang pernah Saya ulas dengan cukup jelas di artikel Optimasi Thumbnail pada Posting Auto Read-More dan Widget Blogger, yaitu dengan cara mengubah ukuran standar thumbnail 72 × 72 piksel s72-c menjadi ukuran yang lain, misalnya s200-c.

Metode 1: Menggunakan JavaScript Murni 

Salin kode ini dan letakkan di atas tag </body>:

<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('main-wrapper', 200);
//]]>
</script>
</b:if>
</b:if>

Fungsi dieksekusi pada bagian ini:

resizeThumb('main-wrapper', 200);

main-wrapper adalah ID kolom posting, dan 200 adalah ukuran thumbnail baru. Kode di atas akan mengubah ukuran thumbnail dari 72 × 72 piksel menjadi 200 × 200 piksel.

Ganti juga ukuran width dan height thumbnail posting dalam kode CSS ini:

.post-thumbnail {
  width:72px;
  height:72px;
  float:left;
  margin:0 10px 0 0;
}

… menjadi berukuran sama dengan ukuran pembesaran thumbnail. Menyesuaikan contoh di atas, maka ukuran lebar dan tinggi thumbnail harus diubah menjadi 200px.

Simpan semua perubahan dan lihat hasilnya.

Lihat Sampel

Metode 2: Menggunakan jQuery 

Pada intinya cara kerjanya sama, hanya metodenya saja yang berbeda. Salin kode ini dan letakkan di atas kode </head> atau </body>:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script>
//<![CDATA[
function resizeThumb(el, from, to) {
    $(el).each(function() {
        $(this).attr({
            'src': $(this).attr('src').replace('/s'+from+'-c/', '/s'+to+'-c/'),
            'width': to, 'height': to
        });
    });
}
$(function() {
    resizeThumb('.post-thumbnail', '72', '200'); // Ubah ukuran thumbnail dari 72 menjadi 200
});
//]]>
</script>
</b:if>
</b:if>

Di sini Saya menggunakan selektor $('.post-thumbnail') untuk menargetkan thumbnail posting secara langsung. Anda bisa saja mengubah selektornya menjadi $('#main-wrapper img') atau $('.post img:first') atau bahkan yang lainnya jika template Anda memiliki struktur elemen yang unik. Pada intinya, targetkan gambarnya! Alasan Saya tidak menggunakan nama kelas thumbnail pada versi manipulasi JavaScript adalah karena Saya tidak ingin mengambil resiko mengingat document.getElementsByClassName tidak didukung oleh beberapa peramban tua - When can I use getElementsByClassName?

Lihat Sampel

Thumbnail Lain? 

Bukan hanya thumbnail pada posting saja yang bisa diubah ukurannya, tapi juga thumbnail-thumbnail pada widget lain, misalnya pada widget Posting Populer yang caranya juga pernah dituliskan oleh MS-Potilas di artikelnya (Kebetulan Saya mendapatkan ide JavaScript mentahnya dari sana). Di sini Saya hanya mengonversi kodenya menjadi plugin. Asalkan thumbnail tersebut diunggah pada direktori Picasa, maka kita bisa menemukan ciri khususnya dalam path lokasi gambar seperti s72-c, s200, s1600 dan lain sebagainya. Dari kunci itulah kita bisa mengubah ukuran-ukuran gambar menggunakan JavaScript dengan cara mengganti besarannya. berikut ini adalah contoh sederhana bagaimana cara memperbesar thumbnail pada widget Posting Populer:

Versi JavaScript 

<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;
    }
}
// Mengubah ukuran thumbnail widget Posting Populer
resizeThumb('PopularPosts1', 200);
//]]>
</script>

Versi jQuery 

<script>
//<![CDATA[
function resizeThumb(el, from, to) {
    $(el).each(function() {
        $(this).attr({
            'src': $(this).attr('src').replace('/s'+from+'-c/', '/s'+to+'-c/'),
            'width': to, 'height': to
        });
    });
}
// Mengubah ukuran thumbnail widget Posting Populer
$(function() {
    resizeThumb('#PopularPosts1 img', '72', '200');
});
//]]>
</script>

bisa dilepaskan jika tujuan kita adalah untuk mengubah ukuran thumbnail widget, karena umumnya widget muncul pada semua tipe halaman.

Catatan Tambahan: Saya melihat beberapa pembaca yang mendeklarasikan fungsi resizeThumb() berkali-kali pada tempat yang berbeda. Padahal fungsi ini cukup dinyatakan satu kali saja (Saya sarankan untuk meletakkannya di area <head>):

function resizeThumb(parentID, size) { ... }

Setelah itu Anda bisa menggunakan fungsi tersebut sebanyak yang Anda mau pada elemen mana saja:

resizeThumb('Blog1', 300);
resizeThumb('PopularPosts1', 200);
resizeThumb('Widget1', 50);
...

68 Komentar

  • Unknown

    Wakakakakakkakk Ujung2nya ya tetep pake JS kode blogger masih secret :D

  • Surga Kenari

    terus menjadi yang terdepan pak

  • Unknown

    mengenai auto read more.. saya masih ada yang belum paham terutama saat di source atau ctrl+U . semua artikel code masih terbuka dan bahkan saat loading pun masih berpengaruh berat pada blog, pertanyaanya..
    cara agar readmore itu benar2 memotong seluruhnya sampai source code. gimana..??
    kata lain seperti snippet pada wordpress...
    atau source yang saya ambil dari blog DTE ini seperti pada gambar.

  • Taufik Nurrohman

  • Unknown

    @Taufik Nurrohman Tes-tes, Ternyata kegantengan Al firouz terbukti juga dari Group FB sampai di Blog tutorial..
    Kalau udah baca artikel bang taufik pusing saya untuk memahaminya dan Perlu waktu benggong dulu sejenak liat kode-kode-nya dan memahami-nya tapi kagak paham-paham..
    Nasib-nasib heheeee

  • Unknown

    alhamdulillah berhasil diterapkan solusi yg sangat manjur :-bd \o/

    sebenarnya saya sudah membaca pada posting http://hompimpaalaihumgambreng.blogspot.com/2012/04/optimasi-thumbnail-pada-auto-read-more.html. Tapi penerapannya nggak mudeng hehehe :D

    terima kasih banyak bang :)

  • Beben Koben

    kalo cuman merubah ukuran thumbnail mah gak usah pake script, CSS jg bisa kok!

    • Taufik Nurrohman

      Bukan cuma ukurannya saja yang diubah, tapi juga resolusinya :W

  • Unknown

    Mas mau tanya nih,,,kok ukuran gambar di homepage ku masih kena scaled image ya,,,padahal di image properties resolusi udah benar ke ukuran 200, tapi malah kena scaled jadi 60x50,,,padahal thumbnail udah tak pakai'in class post-thumbnail..tapi tetep gitu aja,,,gak ada perubahan.

    • Taufik Nurrohman

      Di atas sudah Saya tuliskan, ganti juga ukuran pada kode CSS-nya:

      .post-thumbnail {
      width:200px;
      height:200px;
      float:left;
      margin:0px 10px 0px 0px;
      }
  • Unknown

    :-bd waw infonya bagus banget, hampir semua masalah dapat saya pecahkan di blogmu ini..
    Terimakasih.
    izin menetap sobat :)

    http://zone-uchiha.blogspot.com/

  • azewdsignet

    mas`ko susah ya resolusinya malah burem di image ya :(

    • Taufik Nurrohman

      Cuma berlaku untuk gambar yang diunggah melalui Blogger secara langsung, selain itu tidak bisa.

    • Anonim

      betul harus upload di blogger
      atau mungkin gini kali kang kasusnya,
      udah liat blognya juga tampilan gambarnya pake wide jadi ya nga pas klw ngikutin script di atas, karena kodenya berakhiran -c yg artinya gambar persegi
      harus di edit dikit scriptnya biar tampilan gambarnya bisa wide
      versi javascript
      function resizeThumb(parentID, size, size2) {
      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 + "");
      image[i].width = size;
      image[i].height = size2;
      }
      }
      // Mengubah ukuran thumbnail widget Posting Populer
      resizeThumb('PopularPosts1', 200, 90);
      resizeThumb('PopularPosts2', 200, 90);
      resizeThumb('stylify_random', 176, 130);
      resizeThumb('post-body', 176, 130);

      versi jquery
      function resizeThumb(b, a, d, c) {
      $(b).each(function () {
      $(this).attr({
      src: $(this).attr("src").replace("/s" + a + "-c/", "/s" + d + "/"),
      width: d,
      height: c
      })
      })
      }
      $(function () {
      resizeThumb("#stylify_random img", "72", "176", "130");
      resizeThumb(".post-body img", "72", "176", "130");
      resizeThumb("#PopularPosts1 img", "72", "176", "90");
      resizeThumb("#PopularPosts2 img", "72", "176", "90")
      });

      ===========
      oia kang sekalian tanya
      itu yang versi javascript nga bisa risize element dg atribut class ya,,id doank bisanya ??

      klw yang jquery selektornya kan lebih mudah :(

      • Unknown

        kalau mau nerapin di blog saya timeslib.com biar thumbnailnya wide gmna gan , plese, help :(

      • Unknown

        gan, kalo itu ".post-body img", "72", "176", "130"); saya ganti angka 176 sama 130 nya jadi 280 sama 147, trus angka 72nya jadi brapa ya?

        timeslib.com

  • Anonim

    makasih ya gan infonya ^^

  • Guru Seni Budaya

    gambar di tampilan postingan saya kan terlalu lonjong... solusinya gimana? cepet ya....
    www.sanggarsenipacul.blogspot.com

  • elfata

    Makasih gan, izin tak pakai tipsnya di blog ku

  • Anonim

    Hebat... hebat banget... keren.. cool... smuanya dah bwt agan \o/

  • Gunawan

    Bisa tanya nda, gmn caranya memasang tag alt dan title pada gambar di blog yang menggunakan kode readmore otomatis. Kodenya kurang lebih seperti ini :
    <script>
    var thumbnail_mode = &quot;float&quot; ;
    summary_noimg = 680;
    summary_img = 670;
    img_thumb_height = 175;
    img_thumb_width = 200;
    </script>
    <script>
    //<![CDATA[
    function removeHtmlTag(strx,chop){
    if(strx.indexOf("<")!=-1)
    {
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
    if(s[i].indexOf(">")!=-1){
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
    }
    }
    strx = s.join("");
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
    strx = strx.substring(0,chop-1);
    return strx+'...';
    }
    function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    if(img.length<=0) {
    imgtag = '<div class="thumb-post"><span style="float:left; margin:5px 11px 0 0;"><img src="http://1.bp.blogspot.com/-DewXrlymD20/UO_BfieN1eI/AAAAAAAAGFA/i3twgxtU4AI/s320/gambar-defaul-artikel-blog2.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span></div>';
    var summ = summary_noimg;
    }
    if(img.length>=1) {
    imgtag = '<div class="thumb-post"><span style="float:left; margin:5px 11px 0 0;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span></div>';
    summ = summary_img;
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
    }
    //]]>
    </script>

    Mohon penjelasannya ya... Plissss

    • you

      kalo ane mah gini gan img Alt="Read more this content" title="Read more this content" src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span></div>';
      summ = summary_img;

      semua title dan alt nya pada semua posting jadi sama ...

  • Unknown

    kenapa ya saya udh nerapin semua dari jquery ampe javascript tetep hasilnya nihil -_-

    s72-c <- link di gambarnya selalu -_- emang sih nongol di html imgnya <img scr='' width='500px' height='500px' />

    nih jquery yang saya terapin
    <script type='text/javascript'>
    //<![CDATA[
    function resizeThumb(el, from, to) {
    $(el).each(function() {
    $(this).attr({
    'src': $(this).attr('src').replace('/s'+from+'-c/', '/s'+to+'-c/'),
    'width': to, 'height': to
    });
    });
    }
    // Mengubah ukuran thumbnail widget Posting Populer
    $(function() {
    resizeThumb('.thumbmage img', '500', '500');
    });
    //]]>
    </script>

    • Taufik Nurrohman

      Ini betul lokasi gambarnya ada di sebelah sini?

      $('.thumbmage img');
  • Sodikin Kurniawan

    Mau tanya kalau script diatas di sisipin untuk memanggil img di youtube jika kalau di posting terdapat video dari youtube gimana ya ?

    var yimage='<a href="'+url+'"><img src="'+image.replace('default', '0') + '" alt="'+title+'"/></a>';
    if (image.indexOf("img.youtube.com")!= -1)return yimage;

    terimakasih.

    • Taufik Nurrohman

      Setahu Saya thumbnail YouTube tidak bisa masuk ke dalam elemen data:post.thumbnailUrl

      • Sodikin Kurniawan

        Terimakasih banyak ... jawabnnya.. menmbah ilmu saya .. I LOVE DTE

      • Sodikin Kurniawan

        Mau tanya lagi ne Bang .. dengan script di atas gambar akan diload aslinya baru di resize jadi jika saya cuman mengubah resize pajangnya dan saya menggunakan plugin masonry gambar tumbnail itu akan manumpuk . jadi bagaimana mengatasinya ya ... contohnya di template ini urangpoto.blogspot.com

        • Taufik Nurrohman

          Tentukan lebar dan tinggi gambar ke CSS juga:

          <script>
          resizeThumb('main-wrapper', 200);
          </script>
          <style>
          .post-thumbnail {
          width: 200px;
          height: 200px;
          }
          </style>
  • MH Nur

    bang mau tanya cara agar gambar thumbnail auto resize gimana? di blog ane gambarnya jadi ngezoom malah.. cek blog ane bang (maaf g bermaksud promo) momojustshare.blogspot[dot]com

    mohon pencerahannya...

  • Kang Rian

    ini yang saya cari-cari pak taufik . terima kasih info nya . sangat membantu para blogger autodidact seperti saya . :)

  • Achmad Afandi

    mas saya masih belum mengerti mas mohon dengan sangat mas penjelasannya, saya sudah praktekkan di blog saya tapi gambar post yang ada di homepage masih aja ngeblur mas? tolong pencerahannya...

    • Taufik Nurrohman

      Mungkin karena kamu pakai templat kustom? Atau meletakkan skrip sebelum gambar-gambar termuat?

      • Achmad Afandi

        maaf mas ini link'nya 'blogdemokangfandi.blogspot.com' silahkan di cek, tolong sekali mas karena saya tidak mengerti apa" tentang ini. gambarnya masih ngeblur mas... dan resolusinya masih tetap.

        • Taufik Nurrohman

          Punyamu sudah punya fungsi pengubah resolusi gambar sendiri, namanya bp_thumbnail_resize. Coba cari di dalam templat. Lalu ubah nilai variabel image_size jadi 150:

          function bp_thumbnail_resize(image_url, post_title) {
          var image_size = 65; // ← ganti jadi `150`
          var image_tag='<img src="' + image_url.replace('/s72-c/','/s' + image_size + '-c/') + '" class="postthumb" alt="' + post_title + '" title="' + post_title + '"/>';
          if (image_url != "") return image_tag; else return "";
          }
          • Achmad Afandi

            wah.. terimakasih banyak mas, sudah membantu saya.. semoga tuhan selalu memberikan rizky'nya pada mas taufik. hehehe....
            ikut jadi followers mas...

          • Achmad Afandi

            terimakasih banyak... , mas taunya gmna ? padahal templatenya udah saya otak-atik tadi.

          • Achmad Afandi

            terimakasih banyak... , mas taunya gmna ? padahal templatenya udah saya otak-atik tadi.

  • Unknown

    sip sip. . \o/

  • Bungfrangki

    Kalau buat thumbnailnya jadi landscape?

  • artlistious

    mantep banget gan, kebetulan saya juga baru pusying otak2x blogger . . .
    http://shirostore.blogspot.com/

  • Zamrud Graphic

    [ASK]

    bagaimana caranya agar img bentuknya tidak tetap persegi ? semisal 200x100,
    coba saya rubah kog gambarnya ngikut gepeng ? terimakaish..

    • Zamrud Graphic

      \o/

      terselesaikan .. thankyou DTE!

      release "-c"

      • Unknown

        lucu nih agan hehehe, nanya sendiri jawab sendiri \o/

  • Unknown

    request buat thumbnail yg wide dong gan, buat diterapin diblog saya timeslib.com dong :)

  • Febri Tri Harmoko

    mas saya mau tanya..
    kalau di blog saya ini gimana untuk ngeresize gambar pada tampilan homepage nya ?
    http://himapsikunja.blogspot.com/

  • Unknown

    mas mau nanya ini kok ngeblur ya tumbnail postingnya udah saya praktekin gak berubah sama sekali , mohon pencerahannya mas? kasih solusi www.hyundaipurwokerto.com . tolong bantu mas

  • Reksa Andhika

    Komentar ini telah dihapus oleh pengarang.

  • Reksa Andhika

    Kadang script gk keload, jadi gambar ngeblur gitu.. gimana cara ngatasin masalah tersebut

    • Taufik Nurrohman

      Biasanya karena konflik dengan skrip yang ada yang dituliskan di atasnya. Misal skrip yang terletak di sebelak atas skrip thumbnail ini rusak, itu akan membuat skrip di bawahnya menjadi gagal dieksekusi.

  • Unknown

    itu kan jika ukuran image thumbnail nya sama seperti 200 x 200
    nah jika berbeda seperti punya saya 240px buat lebar dan 150px buat tinggi itu gimana gan ?? mohon penjelasannya

  • Unknown

    keren artikelnya gan :D

  • Unknown

    Mas Taufik,
    permisi numpang tanya,
    thumbnail URL popular post di blog saya ko jadi berubah dari .../s72-c/gambarku34.jpg
    jadi .../w72-h72-p-nu/gambarku34.jpg

    yang saya mau tanyakan gimana cara ngubah baris script ini:

    image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + size + "-c");

    supaya bisa bekerja diblog saya

    terimakasih mas Taufik

    • Taufik Nurrohman

      Coba:

      foo.replace(/\/s72\-c/, '/w' + size + '-h' + size + '-p-nu/');
  • Unknown

    Makasih gan ilmunya..

  • Unknown

    ,,, artikel nya bagus sekali lengkap dan detail patut jadi contoh,, saya mau minta tolong, saya ingin ukuran tumbnail di halaman homepage saya berukuran 150x150 saja, tapi saat artikel tersebut di buka atau di baca tetap dengan ukuran asli nya bukan 150x150 sperti di homepage nya? apakah bisa? mohon bantuan nya, saya lihat saudaraahli dalam hal ini, mohon bantuanya ya,, terima kasih

  • admin

    klo memperbesar ukuran gambar di homepage versi mobile caranya gmn gan ?

  • Abdul Rahim

    klo yg mau dirubah hanya thumbnile dari satu post aja gimana?jadi misalkan dalam homepage, ada 5 post yang ditampilkan, jadi yang 4 post, ukuran thumbnile nya biasa aja, nah yang satu paling atas, dirubah jadi full.
    gimana tu gan?

    • Unknown

      Mau nyoba bantu jawab, semoga bener.
      Coba kreasikan dengan kode CSS :nth-first-child.

      Jika berhasil, masalah terakhirnya ada di resolusi gambar yang kemungkinan bakal pecah.

      Jadi, anda bisa menggunakan script jQuery untuk merubah resolusi gambar tersebut agar 'normal' kembali.

Komentar telah ditutup.