Tutorial Lengkap Cara Mengganti Semua Ukuran Gambar Secara Otomatis di Blogger

Tutorial Lengkap Cara Mengganti Semua Ukuran Gambar Secara Otomatis di Blogger

Ada 2 pilihan yang paling mendasar untuk mengubah ukuran gambar pada postingan blog. Pertama secara manual dan kedua secara otomatis. Penggantian ukuran gambar secara manual adalah pilihan dasar yang disediakan oleh blogger pada saat anda menambahkan gambar kedalam postingan anda. Sedangkan untuk penggantian seluruh ukuran gambar secara otomatis bisa dilakukan dengan menambahkan kode CSS kedalam template.

Mengubah ukuran gambar secara manual (satu per satu) mungkin bisa anda lakukan, namun coba anda bayangkan, seandainya blog anda sudah mempunyai ratusan bahkan ribuan gambar, Apakah anda masih ingin mengubahnya secara manual? Bahkan jika anda memilih untuk melakukannya, mungkin ini akan memakan waktu yang cukup lama dan membutuhkan tenaga ekstra. Oleh karena itu, hal yang paling efektif bagi anda  adalah mengubahnya secara otomatis dengan cara menambahkan kode CSS kedalam template blog anda. Melalui cara ini, anda juga bisa mengembalikan ukuran gambar kembali ke keadaan semula, menambahkan garis pinggir dan bayangan pada semua gambar blog.

Bagaimana Caranya ?

Hal pertama yang harus anda lakukan adalah login ke blogger.com » blog anda » template » edit html. Sekarang centang tag <b:skin>...</b:skin> (klik panah hitam disebelah kiri) dan temukan tag ]]></b:skin>. Copy kode CSS dibawah ini dan pastekan tepat diatasnya. (Tips - Gunakan pencarian dengan cara menekan Ctrl + F).

.post-body img {
width: 450px!important;
height: auto!important; }

Width dengan Nilai value 450px adalah lebar foto dan weight: auto! adalah tinggi gambar yang disesuaikan secara otomatis. Untuk menambahkan garis pinggir (border) cukup anda tambahkan border: 1px solid #cccccc; dan bayangan dengan kode box-shadow: 2px 2px 6px rgba(0,0,0,0.5);. Lengkapnya apabila sudah digabung akan menjadi seperti ini:

.post-body img {
width: 450px!important;
height: auto!important;
border: 1px solid #cccccc;
box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}

Setelah semua telah selesai anda atur, langkah berikutnya klik simpan template.

Semoga tips ini akan membantu anda untuk mengubah semua ukuran gambar blog anda secara otomatis. Apabila anda mengalami kendala mengenai tips ini, silahkan meninggalkan komentar.