Cara Mengubah Rasio Thumbnail Postingan di Template Median UI

GEMA.MY.ID

Tuesday, September 29, 2020

Cara Mengubah Rasio Thumbnail Postingan di Template Median UI - Tak perlu diragukan lagi, Median UI menjadi template Blogger dengan tampilan terbaik saat ini. Dengan tampilan halaman yang bersih serta kecepatan pemuatan yang cepat, tidak heran apabila banyak yang menggunakan template ini sebagai sebagai tampilan dasar halaman blog mereka.

Saya sendiri mulai menggunakan template ini sejak tanggal 1 September 2020 setelah menggunakan template LinkMagz buatan Mas Sugeng. Jika Anda baru pertama kali mengunjungi situs ini, jangan lupa untuk membaca artikel terkait sebelumnya tentang:

Template ini sejatinya dibuat oleh Mas Muhammad Maki dari tim Jago Desain. Dengan berbagai macam fitur unggulan yang diberikan, saya memutuskan untuk mengupgrade halaman blog agar memiliki tampilan yang lebih menarik.

Namun dibalik itu semua, hanya satu yang membuat saya merasa sedikit kurang nyaman, yaitu terpotongnya thumbnail postingan. Perlu diketahui, Median UI menggunakan rasio thumbnail 26:9, berbeda dengan ukuran yang saya gunakan selama ini yaitu rasio 16:9. Untuk perbandingannya sendiri, silahkan perhatikan gambar di bawah ini:

Bisa dilihat dengan jelas, rasio thumbnail yang saya gunakan selama ini memiliki lebar yang lebih besar. Akibatnya, gambar menjadi terpotong dengan mengikuti ukuran rasio 26:9 yang lebih kecil. Namun untuk mengatasi masalah tersebut, Anda bisa mengatur ukuran rasio thumbnail sesuai dengan yang Anda inginkan dengan mengedit HTML template.

Cara ini saya gunakan dengan mengikuti langsung arahan dari sang pembuat template tentunya.

Cara Mengubah Rasio Thumbnail Postingan di Template Median UI

Masuk ke BLOGGER
Pilih menu TEMA
Pilih EDIT HTML
Cari kode berikut ini:

.Blog article.post .post-thumbnail a{padding-top:34.61%}

Ganti dengan:

.Blog article.post .post-thumbnail a{padding-top:56.25%}

Selanjutnya, cari kode berikut ini:

<!-- Konten postingan -->
                    <div class='post-content'>
                      <div class='post-headline'>
                        <!-- Gambar headline -->
                        <b:if cond='data:view.isPost and data:post.featuredImage'>
                          <div class='post-thumbnail'>
                            <a expr:href='data:post.url' expr:title='data:post.title'>
                              <img class='post-thumb lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.featuredImage, 900, &quot;26:9&quot;)' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
                            </a>
                          </div>
                        </b:if>

Ganti dengan:

<!-- Konten postingan -->
                    <div class='post-content'>
                      <div class='post-headline'>
                        <!-- Gambar headline -->
                        <b:if cond='data:view.isPost and data:post.featuredImage'>
                          <div class='post-thumbnail'>
                            <a expr:href='data:post.url' expr:title='data:post.title'>
                              <img class='post-thumb lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.featuredImage, 900, &quot;16:9&quot;)' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
                            </a>
                          </div>
                        </b:if>

Pilih SIMPAN
Selesai.

Catatan

Sebelum proses pengeditan dimulai, jangan lupa untuk melakukan pencadangan HTML template terlebih dahulu
Pada bagian kode 56.25%, ganti dengan persentase yang sesuai dengan ukuran rasio yang baru
Pada bagian kode 16:9, ganti dengan rasio ukuran panjang x lebar yang Anda inginkan.

Penutup

Seorang blogger memang wajib untuk memberikan kualitas tulisan dan tampilan halaman yang baik kepada semua pembaca. Seperti halnya pembahasan kali ini, thumbnail yang terpotong akan membuat pembaca sedikit kecewa dengan visual yang diberikan.

Dengan cara penerapan yang mudah, Anda bisa menggunakan cara di atas untuk memberikan kualitas visual yang terbaik. Daripada mengedit thumbnail halaman satu per satu, tentu sangat sulit bukan? Hal tersebut bisa bertambah apabila artikel sudah ratusan atau ribuan.

Cukup sekian artikel tentang Cara Mengubah Rasio Thumbnail Postingan di Template Median UI ini, Terima kasih.

Cancel