Resize Image Thumbnail Homepage, Postpage, Popular Post Tanpa Javascript

Biasanya setiap template memakai javascript untuk meresize image / gambar untuk thumbnail di homepage, postpage, dan popular post. Tentu saja hal ini juga dapat besar lengan berkuasa terhadap kecepatan loading blog itu sendiri. Dimana loading blog termasuk hal yang juga perlu diperhatikan biar susukan lebih gampang untuk koneksi lemah.

Karena itulah aku share kepada para sabahat yang masih galau bagaimana cara gampang menciptakan resize image untuk thumbnail homepage, postpage dan popular post. Namun sebelumnya perlu anda ketahui bahwa percobaan aku ini memakai template kompiflexible, untuk template yang lain bekerjsama tinggal menyesuaikan saja alasannya 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 menyerupai 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 isyarat thumbnail untuk halaman postingan. Silahkan cari dan ganti isyarat 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/AVvXsEgo0JW1WUgaMjlMzgRRdPu5uODi2d07_GMjcH2I3gCWDp4UZ3dt8vTnPJLmJJAQRbuR5y_m7-uCEn43Iuje8D07jq2jZeuOmFGUv6SR6AVpnxpituTyZlckDn8oIR3T7GwO5ww23alOLhE/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/AVvXsEgo0JW1WUgaMjlMzgRRdPu5uODi2d07_GMjcH2I3gCWDp4UZ3dt8vTnPJLmJJAQRbuR5y_m7-uCEn43Iuje8D07jq2jZeuOmFGUv6SR6AVpnxpituTyZlckDn8oIR3T7GwO5ww23alOLhE/s600/no-thumbnail.jpg' width='600'/>
 </b:if>

Langkah ketiga
Selanjutnya kita akan mengganti resize image thumbnail untuk homepage. Silhakan cari isyarat 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>

lalu ganti dengan isyarat 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 isyarat resize thumbnail popular post. Silahkan menuju ke isyarat popular post di html, maka anda akan menemukan isyarat ini

dan ini

kebawah sedikit anda akan menemukan isyarat 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 isyarat berikut;

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

Selanjutnya, dibawah kedua isyarat tersebut ada isyarat 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/AVvXsEiA3mYduDKNzLEYYVbQYyr03dFpKndMrtOR2a5PqUdHr9PdEEb-4SLaoAkAW96dgRjxxdJe0gtFOBFji1ewWZBuEntfKieE-QHbPwhB7Hs84Kp3XDrr-jgqXh2zVD6Qtwad8flBS6zbQW8/s72-c/no-thumbnail.jpg'/>

ganti juga dengan isyarat 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/AVvXsEiA3mYduDKNzLEYYVbQYyr03dFpKndMrtOR2a5PqUdHr9PdEEb-4SLaoAkAW96dgRjxxdJe0gtFOBFji1ewWZBuEntfKieE-QHbPwhB7Hs84Kp3XDrr-jgqXh2zVD6Qtwad8flBS6zbQW8/s72-c/no-thumbnail.jpg' width='300'/>

Bagaimana gampang kan? Itu saja dari aku wacana bagaimana Cara Resize Image Thumbnail Homepage, Postpage dan Popular Post untuk Kompi Flexible. Untuk selain template kompi flexible, dapat anda sesuaikan sendiri alasannya isyarat setiap template tidak sama. Selamat mencoba...
Sumber https://www.nengain.web.id/