Cara Mengubah Rasio Thumbnail Template Median UI - NaminaBoky

Cara Mengubah Rasio Thumbnail Pada Template Median UI dan Fletro Pro.

Daftar Isi

1. Cara Mengubah Rasio Thumbnail Template Median UI v1.5
2. Cara Mengubah Rasio Thumbnail Template Median UI v1.6

Cara Mengubah Rasio Ukuran Thumbnail Template Median UI dan Fletro Pro Agar Pas dan Tidak Terpotong - Secara default,ukuran atau aspek rasio thumbnail yang digunakan pada template Median UI adalah 18 banding 9 (18:9). Pada rasio ini (18:9), jika kita menggunakan gambar yang memiliki ukuran sebesar 1280px lebih, maka gambar thumbnail tersebut akan membentang dan hasilnya akan memotong bagian sisi-sisi gambar.

Bagi sebagian orang mungkin tidak terlalu memperhatikan masalah kecil ini. Namun menurut saya masalah ini menyebabkan tampilan thumbnail artikel menjadi jelek. Karena biasanya sebagian orang selalu menggunakan watermark pada setiap gambar yang digunakan dan biasanya berada di bagian sisi-sisi gambar seperti gambar di bawah ini.

Home / Internet / Tutorial

Contoh Judul Postingan Rasio 18:9 (1280 x 720)

Contoh snippet beranda di bawah postingan blog...

Home / Internet / Tutorial

Contoh Judul Postingan Rasio 16:9 (1280 x 720)

Contoh snippet beranda di bawah postingan blog...

Perbedaannya terlihat jelas ya. Pada thumbnail pertama yang memiliki rasio thumbnail 18:9 dengan ukuran gambar 1280 x 720 ada sedikit bagian yang terpotong. Sedangkan pada contoh yang kedua, thumbnail terlihat pas walaupun memiliki ukuran gambar yang sama, yaitu 1280 x 720.

Bagi kamu yang merasa kurang puas dengan rasio ukuran thumbnail yang digunakan pada template Median UI versi 1.5 dan versi 1.6 karena gambar thumbnail yang terpotong atau alasan lain, kamu bisa ikuti tutorial cara mengubah rasio thumbnail template Median UI di bawah ini.

Cara Mengubah Rasio Ukuran Thumbnail Template Median UI v1.5

Sebelum kamu mengubah rasio thumbnail, ketahui dulu berapa ukuran gambar yang kamu gunakan untuk dijadikan sebagai thumbnail. Contohnya, jika ukuran gambar yang akan dijadikan sebagai thumbnail adalah 1280 x 720, maka aspect ratio thumbnail yang pas untuk gambar tersebut adalah 16:9.

1. Masuk ke dashboard Blogger kamu.
2. Kemudian masuk ke menu Tema » Edit HTML.
3. Setelah itu cari kode seperti di bawah ini :

   <b:includable id='snippetedPostThumbnail'>
     <div class='itemThumbnail'>
       <a expr:href='data:post.url.canonical'>
         <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='/>
        </a>
     </div>
   </b:includable>

   Ganti tulisan yang saya tandai (18:9) dengan aspek rasio yang sesuai dengan gambar yang kamu gunakan, misalnya saja 16:9 untuk gambar yang memiliki ukuran 1280 x 720.

4. Kemudian cari kode seperti di bawah ini :

   <b:if cond='data:view.isMultipleItems and data:post.featuredImage'>
     <!--[ Post thumbnail ]-->
     <div class='postThumbnail'>
       <a expr:href='data:post.url'>
         <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='/>
       </a>
     </div>
   </b:if>

   Ganti tulisan yang ditandai dengan aspek rasio thumbnail yang sesuai dengan ukuran gambar yang kamu gunakan seperti sebelumnya, misalnya saja 16:9.

5. Jika sudah, jangan lupa klik simpan dan lihat perubahannya.

Cara Mengubah Rasio Ukuran Thumbnail Template Median UI v1.6

1. Masuk ke dashboard Blogger kamu.
2. Masuk ke menu Tema » Edit HTML.
3. Setelah itu cari kode <b:includable id='postEntryThumbnail'>. Kode HTML lengkapnya seperti berikut :

   <b:includable id='postEntryThumbnail'>
     <b:if cond='data:post.featuredImage.isYoutube'>
        <img class='imgThm lazy' expr:alt='data:post.title ? data:post.title : data:messages.image' expr:data-src='data:post.featuredImage.youtubeMaxResDefaultUrl.isResizable ? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, 600, &quot;18:9&quot;) : data:post.featuredImage.youtubeMaxResDefaultUrl' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
        <noscript><img class='imgThm' expr:alt='data:post.title ? data:post.title : data:messages.image' expr:src='data:post.featuredImage.youtubeMaxResDefaultUrl.isResizable ? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, 600, &quot;18:9&quot;) : data:post.featuredImage.youtubeMaxResDefaultUrl'/></noscript>
        <b:else/>          
        <img class='imgThm lazy' expr:alt='data:post.title ? data:post.title : data:messages.image' expr:data-src='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 600, &quot;18:9&quot;) : data:post.featuredImage' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
        <noscript><img class='imgThm' expr:alt='data:post.title ? data:post.title : data:messages.image' expr:src='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 600, &quot;18:9&quot;) : data:post.featuredImage'/></noscript>
      </b:if>
   </b:includable>

   Ganti semua tulisan yang ditandai (18:9) sesuai dengan aspek rasio thumbnail yang kamu inginkan, misalnya saja menjadi 16:9. Semuanya ada 4.

4. Jika sudah, maka hasilnya akan terlihat seperti berikut :

   <b:includable id='postEntryThumbnail'>
     <b:if cond='data:post.featuredImage.isYoutube'>
        <img class='imgThm lazy' expr:alt='data:post.title ? data:post.title : data:messages.image' expr:data-src='data:post.featuredImage.youtubeMaxResDefaultUrl.isResizable ? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, 600, &quot;16:9&quot;) : data:post.featuredImage.youtubeMaxResDefaultUrl' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
        <noscript><img class='imgThm' expr:alt='data:post.title ? data:post.title : data:messages.image' expr:src='data:post.featuredImage.youtubeMaxResDefaultUrl.isResizable ? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, 600, &quot;16:9&quot;) : data:post.featuredImage.youtubeMaxResDefaultUrl'/></noscript>
        <b:else/>          
        <img class='imgThm lazy' expr:alt='data:post.title ? data:post.title : data:messages.image' expr:data-src='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 600, &quot;16:9&quot;) : data:post.featuredImage' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
        <noscript><img class='imgThm' expr:alt='data:post.title ? data:post.title : data:messages.image' expr:src='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 600, &quot;16:9&quot;) : data:post.featuredImage'/></noscript>
      </b:if>
   </b:includable>

5. Klik simpan dan lihat perbedaan dengan yang sebelumnya.

Kamu juga bisa praktekkan tutorial di atas pada template Fletro Pro dan juga Median UI versi terbaru. Untuk template selain itu, sesuaikan saja kodenya dengan kode yang digunakan pada template masing-masing.

Itulah tutorial cara mengubah aspek rasio thumbnail template Median UI dan Fletro Pro yang bisa saya bahas di artikel kali ini. Jika ada yang ingin ditanyakan tulis di kolom komentar.