Membuat dan Mengubah Ukuran (Resize) Thumbnail Blogger Tanpa Javascript

Cara Menampilkan dan Resize Ukuran Gambar Thumbnail Blogger Tanpa Javascript

Saya menulis tutorial ini karena geregetan banyak yang menampilkan thumbnail Blogspot pakai Javascript. Belum lagi nanti pada proses resize ditambahkan script lain. Padahal tag bawaan Blogger sudah mendukung kedua proses kerja itu. Mubazir kan kalau tidak dimanfaatkan. Mungkin karena template gratisan yang beredar kebanyakan pakai Javascript untuk ambil dan resize gambar thumbnail, jadi pembuat template yang lain mengikuti. Sekarang saatnya untuk meluruskan hal itu.

1. Cara Menampilkan Gambar Thumbnail di Homepage Blogspot Tanpa Script

Thumbnail yang muncul diambil dari gambar pertama atau paling atas dari isi artikel. Tag kondisional Blogger yang digunakan untuk membaca gambar paling awal adalah data:post.firstImageUrl.

Jika menggunakan Javascript biasanya diperlukan 2 langkah. Pertama membuat fungsi resize, kedua untuk menuliskan / menampilkan gambar yang sudah di-resize tersebut.

Untuk fungsi resize dibuat dengan kode berikut. Ada kemungkinan tidak sama persis, ya mirip-mirip lah. Langsung HAPUS semuanya ya.
<script type='text/javascript'>
//<![CDATA[
function thumb_size(e,t){var n=200;var r=150;image_tag='<img width="'+n+'" height="'+r+'" src="'+e.replace("/s72-c/","/w"+n+"-h"+r+"-c/")+'" alt="'+t.replace(/"/g,"")+'" title="'+t.replace(/"/g,"")+'" class="post-thumbnail"/>';if(t!="")return image_tag;else return""}
//]]>
</script>


Dan untuk menampilkannya menggunakan kode ini:
<script type='text/javascript'>
document.write(thumb_size(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title'/>&quot;));
</script>

Kode itu pun HAPUS dan GANTI dengan tag bawaan Blogger ini:
<img expr:alt='data:post.title' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/>

Cara Membuat dan Resize Gambar Thumbnail Post Blogger
Klik untuk melihat ukuran lebih besar.

Jika pada Javascript sebelumnya ditambahkan class, maka harus ditambahkan juga di kode yang baru agar tampilannya tetap sama seperti pengaturan CSS. Contoh pada Javascript diatas ada class="post-thumbnail". Maka pada kode baru tambahkan menjadi:
<img class="post-thumbnail" expr:alt='data:post.title' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/>

Dan proses membuat gambar thumbnail postingan Blogger tanpa Javascript selesai. Tapi ukurannya masih mengikuti ukuran asli, jadi bisa saja gambar yang tampil gede banget sampai 1600px. Tunggu, kan masih ada proses berikutnya yaitu resize.


2. Cara Resize / Mengubah Ukuran Gambar Thumbnail di Homepage Blogspot Tanpa Script

Nah ini dia nih yang kebanyakan belum pada tau makanya fungsinya diganti pakai Javascript. Cara resize ukuran gambar thumbnail Blogger tanpa Javasctipt sangat sederhana kok, yaitu memakai resizeImage().

Syntax:
resizeImage(URLgambar, ukuran, "rasio:rasio")

Contoh pemanggilan:
resizeImage(data:post.firstImageUrl, 280, "4:3")

Misalnya saja gambar pertama yang dijadikan thumbnail adalah ini:
https://4.bp.blogspot.com/-Mpgs0kSln2I/WnRcTqvlOII/AAAAAAAAFh4/VTrxpLBIC7oxQi6xs2t6z0W2sV2h_zSiwCLcBGAs/s1600/ignielcom-no-image.png

Perhatikan, di URL lengkapnya ada tulisan s1600. Blogger mempunyai satu fitur keren dimana ukuran gambar akan terlihat dari URL. Artinya gambar itu mempunyai ukuran 1600px. Ketika menggunakan fungsi resizeImage(), ukurannya akan mengecil menjadi 280px saja! Dan URL gambar pun berubah menjadi seperti ini:
https://4.bp.blogspot.com/-Mpgs0kSln2I/WnRcTqvlOII/AAAAAAAAFh4/VTrxpLBIC7oxQi6xs2t6z0W2sV2h_zSiwCLcBGAs/w280-h210-p-k-no-nu/ignielcom-no-image.png

Perhatikan tulisan w280-h210-p-k-no-nu. Artinya:
Width (lebar): 280px.
Height (tinggi): 210px.


Nilai height didapatkan dari kalkulasi otomatis yang dilakukan fungsi resizeImage(). Karena diberikan rasio dimensi 4:3 maka menghasilkan gambar landscape / persegi panjang (memanjang horizontal). Coba rasionya kamu ubah menjadi 1:1, gambarnya akan menjadi square / kotak dengan nilai width dan height yang sama. Jadi untuk ukuran dan rasio silakan atur sendiri, sesuaikan dengan template masing-masing.

Kalau kamu bingung dalam menentukan rasio, hapus saja nilainya. Script akan tetap otomatis menghitung nilai height meski rasio tidak ditentukan. Maka kodenya seperti ini:
<img expr:alt='data:post.title' expr:title='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 280)'/>

Rasio itu pun bisa diubah dengan nilai width dan height yang spesifik. Misalnya kamu mau ukuran width 280px dan height 210px, kodenya:
<img expr:alt='data:post.title' expr:title='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 280, "280:210")'/>

Sepertinya rasio diatas hanya mendukung hasil gambar landscape dan square saja. Belum bisa menghasilkan gambar portrait (memanjang vertikal). Jadi pastikan nilai rasio awal lebih besar dari nilai rasio akhir. Tapi tidak masalah, toh hampir semua blog tampilan thumbnailnya landscape.


3. Kelebihan: Tidak Membuat Gambar Gepeng

Jika gambar aslinya berbentuk persegi panjang dengan rasio 4:3, maka ketika diubah ke rasio 1:1 tidak akan membuat gambar gepeng, melainkan menciptakan efek zoom. Fungsi resizeImage() akan otomatis menyesuaikan ukuran gambar dengan rasio yang ditentukan.

Cara Resize Gambar Thumbnail Postingan Blogger Tanpa Javascript



4. Jika Proses Resize Gagal Atau Tidak Sesuai

Mengalami hal seperti ini? Semua sudah disetting mengikuti tutorial tapi gambar tetap besar dan gepeng.

Cara Mengubah Ukuran Thumbnail Blogspot Tanpa Script

Ingat proses di awal ketika menambahkan class="post-thumbnail"? Coba cek isi kode CSSnya, siapa tau disana width dan height sudah ditentukan.

Misalnya:
.post-thumbnail {
  width: 500px;
  height: 300px;
}

Maka lebar dan tinggi gambar akan mengikuti CSS tersebut yaitu 500px dan 300px. Solusinya ganti value-nya menjadi auto.
.post-thumbnail {
  width: auto;
  height: auto;
}


Sudah paham belum? Ayo dibaca pelan-pelan ya cara membuat dan resize thumbnail post Blogger tanpa Javascript diatas. Mudah-mudahan kamu mau migrasi dari ke tag bawaan Blogger biar template tambah ringan dan ngebut. Harap diingat, cara ini hanya berlaku jika gambar yang diupload dihosting oleh Blogger langsung. Kalau kamu pakai dari sumber lain seperti Photobucket, Giphy, hosting pribadi, dan lain sebagainya, maka sebaiknya tetap pakai Javascript saja.

Artikel Terkait

35 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i>
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em>
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • Kinanti Manis
    10/3/22
    Profil: https://www.blogger.com/profile/04546633693240040012
    ada 3 data yang bisa dipanggil

    data:post.firstImageUrl
    data:post.featuredImage
    data:post.thumbnailUrl

    yang paling efektif yang mana? atau bisa dijelaskan fungsinya diantara ketiganya, soalnya ini ada beberapa yang tidak bisa tampil disebuah blog, tapi tampil di blog lain.
  • Azkianor
    16/2/22
    Profil: https://www.blogger.com/profile/12904172000995148881
    bp.s1600/ignielcom-no-image.png

    Misalkan Kode yang digunakan format .png dan foto yang diposting di artikel adalah format .jpg.
    Apakah format ".png " dalam kode itu berpengaruh pada format foto yang kita posting mbak ? Apakah formatnya harus sama ?
    • Igniel
      16/2/22
      Profil: https://www.blogger.com/profile/09199170379661896200
      Gak ngaruh mas.
  • Juice
    29/1/22
    Profil: https://www.blogger.com/profile/05865158122319111978
    msi bingung mba, saya menemukan kode seperti di atas dan sudah tidak bekerja/blur dn terpotong..kira2 kode di atas supaya bekerja dengan class script sebelumnya penulisan nya bagaimana?

    $("ul#relate-summary li img").each(function(){$(this).attr("src",$(this).attr("src").replace(/\/s[0-9]+(\-c)?\//,"/w138-h190/"))});

    $(".PopularPosts .item-thumbnail img").each(function(){$(this).attr("src",$(this).attr("src").replace(/\/w72-h72-p-nu?\//,"/w130-h170/"))});
    • Juice
      29/1/22
      Profil: https://www.blogger.com/profile/05865158122319111978
      mksih mba sblum nya..
  • Ramdoni abdullah
    16/1/22
    Profil: https://www.blogger.com/profile/10865630030509377728
    Mbak . Saya mau tanya kalo mau menampilkan beberapa image dari postingan blog di homepage . Bagaimana caranya ya ?
    • Igniel
      18/1/22
      Profil: https://www.blogger.com/profile/09199170379661896200
      Untuk Blogspot belum bisa mas. Cuma bisa ambil gambar pertama saja.
  • ADE
    16/10/21
    Profil: https://www.blogger.com/profile/16230620431254028505
    kak boleh tanya untuk yg ubah thumnail realted image dimana yah
  • Virandra
    3/6/21
    Profil: https://www.blogger.com/profile/17569768201264469409
    Makasih tutorialnya kak.
  • reverie
    26/4/21
    Profil: https://www.blogger.com/profile/15170720464352425946
    Terima kasih kk, articlenya sangat bermanfaat.
  • Dito
    27/3/21
    Profil: https://www.blogger.com/profile/17165109537726503138
    Saya gak bisa nerapin di tema default blogger terbaru, bantuannya dong?
  • Ayman ibrahiem
    16/3/21
    Profil: https://www.blogger.com/profile/10430379218958394419
    My brother searched for the script and did not find it
    The picture is very small and confused
    How can I explain it
    Have a look here to see how blurry the picture is
    sidebarflat.blogspot.com/p/test.html
  • Rizal
    4/1/21
    Profil: https://www.blogger.com/profile/06682735192717656222
    Artikel bagus, yuk kunjungi website kami
  • zienamoo
    30/11/20
    Profil: https://www.blogger.com/profile/16057205210565052425
    Kak, alternatif script nya apa ya ? Ditheme ku ga ada coding seperti diatas (sebelum).
  • Kang Jordy
    17/7/20
    Profil: https://www.blogger.com/profile/16078652077845473459
    Mbak....
    Kalau di viomagz saya harus hapus javscript yang mana?
  • YZG
    2/4/20
    Profil: https://www.blogger.com/profile/10392984051799325805
    Terima kasih banyak penjelasan tutorialnya sangat gamblang sehingga mudah dipahami.
    sukses menerapkan di blog saya. THanks
  • Rico
    26/11/19
    Profil: https://www.blogger.com/profile/13626655693427922682
    Harus dicoba nih good
  • Eiwa
    17/10/19
    Profil: https://www.blogger.com/profile/16498773459833650050
    ngubek-ubek google sampe bolak balik nyasar ke stackoverflow, edit edit css, edit edit class, ga dapet. ternyata nemu disini haha. cuma nambahin "16:9" udah deh fix. mkasih min. 👍

    oh ya, tapi kalo dimensinya dikecilin lagi biar di screen 640px ga terlalu gede ko ga bisa ya? bkin css khusus screen 640px ga ada perubahan.
    • Faizall TM
      20/10/19
      Profil: https://www.blogger.com/profile/15010855191637072023
      letaknya dimana gan rasio 16:9?
    • Eiwa
      22/10/19
      Profil: https://www.blogger.com/profile/16498773459833650050
      disini gan
      resizeImage(data:post.firstImageUrl, 280, "4:3")
      ganti aja 4:3 jadi 16:9.
  • aldi blogger
    12/10/19
    Profil: https://www.blogger.com/profile/01528855529563973228
    Kode data:post.firstImageUrlH gak ada mba? jadi gimana mohon solusinya
    • Eiwa
      17/10/19
      Profil: https://www.blogger.com/profile/16498773459833650050
      kalo ga ada berarti bikin aja mas. bikin class='post-thumb' persis gambar diatas yang 'sesudah'
  • Admin
    5/10/19
    Profil: https://www.blogger.com/profile/15566479072652491848
    cara ini bs diterapkan di textrim template g mba ??
    • Igniel
      5/10/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Sangat bisa.
  • Portal Game
    6/9/19
    Profil: https://www.blogger.com/profile/08546327608306038552
    mantap sekali hasil nya bisa di lihat di https://www.masjoox.com
  • Admin
    31/7/19
    Profil: https://www.blogger.com/profile/18296305630197594280
    kalo biar ada watermak foto kaya di blog ini gmna kak? yang di pojok kanan bawah itu
  • IFK
    31/5/19
    Profil: https://www.blogger.com/profile/15844484075321318249
    Wah, ini yang ane cari-cari. swip tenan. terima kasih bos.
  • Author apkmio
    2/5/19
    Profil: https://www.blogger.com/profile/13430914730310166619
    mbak kalau untuk perbaiki gambar yang kepotong di widget featured post kalau di buka di hp, pake cara yang mana?

    linknya rumahandroid31.blogspot.com
  • Hiruko Kagetane
    25/1/19
    Profil: https://www.blogger.com/profile/10405552913753305006
    mbaaa saya mau recent post di halaman statis saya gambarnya buram ini scriptnya
  • Dindin Solehudin
    30/12/18
    Profil: https://www.blogger.com/profile/05272035500627703272
    Udah saya coba, mantap!
  • Unknown
    11/9/18
    Profil: https://www.blogger.com/profile/01558822405761557554
    jika ingin dibuat potrait gimana yah mbak? apakah harus diatur secara manual menggunakan CSS?
    • Igniel
      11/9/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Iya harus dari CSSnya dengan nilai height yang lebih besar dari width.
  • Masran Jamsari Redha
    2/9/18
    Profil: https://www.blogger.com/profile/12217686819778425001
    Blog saya yang menggunakan Template dari SoraFlow Theme, HTMLnya sangat berlainan dari yang dipaparkan dalam image "SEBELUM", jadi nggak bisa diubah seperti yang disarankan di sini.

    Seperkara lagi yang saya kepingin membuat ialah "Sticky Image" atau "Sticky Sction" sepertimana pada "Pilihan Igniel". Ia tidak mengosongkan ruangan pada sidebar.

    Juga pada Home Pagenya, itu Adsense 300x250 juga statik (sticky), apa nggak kena penalti nanti?

    Layout blog ini mantap deh...
    • Igniel
      3/9/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Memang tidak mungkin sama karena coding tiap pembuat template beda-beda. Dicari saja script yang kurang lebih isinya sama, yaitu untuk resize gambar.

      Sejauh ini tidak kena penalty.
    • Masran Jamsari Redha
      9/9/18
      Profil: https://www.blogger.com/profile/12217686819778425001
      Terima kasih... dan sekarang mau praktikkan itu Table of Contentnya...