Cara Lain Memasang Thumbnail Post di Homepage tanpa JavaScript

Salah satu item yang memberi sumbangsi vital terhadap loading blog untuk platform Blogger/blogspot ialah pemuatan gambar, tidak terkecuali thumbnail post di homepage. Lebih-lebih jika elemen gambar tersebut tidak di scale dengan benar.
memasang thumbnail post di blogger/blogspot

Yang mana size atau resolusi gambar yang besar, ditampilkan dengan custom ukuran (lebar dan tinggi) yang lebih kecil. Cara tersebut tidak sepenuhnya mengubah dimensi gambar. Meskipun menggunakan trik resize image dengan JavaScript ataupun manipulasi CSS.

Nah, berikut ini ada satu trik lagi untuk menampilkan thumbnail post di homepage (halaman utama). Yaitu menempatkan gambar pertama dari postingan, sebagai background untuk dijadikan thumbnail. Yang akan dipanggil dengan background-image: url(CUSTOM_IMAGE_URL_HERE).

Cek DEMO berikut, lalu IE/buka sourcenya, perhatikan pengkodean pada bidang thumb-wrapper.


Cara bikinnya adalah sebagai berikut:

Langkah 1: Masuk ke Edit HTML, lalu ganti kode pemanggil thumbnail post (homepage) Anda dengan kode berikut ini:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
              <a class='thumb-wrapper' expr:href='data:post.url'>
                <b:if cond='data:post.thumbnailUrl'>
                  <span class='thumb-wrapper-img' expr:id='&quot;snippet_thumbnail_id_&quot; + data:post.id'/>
                  <style>
                    @media (min-width: 768px) {
                      <b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/> {
                        background-image: url(<b:eval expr='resizeImage(data:post.firstImageUrl, 320).cssEscaped'/>);
                      }
                    }
                    @media (min-width: 600px) {
                      <b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/> {
                        background-image: url(<b:eval expr='resizeImage(data:post.firstImageUrl, 260).cssEscaped'/>);
                      }
                    }
                    @media (max-width: 480px) {
                      <b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/> {
                        background-image: url(<b:eval expr='resizeImage(data:post.firstImageUrl, 120).cssEscaped'/>);
                      }
                    }
                  </style>
            <b:else/>
                  <span class='thumbnail-empty-img' expr:id='&quot;snippet_thumbnail_id_&quot; + data:post.id'/>
                </b:if>
              </a>
</b:if>
</b:if>

Langkah 2: Lalu tambahkan CSS berikut ini, untuk mengatur letak dan ukuran thumbnail post.
/* Homepage Thumbnail Post */
.post .thumb-wrapper{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto; -webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative;z-index:100;float:left;margin-right:20px; height:185px;width:320px}
.post .thumb-wrapper-img,.post .thumbnail-empty-img{background-position:center;background-repeat:no-repeat;background-size:cover;width:100%;height:100%; }
.thumbnail-empty-img{position:relative;background-image: url(&#39;https://2.bp.blogspot.com/-tWqGLQCQsjk/WrBdO5xlkeI/AAAAAAAASUY/8rNVIQUTQK4NXEz9j17aJc5OCFZuiAK2gCLcBGAs/s260/no_thumbnail.jpg&#39;);}
@media screen and (max-width:768px){ height:150px;width:260px }
@media screen and (max-width:480px){ height:72px;width:120px }

Lalu simpan Theme.

Catatan:
  • Silahkan rubah media Query pada langkah pertama, sesuaikan dengan kebutuhan tampilan blog Anda.
  • Resoluli/dimensi gambar, silahkan ubah dan sesuaikan juga angka 320, 260, dan 120 pada kode di atas (langkah 1 dan 2).

Ada alternative lain, jika ingin membuat thumbnail post tampil menjadi persegi, silahkan ubah style media query pada langkah 1, menjadi seperti ini:
                    @media (min-width: 768px) {
                      <b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/> {
                        background-image: url(<b:eval expr='resizeImage(data:post.firstImageUrl, 320, &quot;1:1&quot;).cssEscaped'/>);
                      }
                    }

Perhatian:
  • Kode 1:1 adalah dimensi gambar yang hendak ditampilkan. Anda bisa ubah menjadi 2:3 atau 3:4 dan lainnya.
  • Lalu sesuaikan juga width dan height pada .post .thumb-wrapper seperti size yang Anda berikan pada kode di atas.

Sejauh ini, cara tersebut dapat mempercepat pemuatan gambar pada thumbnail post. Dengan demikian, loading blog untuk tampilan homepage menjadi lebih ringan. Tidak percaya? Buktikan sendiri!
Niagahoster
Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
DigitalOcean
Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K
Free and premium blogger templates