Resize Image Thumbnail Homepage, Postpage, Popular Post Tanpa Javascript

Ditulis oleh: Ifrod Maksum
Ditulis pada: 10/10/2017

Biasanya setiap template menggunakan javascript untuk meresize image / gambar untuk thumbnail di homepage, postpage, dan popular post. Tentu saja hal ini juga bisa berpengaruh terhadap kecepatan loading blog itu sendiri. Dimana loading blog termasuk hal yang juga perlu diperhatikan supaya akses lebih mudah untuk koneksi lemah.

Karena itulah saya share kepada para sabahat yang masih bingung bagaimana cara mudah membuat resize image untuk thumbnail homepage, postpage dan popular post. Namun sebelumnya perlu anda ketahui bahwa percobaan saya ini menggunakan template kompiflexible, untuk template yang lain sebetulnya tinggal menyesuaikan saja karena kodenya hampir sama.

Jika ingin mencobanya silahkan ikuti langkah-langkah berikut ini secara perlahan-lahan:

Langkah Pertama
Anda harus menghapus javascript untuk resize image thumbnail untuk homepage, postpage dan popular post seperti dibawah ini:

Script rezize image untuk homepage

function resizeThumb(e,t,g){for(var m=document.getElementById(e),r=m.getElementsByTagName("img"),s=0;s<r.length;s++)r[s].src=r[s].src.replace(/\/s72\-c/,"/s"+t),r[s].width=t,r[s].height=g}resizeThumb("Blog1",230,140);

Script rezize image untuk postpage

function resizeThumbextralarge(e){for(var r=document.querySelectorAll(".thumb-post img"),t=0;t<r.length;t++)r[t].src=r[t].src.replace(/\/s1600/,"/s"+e),r[t].width=e,r[t].height=e}resizeThumbextralarge("600");

Script rezize image untuk popular post

function resizeThumb(e,t,s){for(var r=document.getElementById(e),m=r.getElementsByTagName("img"),c=0;c<m.length;c++)m[c].src=m[c].src.replace(/\/s72\-c/,"/s"+t),m[c].width=t,m[c].height=s}resizeThumb("PopularPosts1",300,170);

Jika tidak ketemu, silahkan cari pada file javascript exsternal.

Langkah Kedua
Kita mulai dengan mengubah kode thumbnail untuk halaman postingan. Silahkan cari dan ganti kode dibawah ini;

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='thumb-post'>

<b:if cond='data:blog.postImageUrl'>

<img expr:alt='data:blog.pageName' expr:src='data:blog.postImageUrl' expr:title='data:blog.pageName' height='300' width='600'/>

<b:else/>

<img expr:alt='data:post.title' expr:title='data:post.title' height='300' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG_6alRbRni1I5IiTfCLuQdBvS4iUU0_ZXj_y5nlyezajBonx6mBVXtLiBv7poyim8b6qbouNFhnF4G5bVteT73RTtAlYBDH-uCjsRoScUKh4MVspvEtMwaGo3Ph7DyExneA7NfxRl8zs/s600/no-thumbnail.jpg' width='600'/>

</b:if>

dengan ini;

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='thumb-post'>

<b:if cond='data:blog.postImageUrl'>

<img expr:alt='data:blog.pageName' expr:src='data:blog.postImageUrl' expr:title='data:blog.pageName' height='350' layout='responsive' width='600'/>

<b:else/>

<img expr:alt='data:post.title' expr:title='data:post.title' height='350' layout='responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG_6alRbRni1I5IiTfCLuQdBvS4iUU0_ZXj_y5nlyezajBonx6mBVXtLiBv7poyim8b6qbouNFhnF4G5bVteT73RTtAlYBDH-uCjsRoScUKh4MVspvEtMwaGo3Ph7DyExneA7NfxRl8zs/s600/no-thumbnail.jpg' width='600'/>

</b:if>

Langkah ketiga
Selanjutnya kita akan mengganti resize image thumbnail untuk homepage. Silhakan cari kode dibawah ini;

<b:if cond='data:post.thumbnailUrl'>

<img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' expr:title='data:post.title' height='140' width='230'/>

</b:if>

kemudian ganti dengan kode berikut;

<b:if cond='data:post.thumbnailUrl'>

<img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title' height='140' layout='responsive' width='230'/>

</b:if>

Langkah keempat
Untuk kode resize thumbnail popular post. Silahkan menuju ke kode popular post di html, maka anda akan menemukan kode ini

dan ini

kebawah sedikit anda akan menemukan kode dibawah ini (ada dua);

<img expr:alt='data:post.title' expr:src='data:post.thumbnail' height='100' itemprop='image' width='300'/>

ganti dua-duanya dengan kode berikut;

<img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnail,280)' height='100' itemprop='image' width='300'/>

Selanjutnya, dibawah kedua kode tersebut ada kode berikut; (untuk postingan tanpa gambar)

<img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' itemprop='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg50FNRVoeiBFGTbfTeiofoJwxo-P4lZEz0LEhZVdnxnTv4wQN1OgvZQakWaUxCIh4WC2c28RR31NOyzoba6xpvg0zir8x7SA8swl_42IRmkmZr-1SkmglY2AxjbVb5L6ifBQj6f-l8vg/s72-c/no-thumbnail.jpg'/>

ganti juga dengan kode dibawah ini;

<img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnail,280)' height='100' itemprop='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg50FNRVoeiBFGTbfTeiofoJwxo-P4lZEz0LEhZVdnxnTv4wQN1OgvZQakWaUxCIh4WC2c28RR31NOyzoba6xpvg0zir8x7SA8swl_42IRmkmZr-1SkmglY2AxjbVb5L6ifBQj6f-l8vg/s72-c/no-thumbnail.jpg' width='300'/>

Bagaimana mudah kan? Itu saja dari saya tentang bagaimana Cara Resize Image Thumbnail Homepage, Postpage dan Popular Post untuk Kompi Flexible. Untuk selain template kompi flexible, bisa anda sesuaikan sendiri karena kode setiap template tidak sama. Selamat mencoba...