Cara Membuat Thumbnail Blogger Baru 2022 Support WEBP

Seperti yang sudah kita ketahui, host gambar Blogger terakhir telah dipindahkan dari 1.bp.blogspot.com ke blogger.googleusercontent.com dan ternyata membawa kabar baik lainnya: kita dapat memastikan bahwa Blogger- Thumbnail mendukung WEBP.

Dulu saya menunggu penjelasan cara mengganti image hosting Blogger, lalu mencari kode terbaru untuk menampilkan thumbnail Blogger yang mendukung WEBP. Tapi masih belum ada penjelasan dari Blogger.

Untuk itu saya mencoba mengubah sendiri kode thumbnail blogger untuk mendukung format gambar WEBP dan berhasil. Namun ternyata hal ini hanya berlaku untuk postingan foto blogger terbaru, tapi ternyata tidak ada kesalahan dalam memposting foto blogger lama.

Blogger hosting gambar terbaru

Seperti yang kita ketahui, URL hosting gambar blogger terbaru ini adalah:

 https://blogger.googleusercontent.com/img/a/AVvXsEi6j6GSu5BY0nbnLJX6psb8pjtGvEdV-tcvVMfXisSqEkuviKiPeBmwQPGQLCGd0mx5AGCee8MyDmBeS9r3rwNb_dmqGoS6HfiKDsOW6DbAEcawb-m3ohqp3HVbZrrz8qOHF6eQUkjNndJFOluvXBmKwDVYDWx4tcPDwvNJq1qtzURzzpAZfu8LjlQc

Dan kita dapat menambahkan pengaturan untuk mengubah gambar blog seperti ukuran, tinggi, lebar, dll termasuk format WEBP seperti contoh di bawah ini.

 https://blogger.googleusercontent.com/img/a/AVvXsEi6j6GSu5BY0nbnLJX6psb8pjtGvEdV-tcvVMfXisSqEkuviKiPeBmwQPGQLCGd0mx5AGCee8MyDmBeS9r3rwNb_dmqGoS6HfiKDsOW6DbAEcawb-m3ohqp3HVbZrrz8qOHF6eQUkjNndJFOluvXBmKwDVYDWx4tcPDwvNJq1qtzURzzpAZfu8LjlQc =s1600-RW

Buat ubin dukungan WEBP Blogger

Di atas untuk mengubah kode thumbnail blogger untuk mendukung format WEBP, kita juga dapat menambahkan kode parameter rw untuk mengubah format gambar blogger menjadi WEBP.

Untuk thumbnail blog biasa

Kode umum untuk thumbnail:

 expr:src='data:post.thumbnailUrl'

Dan ubah untuk mendukung WEBP:

 expr:src='data:post.thumbnailUrl + "-rw"'

Untuk thumbnail blogger dengan mengubah ukuran

Thumbnail dari ukuran blog ini:

 expr:src='resizeImage(data:post.thumbnailUrl, 300, "16:9")'

Dan ubah untuk mendukung WEBP:

 expr:src='resizeImage(data:post.thumbnailUrl, 300, "16:9" ) + "-rw"'

Sesuaikan kode ukuran gambar sesuai dengan tema tertentu.

Mengubah ukuran dan menambahkan tag thumbnail untuk blogger.

Menggunakan format tag gambar, kami akan membuat thumbnail blogger yang mendukung WEBP dan menambahkan gambar cadangan untuk browser yang tidak mendukung WEBP.

Kodenya terlihat seperti ini:

Dan berikut ini adalah thumbnail blogger dalam format tag gambar lazy load:

Sesuaikan kode ukuran gambar sesuai dengan tema tertentu.

Untuk thumbnail postingan yang dipilih