Cara mudah buat gambar menjadi responsive di blog kita

Cara Mudah Buat Gambar Menjadi Responsive di Blog Kita

Dear sahabat BT, senang bisa jumpa lagi. Hari ini Om BT akan sharing tentang cara mudah buat gambar menjadi responsive di blog kita. Semoga bermanfaat.

Sahabat BT belum lama ini saya kesulitan bagaimana cara membuat gambar di blog kita menjadi responsive mengikuti media di mana kita bisa mengakses blog kita.

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

Blog dan situs website membutuhkan penyesuaian diri, maka lahirlah istilah responsive dalam dunia blogger. Tempelate blog harus dibuat responsive agar bisa tampil menyesuaikan desktop perangkat, kalau tidak reseponsive maka blog atau website tampilannya akan jelek, terkadang terlalu lebar atau terlalu kecil.

Tampilan yang responsive ini berpengaruh juga pada isi postingan yaitu gambar dan video yang ada dalam postingan. Keduanya harus responsive, kalau tidak ya tampilannya akan jelek lagi.

Khusus untuk pengguna blogger terkadang template bawaan blog atau sebagian template blog gambarnya belum responsive. Seperti template yang saya gunakan ini.

Saat pertama kali saya gunakan gambar yang ada di dalam postingan blog belum responsive sesuai dengan beberapa browser sehingga saya harus sedikit menambahkan kode CSS untuk membuat gambarnya menjadi responsive.

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 Meningkatkan Traffic Pengunjung (visitor) Blog

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

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>

CSS.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.

Demikian postingan Om BT tentang blog. Semoga bermanfaat!. [www.blogteknisi.com]

Check Also

cara optimasi seo on page

Cara Optimasi SEO On Page untuk Website atau Blog

Bagi kalian yang sua nulis atau suka berbagi informasi pasti kalian ada keinginan untuk membuat …

9 comments

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

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

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

  4. Sama2 gan salam blogger angingmammiri 🙂

  5. semoga bermanfaat…salam blogger !

  6. wah saya juga ga tahu mas heheheh…..:-). Coba cari referensi lain….

Leave a Reply

Your email address will not be published. Required fields are marked *