Cara membuat Responsive Image untuk Blogger Template Blogspot

Cara membuat Responsive Image untuk Blogger Template Blogspot

Responsive Image Tricks For Blogger | Artikel ini adalah tips tentang cara mengubah semua gambar yang ada di blog menjadi responsive. Karena, pada beberapa template blog responsive sendiri terkadang image/gambar sering belum ikut tersentuh responsive desain. Apalagi template yang tidak responsive, sudah pasti itu.

Sehingga, gampar pendukung postingan yang ditampilkan pada gadget seperti Tab, Handphone, atau lainnya, sering terpotong atau tidak terlihat semua. Dan jelas hal ini sangat menggangu tampilan. Untuk itu, kita perlu sedikit memodifikasi template dengan melakukan beberapa editing code HTML pada blog.

Kita langsung saja ke pembahasan inti; DEMO Responsive Image

Pertama, login blogger terus edit HTML.

Lalu cari kode :

]]>

Dan tambahkan kode css dibawah ini diatasnya:

img {display: block;max-width:100%;height:auto;width:auto9;} 

Setelah itu cari kode:

dan tambahkan javascript dibawah ini diatas kode tersebut:

setelah itu cari kode

dan tambahkan script dibawah ini di atasnya (ini digunakan untuk mengatasi terjadinya fallback jika javascript tidak support di peramban)

Demikian Cara membuat Responsive Image untuk Blogger Template Blogspot. Terimakasih atas kunjungannya dan semoga bermanfaat.

credits : http://decodize.com/html/simple-responsive-image-technique/

Leave a Reply

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