Skip to main content

Trik Menciptakan Gambar Responsive Pada Postingan Blog

Trik Membuat Gambar Responsive pada Postingan Blog - Penambahan sebuah gambar pada postingan sangat dianjurkan supaya visitors tertarik membaca konten. Selain itu fungsi utama disematkannya gambar tersebut ialah semoga konten yang disajikan dapat menjadi lebih informatif, variatif dan visitors lebih gampang untuk memahami apa yang sedang dibagikan.

Coba bayangkan bila di dalam postingan hanya berisi goresan pena saja, tentu akan terasa membosankan. Oleh sebab itu sebisa mungkin menambahkan gambar pada setiap konten

Trik Membuat Gambar Responsive pada Postingan Blog Trik Membuat Gambar Responsive pada Postingan Blog


Memilih Gambar Relevan 
Usahakan menentukan gambar yang relevan dan mempunyai kualitas gambar yang baik, semoga gambar tidak pecah / noise ketika di pasang dalam postingan blog dengan ukuran large atau x-large. 

Tapi masalahnya ketika kita memakai gambar dengan kualitas yang anggun / ukuran x-large, biasanya gambar tersebut akan melebihi batas lebar konten. 

Apalagi bila belum memakai template blog yang responsive, tentu gambar yang ada di dalam postingan akan menjadi awut-awutan dan menjadi tidak rapi ketika di-akses melalui handphone atau android. 

Berikut ini ialah cara untuk mengatasi duduk kasus tersebut, tips berikut ini ialah bagaimana cara menciptakan gambar pada konten blog menjadi responsive secara otomatis

Cara menciptakan gambar di postingan menjadi responsive
Menggunakan template yang sudah responsive sangat dianjurkan sebab dapat meningkatkan user experience para visitors. Sebenarnya untuk menciptakan gambar pada postingan blog otomatis menjadi responsive caranya cukup mudah, tinggal menambahkan isyarat csssaja di dalam template. 

Kode css ini berfungsi untuk mengatur supaya lebar gambar dapat menyesuaikan secara otomatis sesuai dengan ukuran layar device yang sedang mengaksesnya. 


Caranya yaitu : 

1. Login terlebih dahulu ke dalam dashboard blogger. 

2. Masuk ke sajian template > edit templates 

3. Kemudian pastekan isyarat css berikut ini sempurna di atas kode
]]><b/skin> 


isyarat CSSnya
.post-body img {
max-width:100%;
height:auto;
}

4. Kemudian klik save

Sekarang coba susukan blognya lewat HP, tentu akan terjadi perubahan yaitu gambar menyesuaikan dengan lebar layar HP. Cara menciptakan gambar postingan blog menjadi responsive ini dapat diterapkan pada semua jenis template. Kemudian jangan lupa untuk melaksanakan meningkatkan secara optimal seo onpage pada gambar di postingan tersebut.

Praktis bukan?

Nah itu sedikit trik menciptakan gambar responsive pada postingan blog. Selamat mencoba

Sumber http://www.iblogger.id/
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar