Cara Mengubah Ukuran (Ratio) Thumbnail Pada Template Median UI

Cara Mengubah Ukuran (Ratio) Thumbnail Pada Template Median UI

Mungkin banyak dari Kalian sampai saat ini belum menyadari tampilan thumbnail pada artikel blog yang menggunakan Template median ui sedikit terpotong. Atau mungkin Kalian sendiri yang saat ini menggunakan template yang sama kurang puas dari hasil design thumbnail yang setelah terpasang selalu kurang pas.

Nah! Jika memang hal diatas sedang Kalian alami. Maka bisa mencoba cara yang akan saya bagikan berikut ini. Yaitu dengan merubah ratio thumbnail pada template khususnya Median UI baik 1.5 dan 1.6

Sebenarnya cara ini bisa dilakukan pada template lain juga, tapi tentunya caranya akan sedikit berbeda tergantung pada kode yang digunakan pada template. Untuk konsepnya sama saja, silahkan kalian sesuaikan.

Ukuran Ratio Thumbnail Original Median UI

Pada template Median UI menggunakan ratio 18:9 dan pada tutorial kali ini akan kita coba rubah menjadi 16:9. Penggunaan ratio ini tentunya harus disesuaikan juga dengan design thumbnail kalian. Saya sendiri selalu menggunakan gambar berukuran 1280x720 yang mana jika diukur maka rationya adalah 16:9.

Sebelumnya coba kita lihat dulu perbedaan sebelum dan sesudah mengganti ratio thumbnailnya.

Ratio gambar Orginal 18:9

Sebelum dirubah, gambar thumbnail dengan ukuran 1280x720 pixel (16:9) ditampilkan lebih besar (zoom) dan sedikit terpotong pada sisinya

Ratio gambar setelah diubah 16:9

Setelah dirubah, gambar thumbnail dengan ukuran 1280x720 pixel (16:9) ditampilkan ditampilkan lebih kecil dan bagian yang terpotong tidak terlalu banyak.

untuk mengetahui rasio gambar kalian bisa lihat gambar di bawah ini, di sini saya mengedit gambar thumbnail menggunakan aplikasi android pixellab, di sini saya memilih youtube thumbnail dengan ukuran 1280 x 720 dan kalian bisa lihat aspect ratio : 16:9 itu adalah rasionya.

cara melihat rasio gambar

Cara Mengubah Ratio Thumbnail Template Median UI 1.5

Step 1 : Silakan masuk ke Dashboard blogger > Tema > Edit HTML.

Step 2 : Ada dua kode yang perlu dirubah. yang pertama silahkan gunakan Ctrl + F cari kode seperti di bawah. Untuk mempermudah silahkan cari kode berikut <b:includable id='snippetedPostEntry'>

			<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>

Bagian yang saya tandai, silahkan ubah sesuai ratio yang akan Kalian gunakan, misalnya 16:9

Step 3 : Kemudian berikutnya silahkan cari kode seperti dibawah ini. Untuk memudahkan silahkan gunakan Ctrl + F dan cari kode berikut <div class='postThumbnail'>

				<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>

Bagian yang saya tandai, silahkan ubah sesuai ratio yang akan Kalian gunakan, misalnya 16:9

Cara Mengubah Ratio Thumbnail Template Median UI 1.6

Silakan masuk ke Dashboard blogger > Tema > Edit HTML gunakan Ctrl + F cari kode seperti di bawah ini. Untuk mempermudah silahkan cari kode berikut <b:includable id='postEntryThumbnail'>

<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>

perhatikan yang saya tandai 18:9 ada 4, silakan sesuaikan dengan ratio gambar yang Kalian gunakan. Misalnya 16:9.

Jika sudah semua, silahkan Simpan atau Preview untuk melihat hasilnya. Kemudian bandingkan sebelum dan sesudah Kalian melakukan perubahan ratio thumbnail pada template Kalian.

Sekian cara mudah mengubah ratio thumbnail pada template Median UI. Semoga bermanfaat dan jika ada pertanyaan jangan lupa tinggalkan komentar Kalian.

Baca Juga

Ad

hello world('print')

9 komentar

  1. Tutor bikin pwanya mas,gak ngerti ditutor orang indianya
  2. Udah saya buat mas. Cari aja dipostingan ada mas..
  3. kak, untuk menambahkan tombol next/prev post automatis sesuai label gimana ya kak..
    1. Saya blum pernah buat sih kak. Tp nanti sya coba dan buat turorialnya ya
    2. iyaa kak, ditunggu tutorialnya.. terimakasih :)
  4. Mas kalo cara merubah ukuran ratio iklan median Ui di blog gimana mas kayak punyanya mas jorel
    1. Kalau ukuran iklan tergantung settingan di unit iklan adsense nya mas. Btw iklan mana yg dimaksud mas? karena beda-beda2 yang saya pasang
  5. Mas, cara buat kategori menu kayak di homepage gimana? Slider.. di bawah header
  6. Hai gan, cara ngasih greetings Selamat pagi, selamat malam gitu gitu di isi postingan gimana ya?
Tuliskan pertanyaan seputar topik artikel diatas! Atau pertanyaan out of topic di .
Use this tools to convert basic comment to html characters, then copy it to comment form


image quote pre code

Ad