Ditulis oleh: Ditulis pada: 1/04/2022
Seperti yang telah kita ketahui, untuk hosting gambar Blogger terbaru sekarang ini sudah berubah dari awalnya 1.bp.blogspot.com menjadi blogger.googleusercontent.com dan ternyata hal tersebut membawa kabar baik lain yaitu kita bisa membuat thumbnail Blogger menjadi support WEBP.
Sebelumnya, saya menunggu penjelasan terkait perubahan hosting gambar Blogger tersebut, kemudian mencari kode terbaru untuk menampilkan thumbnail Blogger yang support WEBP. Namun sampai saat ini belum ada penjelasan apapun dari Blogger.
Untuk itu saya mencoba memodifikasi sendiri kode thumbnail Blogger agar mendukung format gambar WEBP, dan ternyata berhasil. Namun ternyata hal ini hanya berlaku untuk hosting gambar Blogger terbaru, namun ternyata tidak error juga untuk hosting gambar Blogger lama.
Hosting Gambar Blogger Terbaru
Seperti kita ketahui untuk kode URL hosting gambar Blogger terbaru ini seperti berikut ini.
https://blogger.googleusercontent.com/img/a/AVvXsEi6j6GSu5BY0nbnLJX6psb8pjtGvEdV-tcvVMfXisSqEkuviKiPeBmwQPGQLCGd0mx5AGCee8MyDmBeS9r3rwNb_dmqGoS6HfiKDsOW6DbAEcawb-m3ohqp3HVbZrrz8qOHF6eQUkjNndJFOluvXBmKwDVYDWx4tcPDwvNJq1qtzURzzpAZfu8LjlQcDan kita bisa menambahkan parameter untuk memodifikasi gambar blogger seperti size, tinggi, lebar, dan lain-lain termasuk format WEBP seperti berikut sebagai contohnya.
https://blogger.googleusercontent.com/img/a/AVvXsEi6j6GSu5BY0nbnLJX6psb8pjtGvEdV-tcvVMfXisSqEkuviKiPeBmwQPGQLCGd0mx5AGCee8MyDmBeS9r3rwNb_dmqGoS6HfiKDsOW6DbAEcawb-m3ohqp3HVbZrrz8qOHF6eQUkjNndJFOluvXBmKwDVYDWx4tcPDwvNJq1qtzURzzpAZfu8LjlQc=s1600-rwMembuat Thumbnail Blogger Support WEBP
Dari hal di atas, untuk memodifikasi kode thumbnail Blogger agar mendukung format WEBP, kita juga bisa menambahkan kode parameter rw untuk mengubah format gambar Blogger menjadi WEBP.
Untuk Thumbnail Blogger Biasa
Kode Thumbnail biasa seperti berikut:
expr:src='data:post.thumbnailUrl'Dan ubah menjadi seperti berikut agar support WEBP:
expr:src='data:post.thumbnailUrl + "-rw"'Untuk Thumbnail Blogger Dengan Resize
Thumbnail Blogger dengan resize ini seperti berikut:
expr:src='resizeImage(data:post.thumbnailUrl, 300, "16:9")'Dan ubah menjadi seperti berikut agar support WEBP:
expr:src='resizeImage(data:post.thumbnailUrl, 300, "16:9") + "-rw"'Silahkan sesuaikan kode angka untuk ukuran gambarnya sesuai dengan tema masing-masing.
Untuk Thumbnail Blogger Dengan Resize dan Picture Tag
Dengan menggunakan format picture tag, maka kita membuat thumbnail Blogger support WEBP dan menambahkan gambar follback untuk browser yang belum mendukung WEBP.
Kodenya seperti berikut ini:
<b:if cond='data:post.thumbnailUrl'>
<picture>
<source expr:srcset='resizeImage(data:post.thumbnailUrl, 300, "16:9") + "-rw"' type='image/webp'/>
<source expr:srcset='resizeImage(data:post.thumbnailUrl, 300, "16:9")' type='image/jpg'/>
<img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 300, "16:9")' expr:title='data:post.title' height='9' loading='lazy' width='16'/>
</picture>
<b:else/>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXkppwrKLfWJfcCa_9rz7mEEwut6xqnKjy6F3s2cBxahzHnKoUxrDaq8yJvrGjR01R-9xixxzcPyf1vdhG1-K5Q91qtl6MbTWq5LqwI0Zs7DN4UICSwYSCFEhBDx-GuRTRXYdOhLZGqK0/w300-h168-p-k-no-nu/no-thumbnail.jpg' expr:alt='data:post.title' height='9' width='16'/>
</b:if>Dan berikut ini thumbnail Blogger dengan format picture tag dengan lazyload:
<b:if cond='data:post.thumbnailUrl'>
<picture>
<source expr:srcset='resizeImage(data:post.thumbnailUrl, 300, "16:9") + "-rw"' type='image/webp'/>
<source expr:srcset='resizeImage(data:post.thumbnailUrl, 300, "16:9")' type='image/jpg'/>
<img class='lazyload' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.thumbnailUrl, 300, "16:9")' expr:title='data:post.title' height='9' loading='lazy' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJAQMAAAAB5D5xAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjwA0AABsAAQrj5HwAAAAASUVORK5CYII=' width='16'/>
</picture>
<b:else/>
<img class='lazyload' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXkppwrKLfWJfcCa_9rz7mEEwut6xqnKjy6F3s2cBxahzHnKoUxrDaq8yJvrGjR01R-9xixxzcPyf1vdhG1-K5Q91qtl6MbTWq5LqwI0Zs7DN4UICSwYSCFEhBDx-GuRTRXYdOhLZGqK0/w300-h168-p-k-no-nu/no-thumbnail.jpg' expr:alt='data:post.title' height='9' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJAQMAAAAB5D5xAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjwA0AABsAAQrj5HwAAAAASUVORK5CYII=' width='16'/>
</b:if>Silahkan sesuaikan kode angka untuk ukuran gambarnya sesuai dengan tema masing-masing.
Untuk Thumbnail Popular Post
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:aria-label='data:post.title' expr:href='data:post.href' expr:title='data:post.title'>
<picture>
<source expr:srcset='resizeImage(data:post.thumbnail, 90, "16:9") + "-rw"' type='image/webp'/>
<source expr:srcset='resizeImage(data:post.thumbnail, 90, "16:9")' type='image/jpg'/>
<img class='lazyload' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.thumbnail, 90, "16:9")' expr:title='data:post.title' height='9' loading='lazy' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJAQMAAAAB5D5xAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjwA0AABsAAQrj5HwAAAAASUVORK5CYII=' width='16'/>
</picture>
</a>
</div>
</b:if>