Skip to main content

Cara Membuat Thumbnail Blogger Baru 2022 Support WEBP

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

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

Membuat 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, &quot;16:9&quot;) + &quot;-rw&quot;' type='image/webp'/>
  <source expr:srcset='resizeImage(data:post.thumbnailUrl, 300, &quot;16:9&quot;)' type='image/jpg'/>
<img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 300, &quot;16:9&quot;)' expr:title='data:post.title' height='9' loading='lazy' width='16'/>
</picture>         
<b:else/>
<img src='https://3.bp.blogspot.com/-x_mMtgFf6XE/VlhLxwdLekI/AAAAAAAAj3c/N7fRz1lbMSg/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, &quot;16:9&quot;) + &quot;-rw&quot;' type='image/webp'/>
  <source expr:srcset='resizeImage(data:post.thumbnailUrl, 300, &quot;16:9&quot;)' type='image/jpg'/>
<img class='lazyload' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.thumbnailUrl, 300, &quot;16:9&quot;)' 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://3.bp.blogspot.com/-x_mMtgFf6XE/VlhLxwdLekI/AAAAAAAAj3c/N7fRz1lbMSg/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, &quot;16:9&quot;) + &quot;-rw&quot;' type='image/webp'/>
  <source expr:srcset='resizeImage(data:post.thumbnail, 90, &quot;16:9&quot;)' type='image/jpg'/>
<img class='lazyload' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.thumbnail, 90, &quot;16:9&quot;)' expr:title='data:post.title' height='9' loading='lazy' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJAQMAAAAB5D5xAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjwA0AABsAAQrj5HwAAAAASUVORK5CYII=' width='16'/>
</picture>
              </a>
              </div>
          </b:if>

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Playlist tutorial Blogger
Playlist tutorial AMP HTML
Playlist Serba-serbi
Jangan lupa SUBSCRIBE
Jangan Diklik!

Menarik Untuk Dibaca Juga:


PrivacySitemap
©2021 KOMPI AJAIB