Iklan

Membuat Thumbnail Template Median UI Support WEBP

Template Median UI masih jadi favorit dimana template ini memiliki Desain UI yang User Frendly. Meski begitu template median ui ini harus di optimasi supaya disukai oleh mesin pencari dan pengunjung seperti yang akan saya share tutorial kali ini. 

Membuat Thumbnail Template Median UI Support WEBP yang akan saya share pada kesempatan kali ini. Artikel ini saya dapat dari Kompi Ajaib kemudian saya coba praktek di Template Median UI ternyata tidak menyebabkan gambar menjadi Error. 

Seperti yang kalian tau sendiri bahwa google telah mengubah URL gambar mereka yang awal nya 1.bp.blogspot.com menjadi blogger.googleusercontent.com yang mana ternyata bisa membuat gambar support WEBP. 

Mas Andy sendiri mencoba memodifikasi sendiri dan ternyata support akhirnya saya terinspirasi dari beliau dengan cara otak atik template median ui ini karena script nya berbeda dari yang di contohkan pada kompi ajaib.

Hosting Gambar Terbaru Pada Blogger

Untuk hosting gambar blogger seperti kalian tau maka seperti ada yang dibawah ini :

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

Sedangkan untuk memodifikasi gambar supaya support WEBP maka harus ditambahkan parameter seperti yang ada di bawah ini :

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

Membuat Gambar Thumbnail Support WEBP di Median UI

  1. Pertama kamu masuk Dashboard Blogger, pilh Tema, kemudian Edit HTML
  2. Kemudian pilih Widget Blog01 setelah itu scroll sampai menemukan kode yang ada di bawah ini
  3. <b:if cond='data:view.isMultipleItems'>
                                <!--[ Post thumbnail and labels ]-->
                                <div class='pThmb'>
                                  <b:class cond='data:post.featuredImage.isYoutube' name='iyt'/>
                                  <b:class cond='!data:post.featuredImage' name='nul'/>
                                  <b:tag class='thmb' expr:name='data:post.featuredImage ? &quot;a&quot; : &quot;div&quot;'>
                                    <b:attr cond='data:post.featuredImage' expr:value='data:post.url' name='href'/>
                                    <b:if cond='data:post.featuredImage'>
                                      <b:include name='postEntryThumbnail'/>
                                      <b:else/>
                                      <span class='imgThm' data-text='No image'/>
                                    </b:if>
  4. Kemudian ganti tersebut dengan seperti yang ada di bawah ini.
  5. <b:if cond='data:view.isMultipleItems'>
                                <!--[ Post thumbnail and labels ]-->
                                <div class='pThmb'>
                                  <b:class cond='data:post.featuredImage.isYoutube' name='iyt'/>
                                  <b:class cond='!data:post.featuredImage' name='nul'/>
                                  <b:tag class='thmb' expr:name='data:post.featuredImage ? &quot;a&quot; : &quot;div&quot;+ &quot;-rw&quot;'>
                                    <b:attr cond='data:post.featuredImage' expr:value='data:post.url' name='href'/>
                                    <b:if cond='data:post.featuredImage'>
                                      <b:include name='postEntryThumbnail'/>
                                      <b:else/>
                                      <span class='imgThm' data-text='No image'/>
                                    </b:if>
  6. Simpan Template

Untuk setting pada URL gambar contohnya sudah saya berikan diatas dimana menambahakan parameter -rw di belakang nya.

Membuat Gambar Blogger Support WEBP

Saya disini tidak hanya memberikan tutorial menganai Thumbnail Median UI akan tetapi saya akan kasih tau settingan supaya gambar pada blogger ini support 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 + &quot;-rw&quot;'

Untuk Thumbnail Blogger Dengan Resize

Thumbnail Blogger dengan resize ini seperti berikut:

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

Dan ubah menjadi seperti berikut agar support WEBP:

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

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>
DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.sudarblogger.web.id. Terima kasih.

1 Response to "Membuat Thumbnail Template Median UI Support WEBP"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel