Cara Resize Thumbnail Popular Post Dengan CSS

Secara default thumbnail popular post mempunyai ukuran 72x72 pixel sehingga ketika tampil thumbnail gambar kelihatan kecil. Banyak sekali diantara para blogger pemula yang ingin merubah ukuran thumbnail gambar tersebut menjadi full width sesuai dengan ukuran sidebar agar kelihatan lebih bagus. Masalahnya ketika meng-custome justru tampilan gambar thumbnail menjadi buram sehingga tampilan thumbnail menjadi tidak berkualitas. Sisi lain ketika menggunakan javascript justru membuat loading blog agak sedikit lambat karena harus meload javascript tersebut. Untuk mengatasi hal tersebut solusinya dengan menggunakan css.

Langkah Meresize Thubmnail Popular Pots Tanpa Mengurangi Kualitas Gambar

Tampilan kode widget popular post secara default seperti yang anda lihat dibawah ini;

HTML
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1' visible='true'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='!data:showThumbnails'>
          <b:if cond='!data:showSnippets'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
          <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
              <div class='item-thumbnail'>
                <a expr:href='data:post.href' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>
                    <img alt='' border='0' expr:src='data:image'/>
                  </b:with>
                </a>
              </div>
            </b:if>
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <b:if cond='data:showSnippets'>
              <div class='item-snippet'><data:post.snippet/></div>
            </b:if>
          </div>
          <div style='clear: both;'/>
        </b:if>
      </li>
      </b:loop>
    </ul>
  </div>
</b:includable>
  </b:widget>

Tentunya anda harus login pada dasbor edit HTML template, kemudian cari kode yang mirip seperti yang saya beri blok warna kuning, gunakan Control+F masukkan kode ini "title='Popular Posts"untuk mempercepat pencarian. Jika pada template anda berbeda itu karena sudah di modifikasi, Jika anda temukan juga kode javascript thumbnail popular post maka harus anda hapus terlebih dahulu kode javascrpt tersebut.

Scroll kebawah, anda temukan kode ini "<b:with value='data:post.featuredImage.isResizable? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;) : data:post.thumbnail' var='image'>
<img alt='' border='0' expr:src='data:image'/>". Kode yang saya beri blok warna biru menunjukkan ukuran asli dari thubmnail popular post 72 1:1 artinya ukurannya adalah 72x72 pixel. Anda bisa menggantinya dengan ukuran berapapun misalnya dengan ukuran 200, &quot;1:1&quot, tentu ukuran ini yang merubah kualitas gambar thumbnail. Sedangkan kode yang saya blok dengan warna hijau adalah kode yang akan kita ubah sesuai dengan keinginan.
Coba lihat perubahan kode ini;

<img alt='thumbnail'  expr:src='data:image' height='100px' width='200px'/>

Anda tinggal menghapus border='0' dan memberi tambahan kode alt='thumbnail' height='100px' width='200px', Ukuran height dan width anda bisa sesuaikan dengan keinginan. Save.

Selanjutnya memberi efek CSS untuk thumbnail; Cari kode css ".PopularPosts ul li img", gunakan Control+F, ganti width dan height dengan kode berkut;

CSS
width: 100%;height: 160px;transition: all .3s ease-out;}

Catatan untuk css title popular post maupun img anda bisa kreasikan sendiri sesuai keinginan anda, jangan putus asa untuk terus belajar menjadi blogger profesional. Demikian cara mudah merubah thumbnail popular post dengan css, semoga berhasil.