Cara Membuat Semua Gambar di Blog Responsive - Ganti template baru otomatis ganti permasalahan baru, apalagi bila menggunakan template gratis seperti blognya Rapi Serui ini. Dari penataan gambar hingga struktur template harus betul memenuhi standar SEO. Peralatan Blogger pun mulai dikeluarkan dan dipergunakan. Maklum template gratis, banyak sekali kekurangan jauh api daripada panggang dengan template premium yang tinggal pakai saja.
Untuk struktur Template yang memenuhi standar SEO silahkan cek pada link berikut:
- Analisa SEO Gratis,SEO Site, Checkup: SEO Tools,Software dan Articles
Awalnya lahir Cara Membuat Gambar di Blog Responsive adalah ketika saya membuat Header Blog dengan gambar yang ukurannya (dimension) menyesuaikan template yang saya pergunakan sekarang yakni 1100 X 125. Artinya 1100 px panjang dan lebar 125 px. Capek-capek menggambar dan edit di Adobe Photoshop ternyata gambar tidak suport pada versi mobile. Artinya gambar hanya terlihat sepotong saja. Pada tampilan destop memang tidak ada masalah, gambar tampil utuh.
Bila kita ingat bahwa kode CSS dalam penulisan html untuk gambar adalah IMG dengan hurup Capitalize (img) maka kode gambar agar bisa responsive pada tampilan versi mobile adalah dengan menambahkan auto pada ukuran panjang dan lebarnya. Silahkan lihat dan cermati gambar dibawah ini. Penempatan kode CSS tsb ada berada kumpulan css yang bernaung diatas kode penutup skin atu style.
Langsung saja pada praktek membuat semua gambar yang ada pada blog kita menjadi responsive bila dibuka dalam berbagai media. Silahkan Agan tambahkan kode css dibawah ini diatas kode css yang ada pada grupnya ]]></b:skin> atau <style> Artinya kita harus menyimpannya di atas kode pembuka style tsb. Kode yang sangat simple namun dampaknya luar biasa. Gambar bisa tampil utuh pada tampilan versi mobile. Penampakan kodenya akan seperti ini :
.post-body img{max-width:100%; height:auto;}
Save template dan lihat hasilnya pada HP atau android anda !
Keterangan Susulan :
Update sekaligus ralat untuk judul postingan ini, mungkin akan tepat bila saya kasih judul dengan "Cara Semua Membuat Gambar di Blog menjadi Responsive pada Tampilan versi Mobile". Saya keburu pingin posting makanya judul seingatnya :P.
Artikel bagus, yuk kunjungi website kami
ReplyDelete