Hari ini saya mau berbagi tips tentang bagaimana caranya agar image atau gambar di postingan halaman depan, atau thumbnail di box postingan halaman muka terlihat seluruhnya seperti ukuran sebenarnya, tanpa ada efek cropping.
Biasanya hal ini terjadi entah itu template dengan bentuk List ataupun template dengan bentuk Grid. Seperti apa contohnya? Coba Anda lihat di bawah ini:
Tampilan image awal
Setelah di edit ulang
Pernahkah terbersit di benak Anda untuk merubah ukuran image yang terpotong tersebut agar terlihat full size? Nah perlu Anda ketahui bahwa ini diakibatkan oleh javascript yang dibuat oleh si pembuat template itu sendiri. Untuk merubahnya silahkan Anda ikuti cara-cara saya berikut ini:
- Login ke akun Blogger
- Kemudian Klik Template > Edit HTML
- Cari script di template Anda yang mirip dengan script di bawah ini:
- Atau untuk lebih detailnya, Anda cari yang mirip seperti kode di bawah ini:
- Setelah ketemu, Anda cukup ganti saja kode "-c" dengan kode kode "-a" sehingga menjadi seperti ini:
- Setelah itu simpan template Anda
- Sekarang lihat tampilannya di menu utama blog Anda.
//<![CDATA[
function bp_thumbnail_resize(e,d){var c=280;var a=true;var b="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7_SIyfeIoYkwBx3vqdmdPV939iZGg62_ULW1EW2VPSWXf_-rFw0U-XseMAJFoiRHPzpmRLJJNyQD3TyIu0QZZPVnE-BGCFh0d_75x5gECuqB0bvuKXJzL1-p22_gLpNRIRWo9Z9OeeI8/s72-c/default.png";if(a==true&&e==""){e=b}image_tag='<img src="'+e.replace("/s72-c/","/s"+c+"-a/")+'" class="postthumb" alt="'+d+'"/>';if(e!=""){return image_tag}else{return""}};
//]]>
<img src="'+e.replace("/s72-c/","/s"+c+"-c/")
<img src="'+e.replace("/s72-c/","/s"+c+"-a/")
Bagaimana? Apakah sudah berubah sekarang? Jika ada sebagian image yang tidak tampil full, Anda cukup otak-atik aja kode margin di template Anda.
Mungkin itu aja tips dan trik tentang mengubah desain template blogger kali ini. Semoga bermanfaat. Jangan lupa jika ada pertanyaan silahkan berkomentar di bawah ini ya :)
Kirim Saran Jika ada Pertanyaan