Tips Tutorial Cara Mengubah Ukuran Thumbnail Popular Posts + No Image

Popular posts merupakan salah satu widget blog yang sangat umum digunakan. Seperti namanya, widget ini menampilkan artikel atau postingan yang paling banyak tayang dari sebuah blog dalam kurun waktu tertentu.

Pada kesempatan kali ini, aku ingin share bagaimana cara mengubah ukuran thumbnail popular posts sekaligus trik menciptakan thumbnail no image pada popular posts untuk artikel yang tidak mempunyai gambar di dalamnya.

Secara default, gambar thumbnail pada widget popular post mempunyai ukuran / sizes 72 dengan rasio 1:1, dengan kata lain lebar 72px dan tinggi 72px. Jika Anda ingin mengubah ukuran thumbnail popular post caranya sangat mudah, silahkan ikuti langkah-langkah dibawah ini.

1. Seperti biasa, masuk ke Blogger, kemudian pilih blog, kemudian pilih sajian Tema dan klik Edit HTML
2. Cari aba-aba ini, didalam widget popular posts

<b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>

3. Ubah Anka 72 menjadi ukuran yang anda inginkan, contohnya 100. Kemudian untuk rasio dapat diganti menjadi 4:3 atau 3:2 atau terserah anda.
Catatan:
Jika Anda memakai sizes 100 dan skala / rasio 4:3, maka gambar thumbnail yang dihasilkan mempunyai ukuran lebar 100px dan tinggi 75px.
Sedangkan, bila memakai sizes 100 dan rasio 3:2, maka keluaran thumbnail nya memiki ukuran lebar 100px dan tinggi 67px.

Cara menciptakan thumbnail no image pada widget popular posts

Seperti yang kita ketahui, pihak Blogger tidak menyediakan gambar thumbnail alternatif pada popular posts untuk postingan yang tidak mempunyai gambar. Jika Anda tertarik untuk menciptakan thumbnail no image untuk artikel-artikel yang tidak mempunyai gambar di dalamnya. Anda dapat ikuti langkah lanjutan di bawah ini.
Skema standar widget popular posts

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>   <b:widget-settings>⋯</b:widget-settings>   <b:includable id='main'>  ....  ....           <!-- (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, 60, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>                      <img alt='data:post.title' border='0' expr:src='data:image'/>                    </b:with>                  </a>                </div>              </b:if>  ....  ....          </div>    </b:includable> </b:widget>

Modifikasi denah HTML widget popular posts menjadi ibarat dibawah ini

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>   <b:widget-settings>⋯</b:widget-settings>   <b:includable id='main'> ....  ....           <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->          <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>              <div class='item-thumbnail'>                <a expr:href='data:post.href' target='_blank'>                  <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>                    <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 100, &quot;4:3&quot;)                                  : data:post.thumbnail' var='image'>                      <img alt='' border='0' expr:src='data:image'/>                    </b:with>                    <b:else/>                    <img alt='' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVCT7Mukp-3y-zDhYe4G3E6tvRN4LnIeQb6Ujjmk6K_SjQhatEKrqYv9rSz22-OzV1kD8KVfPcPlvC-j73HPFFApt4-GjqDqIolKp0zG77TCunHsr3ydg7Z5iIrSgnAYDDz_ZzMzEzQNc/s100/no-image.PNG'/>                  </b:if>                </a>              </div>  ....  ....          </div>    </b:includable> </b:widget>

Catatan :
Jika Anda ingin mengubah url gambar di atas. Sebaiknya untuk selalu mengubah nilai s (sizes) sesuai dengan angka yang dipakai pada resizeImage diatasnya.

Url gambar no image di atas mempunyai ukuran orisinil dengan rasio mendekati 4:3, bila Anda ingin mengubah rasio thumbnail atau mengganti url image. Anda dapat melaksanakan beberapa alternatif berikut.

1. Membuat, membeli atau mencari gambar no image gratis yang mempunyai rasio yang sama atau mendekati, dengan rasio yang Anda gunakan.
2. Jika Anda kesulitan untuk mencarinya, Anda dapat menambahkan gaya / style width dan height pada gambar no image sesuai dengan ukuran yang dipakai pada gambar thumbnail.

Contoh:

<img expr:alt='' src='url-image' style='width: ...; height: ...;'/>

Tambahan
Agar gambar thumbnail sejajar dengan judul widget popular post, tambahkan aba-aba CSS berikut

.widget .popular-posts ul { margin: 0; padding: 0; }