Cara Memperbesar Image/Gambar Pada Postingan Blog

Mungkin jarang yang bertanya bagaimana cara memperbesar Image/foto/gambar dalam postingan. Normalnya, jika anda meng-upload gambar yang berukuran besar maka blogger akan secara otomatis memperkecilnya hingga ukuran thumbnails. Untuk memperbesarnya terkadang membuat kualitasnya yang memprihatinkan alias negblur. Tapi ada trik supaya gambar akan tetap tajam walau di perbesar.
Berikut Langkahnya:
Secara normal gambar akan berukuran thumbnails:

Setelah di gambar di modifikasi

1. Pertama, anda hitung dulu berapa ukuran gambar tersebut (image size)untuk ditampilkan. Sebagai contoh gambar diatas memiliki ukuran asli 749x529. Jadi lebar maksimumnya adalah 529px. Untuk membuat lebih tajam maka buatlah lebih kecil dari maksimum size nya seperti 500px
Silahkan masuk ke blogmu >> Designe >> Edit HTML.

Cari kode di bawah ini:

]]></b:skin>

Tambahkan kode di bawah ini sebelum atau diatas kode tadi:

img {
max-width: 560px;
width: expression(this.width > 560 ? 560: true);
}

Sesuaikan dengan gambar aslinya sesuai dengan langkah pertama tadi. Ganti ukuran yang berwarna merahnya.

Kemudian Save.

2. Ketika meng-upload gambar maka kode aslinya akan terlihat seperti ini.(lihat di tab HTML)

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirNtYPXY-E5i4NuYyU8bAjQRSpObtbOazSu0lNqgvK0Vfxnb1lUrqWX7CTjKc9xrWOyweHC6NqKXdHK-0Y6abET8ceTLM7DvLZhhxllaLOU6L6BHYdpX4yaKX5xBWFx67dHYWZhaa7YZE/s1600/1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirNtYPXY-E5i4NuYyU8bAjQRSpObtbOazSu0lNqgvK0Vfxnb1lUrqWX7CTjKc9xrWOyweHC6NqKXdHK-0Y6abET8ceTLM7DvLZhhxllaLOU6L6BHYdpX4yaKX5xBWFx67dHYWZhaa7YZE/s320/1.jpg" width="224" /></a></div>

3. Silahkan ganti ukuran height dan widht nya ingat tidak lebih dari ukuran aslinya..

hasilnya akan terlihat seperti gambar di atas. Selamat mencoba..

.::Related Posts: