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, saya ingin share bagaimana cara mengubah ukuran thumbnail popular posts sekaligus trik membuat thumbnail no image pada popular posts untuk artikel yang tidak mempunyai gambar di dalamnya.

Secara default, gambar thumbnail pada widget popular post memiliki 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, lalu pilih menu Tema dan klik Edit HTML
2. Cari kode 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, misalnya 100. Kemudian untuk rasio bisa diganti menjadi 4:3 atau 3:2 atau terserah anda.
Catatan:
Jika Anda menggunakan sizes 100 dan skala / rasio 4:3, maka gambar thumbnail yang dihasilkan memiliki ukuran lebar 100px dan tinggi 75px.
Sedangkan, jika menggunakan sizes 100 dan rasio 3:2, maka keluaran thumbnail nya memiki ukuran lebar 100px dan tinggi 67px.

Cara membuat 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 memiliki gambar. Jika Anda tertarik untuk membuat thumbnail no image untuk artikel-artikel yang tidak memiliki gambar di dalamnya. Anda bisa 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 skema HTML widget popular posts menjadi seperti 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/AVvXsEiIz-BT0v3dhu7FlXgxQhKQ9Pi5UqdJNkhdOvzeizNdf6F31r-J4SJCqszJQ40VWkxhgKT2UYC1Douq28cPMRSzHnXwJZteLxfF74HHp3IUG5ckkCKRSELsg37KVGFRd-6ohW1UVYpgSuA/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 digunakan pada resizeImage diatasnya.

Url gambar no image di atas memiliki ukuran asli dengan rasio mendekati 4:3, jika Anda ingin mengubah rasio thumbnail atau mengganti url image. Anda bisa melakukan beberapa alternatif berikut.

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

Contoh:

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

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

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