Cara Mengganti Semua Ukuran Gambar Secara Otomatis di Blogger

Sobat katro lagi otak atik blog di blogspot tentang gambar atau picture dibagian postingan atau di template anda yang biasanya lagi bosan sama tampilan yang lama, mungkin bingung kalau gambar gak sesuai dengan keinginan.

Nah kalau gambar yang lama gak sesuai dengan tema atau pengen nyamain semua ukuran gambar secara otomatis di blogspot anda bisa langsung mengikuti cara sederhana yang akan kite bahas.

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 Cara Mengganti Semua Ukuran Gambar Secara Otomatis di Blogger ?

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.

Sekian. Semoga tips ini akan membantu anda untuk mengubah semua ukuran gambar blog anda secara otomatis. sekarang tinggal langsung mencoba sendiri di blog blogspot yang anda pakai, tinggal mengutak atik sedikit saja beres deh.