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
- Pertama kamu masuk Dashboard Blogger, pilh Tema, kemudian Edit HTML
- Kemudian pilih Widget Blog01 setelah itu scroll sampai menemukan kode yang ada di bawah ini
- Kemudian ganti tersebut dengan seperti yang ada di bawah ini.
- Simpan Template
<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 ? "a" : "div"'>
<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><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 ? "a" : "div"+ "-rw"'>
<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>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 + "-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://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, "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://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, "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>
Apa keungulan dari Webp?
ReplyDelete