Cara Membuat dan Mengubah Ukuran (resize) gambar thumbnail blogger tanpa Javascript

Banyak sekali yang menampilkan dan mengubah ukuran (resize) thumbnail menggunakan script, padahal tag bawaan blogger sudah mendukung untuk melakukan kedua tugas tersebut. Hal itu terjadi mungkin karena banyak template gratisan yang beredar menggunakan javascript untuk mengambil dan resize gambar thumbnail sehingga banyak pembuat template mengikuti cara tesebut. Hal tersebut menurut saya mubazir kalau tidak menggunakan tag bawaan blogger. Maka dari itu saya akan memberikan tutorial bagaimana caranya membuat dan resize thumbnail tanpa script.

Cara Menampilkan Gambar Thumbnail di Home Tanpa Javascript

Thumbnail yang muncul akan diambil dari Gambar pertama yang muncul pada sebuah postingan di blogger. tag pada blogger untuk membaca tampilan gambar paling awal adalah data:post.firstImageUrl.

Jika kamu menggunakan Javascript maka diperlukan 2 langkah. Pertama membuat fungsi resize dan kedua untuk menampilkan thumbnail yang sudah di resize.

Berikut adalah contoh script untuk fungsi resize, maka dari itu kmu cukup Hapus aja script di bawah ini.

<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>

Lalu script untuk menampilkannya adalah seperti ini:

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

Script itu silahkan kamu Hapus dan Ganti dengan Script berikut:

<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>

Lalu script untuk menampilkannya adalah seperti ini:

<img expr:alt='data:post.title' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/>

Begitulah cara membuat gambar thumnail di blogger tanpa Javascript. Namun ukuran yang akan ditampilkan akan mengikuti ukuran aslinya bahkan bisa sampai 1600px. Maka dari itu perlu ke step selanjutnya yaitu resize gambar thumbnail tanpa script. Langsung sajaaa.......

Mengubah Ukuran (resize) Gambar Thumbnail di Home Tanpa Javascript

Cara mengubah ukuran atau risize gambar thumbnail tanpa Javascript adalah dengan memakai fungsi resizeImage().

tag:

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

Contoh Pemanggilan fungsi:

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

Contoh Gambar pertama yang ingin dijadikan thumbnail:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK1SIDC5Vj_dASKByHpfTUIbELVUbtGKyxHh-YwNpr6edkoSFsnfOVpCRbajGd7e3pbVypLMFEax2BRcS19Z56plAycxzk5EQ8Y_Mcac9K4_gWhIxvOWShlBjmwNwer_si09BGwbnM4K0/s1600/favicon-martinoid.png

Bisa kamu perhatikan tanda s1600, itu menunjukan ukuran asli dari gambar tersebut. Hebat nya dari blogger adalah ukuran dari gambar akan ditampilkan pada url tersebut. Ketika kamu menggunakan fungsi resizeImage(), maka gambar akan mengecil menjadi 280px. Dan tampilan pada url adalah sebagai berikut:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK1SIDC5Vj_dASKByHpfTUIbELVUbtGKyxHh-YwNpr6edkoSFsnfOVpCRbajGd7e3pbVypLMFEax2BRcS19Z56plAycxzk5EQ8Y_Mcac9K4_gWhIxvOWShlBjmwNwer_si09BGwbnM4K0/w280-h210-p-k-no-nu/favicon-martinoid.png

Coba kamu perhatikan w280-h210-p-k-no-nu, maksudnya adalah:

Witdh (lebar): 280px

Height (tinggi): 210px

dari mana nilai height didapatkan??

Nilai height didapat dari perhitungan atau kalkulasi fungsi resizeImage(), karena adanya penambahan rasio 4:3 maka menghasilkan gambar landscape. Jika kamu memberika rasio 1:1 maka akan mengasilkan gambar persegi.

Jika kamu bingung menentukan besaran rasionya maka kamu bisa menggunakan kode di bawah ini:

<img expr:alt='data:post.title' expr:title='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 280)'/>

Jika masih ingin menggunakan rasio yang lebih spesifik, kamu bisa menggunkannya seperti ini:

<img expr:alt='data:post.title' expr:title='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 280, "280:210")'/>

Jika kamu sudah mengikuti seperti apa yang saya sampaikan di atas namun fungsi resize tetap gagal maka coba kamu lihat kembali Kode CSS: class= "post-thumbnail", barang kali kamu sudah menambahan pengaturan rasionya misal seperti ini:

.post-thumbnail {
  width: 250px;
  height: 100px;
}

maka lebar dan tinggi gambar akan mengikuti rasio CSS tersebut yaitu 250px dan 100px. Maka untuk mengatasinya kamu perlu mengubah valuenya menjadi auto:

.post-thumbnail {
  width: auto;
  height: auto;
}

Akhir Kata

Sekian tutorial kali ini..

Semoga menjadi manfaat buat kalian para  pembaca 😊

Baca juga :

Go to Link