Membuat dan Mengubah Ukuran (Resize) Thumbnail Blogger Tanpa Javascript

Cara membuat, mengambil, menampilkan, dan resize (mengubah ukuran) thumbnail di halaman utama (homepage) Blogspot tanpa Javascript tanpa bikin gambar gepeng. Murni memakai tag bawaan Blogger saja.
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4R75J06lBN_covairhAkf_OkBd7v_1SYybQytrPEUhuaWQOlT_SUO8NK1gHXvNpHu5K_UXylp4i8B4YJAd2dRpk2uff3zdwtR3Qu_hyp6hB0es-k7-XaH3V5zd3VEXfJujkPHlE5fzTmz/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4R75J06lBN_covairhAkf_OkBd7v_1SYybQytrPEUhuaWQOlT_SUO8NK1gHXvNpHu5K_UXylp4i8B4YJAd2dRpk2uff3zdwtR3Qu_hyp6hB0es-k7-XaH3V5zd3VEXfJujkPHlE5fzTmz/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.
36
Membuat dan Mengubah Ukuran (Resize) Thumbnail Blogger Tanpa Javascript
Membuat dan Mengubah Ukuran (Resize) Thumbnail Blogger Tanpa Javascript
Cara membuat, mengambil, menampilkan, dan resize (mengubah ukuran) thumbnail di halaman utama (homepage) Blogspot tanpa Javascript tanpa bikin gambar gepeng. Murni memakai tag bawaan Blogger saja.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

36 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Syukron Fadillah
    29 Desember, 2023
    Profil: https://www.blogger.com/profile/14803885499495966113
    Kalau untuk gambar dalam isi postingan bagaimana mba?
  • Iklan Baris
    19 Juni, 2022
    Profil: https://www.blogger.com/profile/00972104828665488111
    Langsung otw praktek dan sukses, cuma kok ada gambarnya yang buram ya bosku
  • Kinanti Manis
    10 Maret, 2022
    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 Februari, 2022
    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 ?
  • Juice
    29 Januari, 2022
    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/"))});
  • Ramdoni abdullah
    16 Januari, 2022
    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 Januari, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Untuk Blogspot belum bisa mas. Cuma bisa ambil gambar pertama saja.
  • ADE
    16 Oktober, 2021
    Profil: https://www.blogger.com/profile/16230620431254028505
    kak boleh tanya untuk yg ubah thumnail realted image dimana yah
  • Virandra
    03 Juni, 2021
    Profil: https://www.blogger.com/profile/17569768201264469409
    Makasih tutorialnya kak.
  • reverie
    26 April, 2021
    Profil: https://www.blogger.com/profile/15170720464352425946
    Terima kasih kk, articlenya sangat bermanfaat.
  • Dito
    27 Maret, 2021
    Profil: https://www.blogger.com/profile/17165109537726503138
    Saya gak bisa nerapin di tema default blogger terbaru, bantuannya dong?
  • Ayman ibrahiem
    16 Maret, 2021
    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
  • zienamoo
    30 November, 2020
    Profil: https://www.blogger.com/profile/16057205210565052425
    Kak, alternatif script nya apa ya ? Ditheme ku ga ada coding seperti diatas (sebelum).
  • Kang Jordy
    17 Juli, 2020
    Profil: https://www.blogger.com/profile/16078652077845473459
    Mbak....
    Kalau di viomagz saya harus hapus javscript yang mana?
  • YZG
    02 April, 2020
    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 November, 2019
    Profil: https://www.blogger.com/profile/13626655693427922682
    Harus dicoba nih good
  • Eiwa
    17 Oktober, 2019
    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 Oktober, 2019
      Profil: https://www.blogger.com/profile/15010855191637072023
      letaknya dimana gan rasio 16:9?
    • Eiwa
      22 Oktober, 2019
      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 Oktober, 2019
    Profil: https://www.blogger.com/profile/01528855529563973228
    Kode data:post.firstImageUrlH gak ada mba? jadi gimana mohon solusinya
    • Eiwa
      17 Oktober, 2019
      Profil: https://www.blogger.com/profile/16498773459833650050
      kalo ga ada berarti bikin aja mas. bikin class='post-thumb' persis gambar diatas yang 'sesudah'
  • Admin
    05 Oktober, 2019
    Profil: https://www.blogger.com/profile/15566479072652491848
    cara ini bs diterapkan di textrim template g mba ??
  • Portal Game
    06 September, 2019
    Profil: https://www.blogger.com/profile/08546327608306038552
    mantap sekali hasil nya bisa di lihat di https://www.masjoox.com
  • Admin
    31 Juli, 2019
    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 Mei, 2019
    Profil: https://www.blogger.com/profile/15844484075321318249
    Wah, ini yang ane cari-cari. swip tenan. terima kasih bos.
  • Author apkmio
    02 Mei, 2019
    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 Januari, 2019
    Profil: https://www.blogger.com/profile/10405552913753305006
    mbaaa saya mau recent post di halaman statis saya gambarnya buram ini scriptnya
  • Dindin Solehudin
    30 Desember, 2018
    Profil: https://www.blogger.com/profile/05272035500627703272
    Udah saya coba, mantap!
  • Unknown
    11 September, 2018
    Profil: https://www.blogger.com/profile/01558822405761557554
    jika ingin dibuat potrait gimana yah mbak? apakah harus diatur secara manual menggunakan CSS?
    • Igniel
      11 September, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Iya harus dari CSSnya dengan nilai height yang lebih besar dari width.
  • Masran Jamsari Redha
    02 September, 2018
    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
      03 September, 2018
      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
      09 September, 2018
      Profil: https://www.blogger.com/profile/12217686819778425001
      Terima kasih... dan sekarang mau praktikkan itu Table of Contentnya...