Jadi Pintar Cara Resize Image Thumbnail Homepage, Postpage, Popular Post Tanpa Javascript

Cara Praktis Membuat Resize Image Thumbnail Homepage Postpage Popular Post Kompi Flexible. Selamat berjumpa kembali untuk para pembaca dan sobat blogger supaya sehat selalu, amin. Jika sebelumnya aku sudah posting hasil modifikasi html blog ini untuk mempercepat loading blog, yang mana dipostingan tersebut aku sedikit mengulas wacana cara me-resize image untuk thumbnail homepage, postpage dan popular post dengan isyarat html saja tanpa pemberian javascript yang terinspirasi oleh template amp html kompi design supaya thumbnail dapat eksklusif tampil tepat dikala di load.

Yang paling menonjol pada template kompi flexible ialah thumbnail gambar popular post dikala pertama di load masih melebar dari ukuran semestinya alasannya ialah template ini me-resize thumbnail dengan memakai javascript.

Karena itulah aku share kepada para sabahat yang masih gundah bagaimana cara gampang menciptakan resize image untuk thumbnail homepage, postpage dan popular post. 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/AVvXsEjq5xHWCpnnwZoM0Yg2czBWl80AA3JzYI1yAGf8ZPgJ5d2T5lHfq0h4V7-fk5O9yTnBBlkQ2T-lHFKeoU1SYcib1nWJdvQSf3qgM4jQIxu1ABoUod2GFW-KDbsw3lyALWM7cX7MnF01fZE/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/AVvXsEjq5xHWCpnnwZoM0Yg2czBWl80AA3JzYI1yAGf8ZPgJ5d2T5lHfq0h4V7-fk5O9yTnBBlkQ2T-lHFKeoU1SYcib1nWJdvQSf3qgM4jQIxu1ABoUod2GFW-KDbsw3lyALWM7cX7MnF01fZE/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>

kemudian 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
<!-- (3) Show only thumbnails -->
dan ini
<!-- (4) Show snippets and thumbnails -->
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/AVvXsEjVloftXHJwoQqNJYtILkIzYYMYpBcl6Sa38wM8_GrNuC6Yv3Iy9yftst2dGCwstNS2kAPbjDXjqT3qZC6YxestRFNX7RuJ0dYS5nW7bfLZogzZVkJk0nlO5Smg2se8dx6G-SWJflBciQs/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/AVvXsEjVloftXHJwoQqNJYtILkIzYYMYpBcl6Sa38wM8_GrNuC6Yv3Iy9yftst2dGCwstNS2kAPbjDXjqT3qZC6YxestRFNX7RuJ0dYS5nW7bfLZogzZVkJk0nlO5Smg2se8dx6G-SWJflBciQs/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 ialah isyarat setiap template tidak sama. Selamat mencoba...