Home
tips

Cara Membuat Gambar Box Postingan Agar Terlihat Seperti Ukuran Sebenarnya Tanpa Efek Cropping


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.

cara merubah gambar di postingan agar terlihat seluruhnya, cara membuat image di potingan blog terlihat full, agar thimbnail gambar terlihat seperti ukuran sebenarnya, agar image di blogger tidak terpotong atau crop, cara membuat image terlihat full size, template list, template grid endolita.blogspot.com

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

cara merubah gambar di postingan agar terlihat seluruhnya, cara membuat image di potingan blog terlihat full, agar thimbnail gambar terlihat seperti ukuran sebenarnya, agar image di blogger tidak terpotong atau crop, cara membuat image terlihat full size, template list, template grid endolita.blogspot.com

Setelah di edit ulang

cara merubah gambar di postingan agar terlihat seluruhnya, cara membuat image di potingan blog terlihat full, agar thimbnail gambar terlihat seperti ukuran sebenarnya, agar image di blogger tidak terpotong atau crop, cara membuat image terlihat full size, template list, template grid endolita.blogspot.com

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:

  1. Login ke akun Blogger
  2. Kemudian Klik Template > Edit HTML
  3. Cari script di template Anda yang mirip dengan script di bawah ini:
    4. //<![CDATA[
    function bp_thumbnail_resize(e,d){var c=280;var a=true;var b="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjPT8579wD2FvzryEob0EZ3JgVZJtM4bhoGIvCJyTtNJBqPUaL4Wa3AA7nIOV_jMlMWFFMo6eYAZnT6bm28n1vlNVc1UpMdZpncWukBPfETMc5rJnlRJ4jpPuqXvlR3PmrL1rsYRFZnzE/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""}};
    //]]>
  4. Atau untuk lebih detailnya, Anda cari yang mirip seperti kode di bawah ini:
    5. <img src="'+e.replace("/s72-c/","/s"+c+"-c/")

  5. Setelah ketemu, Anda cukup ganti saja kode "-c" dengan kode kode "-a" sehingga menjadi seperti ini:

    6. <img src="'+e.replace("/s72-c/","/s"+c+"-a/")

  6. Setelah itu simpan template Anda
  7. Sekarang lihat tampilannya di menu utama blog Anda.

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 :)