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).
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.
.post-body img {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:
width: 450px!important;
height: auto!important; }
.post-body img {Setelah semua telah selesai anda atur, langkah berikutnya klik simpan template.
width: 450px!important;
height: auto!important;
border: 1px solid #cccccc;
box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}
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.
ngga berubah gan
ReplyDeleteBisa saya lihat blognya mas ?
Deletegan,yg berubah kok semuanya??
ReplyDeletekalo cuma buat gambar thumbnail postingannya aja gimana?? trus nanti pas dibuka artikelnya gambar2nya tetep ukuran aslinya..makasih gan
Gan, bagaimana cara mengubah ukuran gambar hanya pada halaman posting saja, tanpa merubah ukuran gambar pada halaman utama??
ReplyDeleteBungkus kode CSS di atas dengan tag conditionla b:if kemudian tempatkan sesudah tanda ]]></b:skin>
DeleteContohnya seperti ini:
<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:blog.pageType == "item"'>
.post-body img {
width: 450px!important;
height: auto!important; }
</b:if>
</b:if>
This comment has been removed by the author.
Delete@Rahmat Makasih Gan Ilmunya, kunjungin balik ya :) http://agumtama.blogspot.co.id/
Delete@Yanuar coba pakai cara ini Sist
Cara MEengganti Ukuran Gambar Hasil Postingan Di Blogger
makasih gan..bermanfaat banget ilmunya..
ReplyDeletemaju terus gan...:D
ow iya gan,ternyata setelah dicoba2 kagak berubah,duh gimana?? tolong dibantu gan...
Deleteterimakasiih.
This comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteoh jadi intinya cuma maen kata "!important" doang ya?
ReplyDeleteTerima kasih Mas infonya...sudah di praktekan..Berhasil, jd gak capek2 merubah smw ukuran gambar..
ReplyDeleteGan punya saya yg berubah cuman gmbar d postingan, di thumbnail posting nggk berubah
ReplyDelete