Cara Mudah Membuat Resize Image Thumbnail Homepage Postpage Popular Post Kompi Flexible. Selamat berjumpa kembali untuk para pembaca dan sahabat blogger semoga sehat selalu, amin. Jika sebelumnya saya sudah posting hasil modifikasi html blog ini untuk mempercepat loading blog, yang mana dipostingan tersebut saya sedikit mengulas tentang cara me-resize image untuk thumbnail homepage, postpage dan popular post dengan kode html saja tanpa bantuan javascript yang terinspirasi oleh template amp html kompi design supaya thumbnail bisa langsung tampil sempurna saat di load.
Yang paling menonjol pada template kompi flexible adalah thumbnail gambar popular post saat pertama di load masih melebar dari ukuran semestinya karena template ini me-resize thumbnail dengan menggunakan javascript.
Karena itulah saya share kepada para sabahat yang masih bingung bagaimana cara mudah membuat 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 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 == "item"'>
<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/AVvXsEiGQrItSumq87ne1Pcgb6mn6oS5k-newPCCca3E2F4swHdun7DrqEQt_imjkqS2xIq818OFCyZ9WoO-FhRsqEbt2Co_yu3_4-79JhBUDLHbtV78UI-RByYeWr349R78a8ju8_iGOpiw6CU/s600/no-thumbnail.jpg' width='600'/>
</b:if>dengan ini;
<b:if cond='data:blog.pageType == "item"'>
<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/AVvXsEiGQrItSumq87ne1Pcgb6mn6oS5k-newPCCca3E2F4swHdun7DrqEQt_imjkqS2xIq818OFCyZ9WoO-FhRsqEbt2Co_yu3_4-79JhBUDLHbtV78UI-RByYeWr349R78a8ju8_iGOpiw6CU/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
<!-- (3) Show only thumbnails -->dan ini
<!-- (4) Show snippets and thumbnails -->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/AVvXsEgHk2W13UNGy7ulWpNXqcDbkbAI71j8WfU8qepQzFly9wT6caduulVJKj1M1iJWDXoNnZEFRt6P135s9gx028JZWAawo1-4WuqCbkLGdiceGGJc715zS3C2fTpQQWseDI9oQhEN3vQSo-Q/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/AVvXsEgHk2W13UNGy7ulWpNXqcDbkbAI71j8WfU8qepQzFly9wT6caduulVJKj1M1iJWDXoNnZEFRt6P135s9gx028JZWAawo1-4WuqCbkLGdiceGGJc715zS3C2fTpQQWseDI9oQhEN3vQSo-Q/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...
