Dalam struktur blog terdapat beberapa elemen mulai dari header, post dan footer, berbicara mengenai 3 elemen pembangun blog tersebut mungkin bagian post adalah yang terpenting pasalnya bagian tersebut berfungsi sebagai wadah bagi tulisan artikel yang akan dibaca oleh pengunjung. Jika tampilan post tersebut berantakan tentunya akan membuat pengunjung kurang nyaman atau malah yang terburuk pengunjung bisa pergi ke blog lain. Oleh karena itu tampilan untuk postingan harus diutamakan, jika terdapat hal yang kurang pas atau sesuai harus di perbaiki.
Tidak cuman tampilan untuk dekstop saja, tampilan untuk mobile juga harus diutamakan. Banyak sekali template yang mempunyai tampilan bagus di dekstop namun berantakan di versi mobile, terlebih lagi sekarang algoritma google mengharuskan responsive mobile atau template harus memiliki tampilan sendiri jika dibuka di perangkat hp. Dengan demikian tampilan mobile juga harus diutamakan, alasanya sendiri karena sekarang orang lebih banyak menggunakan smartphone ketimbang komputer atau laptop. Nah untuk itu silahkab buat template blog anda seresponsive mungkin pada tampilan mobile khususnya bagian post.
Untuk template bagian post dalam versi mobile hal yang sering menjadi masalah adalah gambar postingan belum responsive atau gambar saat dibuka di parangkat mobile akan keluar dari konten. Tentunya hal tersebut akan membuat pengunjung kurang nyaman dalam melihat gambar di artikel yang melebar keluar dari konten. Nah untuk itu disini saya akan membagikan tips mengenai cara mengatasi gambar keluar dari konten pada tampilan mobile. Berikut ulasannya.
Cara Membuat Gambar Postingan Responsive Mobile
1. Pertama yang pasti masuk ke Blogger.
2. Kemudian masuk ke menu Template - Edit Html.
3. Setelah itu cari kode @media screen dengan max-width 480px atau dibawahnya, lalu tambahkan kode berikut ini tepat dibawah kode tersebut.
.post img{float:left;padding:0 0 15px;margin:0;}
4. Untuk contohnya seperti dibawah ini, saya taruh di media screen max width 384px.
@media screen and (max-width:384px){
.post img{float:left;padding:0 0 15px;margin:0;}
}
5. Jika di template anda tidak anda kode media screen seperti diatas silahkan copy saja kode diatas lalu paste tepat dibawah kode </style>, (Gunakan Ctrl+F) untuk mempermudah pencarian.
Nah sekarang coba lihat gambar postingan anda melalui ponsel anda atau baca cara melihat tampilan mobile blog langsung dari browser, sudah tidak melebihi kontenkan. Jika belum silahkan tanya di kolom komentar. Terima kasih.