Skip to main content
Ternyatamudah.id

follow us

Cara Mengatasi Gambar Thumbnail Yang BURAM/BURIK Pada Template KompiTube


Download Template KompiTube, Template Blogger Mirip Youtube - Halo semuanya kembali lagi bersama saya di blog Ternyatamudah.id, artikel sebelumnya saya sudah membahas Cara Membuat Dan Mengganti Logo Pada Template Kompi Minimalis AMP. Sekarang saya akan membagikan Panduan Template KompiTube - Template Blogger Mirip Youtube buatan Kompi Ajaib.

Apa itu Template KompiTube?

Template KompiTube adalah template yang dibuat untuk para reviewer film dan untuk youtuber. Template ini tujuan aslinya digunakan untuk menampilkan video dari youtube ke blog menggunakan fitur embed dengan script yang sudah disediakan dalam paket pembelian template.
Dengan memakai template ini, untuk para youtuber diaharapkan bisa menambah waktu tonton (watch time), seperti yang sudah kita tahu Youtube sekarang memberlakukan sistem yang para creator harus memiliki 1000 subsriber dan 4000jam tayang untuk syarat mendaftar Google Adsense yang bisa dibilang tidak mudah untuk mendapatkannya.

Jika kamu penasaran seperti apa tampilan dari template KompiTube?
silahkan klik demo dibawah ini:


Masalah ini awalnya saya temukan ketika saya mengakses blog saya yang menggunakan template kompitube ini di versi mobile. Ketika saya lihat thumbnail yang muncul itu seperti agak buram atau berkualitas sangat jelek, padahal sebenarnya ukuran gambar itu diatas resolusi 720x1280px.
Cara ini saya dapatkan langsung dari Om Adhy Suryadi selaku pembuat template, nah buat kamu yang punya Template KompiTube ini bisa mengikuti tutorial dibawah.

Cara Mengatasi Gambar Thumbnail Yang BURAM/BURIK Pada Template KompiTube

Step 1. Perhatikan kode berikut ini:
<b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>
<a expr:href='data:post.url' expr:title='data:post.title'>
        <div class='posts-thumb'>
          <b:if cond='data:post.thumbnailUrl'>
            <amp-img class='_post-thumbnail' expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl,208)' expr:title='data:post.title' height='9' layout='responsive' noloading='' width='16'/>
<b:else/>
<amp-img class='_post-thumbnail' expr:alt='data:post.title' expr:title='data:post.title' height='9' layout='responsive' noloading='' src='https://2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s208/no-thumbnail.png' width='16'/>
          </b:if>
        </div>
        </a>
</b:if>

Step 2. Silahkan cari kode (data:post.firstImageUrl,208) seperti yang sudah saya tandai diatas. Lalu ganti angka 208 menjadi 800. Angka 208 menunjukan kualitas gambar yang muncul ketika diakses melalui mobile. Itulah yang menyebabkan gambar thumbnail menjadi burik, maka kita harus menggantinya ke angka yang lebih besar, dalam contoh saya telah menggantinya ke 800.

Step 4. Done. Sekarang silahkan kamu cek melalui tampilan mobile. Sudah tidak buram lagi kan? iya dong tentunya.

Kesimpulan!

Walaupun terlihat sepele namun artikel Cara Mengatasi Gambar Thumbnail Yang BURAM/BURIK Pada Template KompiTube ini sangat berguna menurut saya, karena jika kamu adalah orang yang terbiasa dengan gambar kualitas HD atau diatas 720p, saya yakin kamu pasti juga agak risih melihat thumbnail yang buram ini.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar