Mengubah Thumbnail Post Ratio di Template Median UI

Cara Mengubah Post Thumbnail Ratio di Template Median UI

Selamat malam Semuanya, pada kesempatan kali ini saya akan membagikan Cara Mengubah Post Thumbnail Ratio di Template Median UI. Median UI adalah template Blogger terbaik yang pernah ada. Orang suka menggunakan template ini karena pemuatannya yang cepat. Juga benar-benar ramah seo karena orang lebih suka menggunakannya.

Template ini sebenarnya dibuat oleh Mas Muhammad Maki dari Tim Desain Jago. Seiring dengan menciptakan berbagai fitur hebat, saya memutuskan untuk mengupgrade halaman blog agar terlihat lebih menarik.

Tapi ada satu hal di balik semua ini yang saya tidak suka sama sekali, yaitu kliping thumbnail posting. Saat ini Mean UI menggunakan rasio thumbnail 18:9 di v1.5, yang tidak terlihat bagus. Jadi jika Anda ingin mengonversi ukuran ini menjadi rasio youtube 16:9, baca postingan lengkapnya.

Template Median UI memiliki rasio thumbnail posting yang sangat rendah yang tampaknya sangat tidak berguna. Anda dapat dengan jelas melihat bahwa template yang Anda gunakan selama ini memiliki rasio dan lebar thumbnail yang lebih tinggi. Akibatnya, gambar dipangkas mengikuti ukuran rasio 18:9 yang lebih kecil. Namun, untuk mengatasi masalah ini, Anda dapat mengubah rasio thumbnail sesuai keinginan dengan mengedit HTML dan CSS.

Mengubah Thumbnail Post Ratio Median UI

Langkah 1 : Pertama-tama buka blogger.com lalu login ke Akun blogger anda.

Langkah 2 : Selanjutnya Klik Menu Tema.

Langkah 3 : Kemudian Klik Edit Html.

Langkah 4 : Kemudian silahkan temukan kode css yang diberikan di bawah ini.

Kode ini dapat ditemukan di bawah kode. /* Article Section */

.postThumbnail > *{display:block;position:relative;padding-top:52.335%; transition:var(--transition-2); color:inherit}

Langkah 5 : Kemudian silahkan ganti dengan kode css seperti yang di bawah ini

.postThumbnail > *{display:block;position:relative;padding-top:55%; transition:var(--transition-2); color:inherit}

Langkah 6 : Kemudian Temukan Kode Html seperti di bawah ini.

Kode ini akan ditemukan di bawah kode ini  <b:defaultmarkups>

<!--[ Blogger defaultmarkups ]-->

<b:defaultmarkup type='Common'> .

<b:includable id='postEntryThumbnail'>
        <img class='imgThumb lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.featuredImage, 600, &quot;18:9&quot;)' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      </b:includable>

Langkah 7 : Lalu ganti dengan kode html yang ada di bawah ini.

<b:includable id='postEntryThumbnail'>
        <img class='imgThumb lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.featuredImage, 600, &quot;16:9&quot;)' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      </b:includable>

Langkah 8 : Selanjutnya silahkan klik simpan perubahan tema.

Catatan penting :

1. Sebelum memulai proses editing, jangan lupa untuk mem-backup template HTML terlebih dahulu.
2. 55% pada bagian kode, ganti dengan persentase yang sesuai dengan ukuran rasio yang baru.
3. Pada bagian kode 16:9, Anda dapat mengubahnya dengan perbandingan panjang x lebar yang Anda inginkan.

Go to Link