Jika Anda menggunakan template responsif gambar Anda dalam posting Blogger akan cenderung memiliki citra responsif. Namun jika Anda menggunakan template default yang tidak responsif biasanya Anda akan mendapat masalah dengan tampilan beberapa gambar yang tumpang tindih dang lebih besar dari pada lebar kontainer posting blog. Bahkan ada beberapa template blogger responsif yang cenderung masih bermasalah dan tidak medukung gambar responsif. Dalam artikel ini akan dijelaskan bagaimana cara membuat gambar responsif dalam posting blogger, sidebar atau footer ke dalam format gambar responsif.
Buka dashboard Blogger > Pilih blog Anda > Template > Edit HTML > Klik di mana saja di dalam kode sumber, tekan CTRL F dan cari kode
Selesai Kini setiap gambar yang Anda gunakan dalam posting Anda akan responsif.
Copy kode berikut ini, dan paste ke widget HTML/JavaScript dalam layout Blogger Anda.
Saya telah menambahkan kelas
Membuat Gambar Responsif Dalam Posting Blogger
Kita akan menambahkan kode CSS ke dalam template Blogger untuk membuat gambar responsif dalam posting Blogger. Anda tingga mencopy kode berikut:.post-body img, .bst-image img{
box-sizing: border-box !important;
height: auto !important;
max-width: 100% !important
}
.post-body .tr-caption-container img{
height: auto !important;
width: 100% !important
}Dengan menempatkan kode CSS ini Anda tidak perlu menambahkan kode tambahan untuk perangkat yang berbeda karena kode ini akan mengurus semua ukuran gambar untuk berbagai ukuran layar.Buka dashboard Blogger > Pilih blog Anda > Template > Edit HTML > Klik di mana saja di dalam kode sumber, tekan CTRL F dan cari kode
]]> </ b: skin>. Tepat di atas kode ini, tambahkan kode CSS diatas. Kilk Save Template'.Selesai Kini setiap gambar yang Anda gunakan dalam posting Anda akan responsif.
Tambahkan Gambar Responsif ke Sidebar atau Footer Blogger
Jika Anda menggunakan Template Blogger pihak ketiga, Anda mungkin memiliki id yang berbeda atau kelas tersendiri untuk sidebar dan footer. Oleh karena ini aturan yang kita gunakan disini adalah CSS inline yang berfungsi pada setiap template Blogger.Copy kode berikut ini, dan paste ke widget HTML/JavaScript dalam layout Blogger Anda.
<img class='bst-image' src='your image URL direct link'/>Anda dapat menggunakan kode diatas di bagian gadget Anda di dalam sidebar atau footer.
Saya telah menambahkan kelas
'bst-image' ke atas tag img dengan pernyataan aturan ke CSS di atas. Jika tidak ingin membuat gambar responsif untuk posting Blogger maka Anda dapat menghapus semua aturan CSS kecuali kelas 'bst-image'.