Cara Mudah Buat Gambar Menjadi Responsive di Blog Kita

Senang bisa jumpa lagi sahabat BlogTeknisi, pada kesempatan ini saya ingin sharing tentang blog. Belum lama ini saya kesulitan bagaimana cara membuat gambar di blog kita menjadi responsive mengikuti media akses ke blog kita.

Baca Juga : Cara Mudah Menghubungkan Wifi/Wireless Pada Windows 8

Sebelumnya blog saya memang sudah memakai template responsive hanya saja, saat kita memasukkan gambar/banner, misalnya banner iklan ternyata tidak serta merta mengikuti templatenya. Walhasil, jika kita browsing menggunakan smartphone atau tablet misalnya tampilan blog kita bisa sangat kacau karena gambar/banner tadi tidak mengikuti template yang responsive. 

Baca Juga : Cara Mudah Meningkatkan Traffic Pengunjung (Visitor) Blog, Website Atau Situs Kita

Nah setelah googling sana sini alhamdulillah saya dapat triknya, dengan menambahkan kode CSS tambahan pada template kita. Caranya sangatlah gampang :

ilustrasi - gambar blog responsive
1. Masuk ke akun blogger saudara, dan langsung menuju ke 'Edit Template'
2. Pada editor template cari ]]</b:skin>
3. Kemudian Letakkan CSS berikut tepat di atas ]]</b:skin>


.separator a{margin-left:0px !important;margin-right:0px !important;}
.post img{max-width:100%;height:auto;}

4. Save template anda dan lihat hasilnya.

Alhamdulillah, setelah memakai cara di atas semua gambar di blog saya bisa responsive mengikuti template dan nyaman dipandang mata. [www.blogteknisi.com]  

9 Komentar untuk "Cara Mudah Buat Gambar Menjadi Responsive di Blog Kita"

  1. wah simple banget ternyata... bisa disemua template mas?

    BalasHapus
  2. trims gan, berhasil :) kalau gak berhasil saya tinggal hapus lalu insert ulang. thx for share

    BalasHapus
  3. waah bener2 mudah dan gampang di terapkan...terima kasih infonya..

    BalasHapus
  4. Balasan
    1. wah saya juga ga tahu mas heheheh.....:-). Coba cari referensi lain....

      Hapus

Iklan Atas Artikel

Iklan Tengah Artikel 1

Loading...

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Loading...
loading...