Dalam struktur blog terdapat beberapa elemen mulai dari header, post dan footer, berbicara mengenai 3 elemen pembangun blog tersebut mungkin bab post ialah yang terpenting pasalnya bab tersebut berfungsi sebagai wadah bagi goresan pena artikel yang akan dibaca oleh pengunjung. Jika tampilan post tersebut awut-awutan tentunya akan menciptakan pengunjung kurang nyaman atau malah yang terburuk pengunjung sanggup pergi ke blog lain. Oleh alasannya itu tampilan untuk postingan harus diutamakan, kalau 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 manis di dekstop namun awut-awutan di versi mobile, terlebih lagi kini algoritma google mengharuskan responsive mobile atau template harus mempunyai tampilan sendiri kalau dibuka di perangkat hp. Dengan demikian tampilan mobile juga harus diutamakan, alasanya sendiri alasannya kini orang lebih banyak memakai smartphone ketimbang komputer atau laptop. Nah untuk itu silahkab buat template blog anda seresponsive mungkin pada tampilan mobile khususnya bab post.
Untuk template bab post dalam versi mobile hal yang sering menjadi duduk kasus ialah gambar postingan belum responsive atau gambar ketika dibuka di parangkat mobile akan keluar dari konten. Tentunya hal tersebut akan menciptakan pengunjung kurang nyaman dalam melihat gambar di artikel yang melebar keluar dari konten. Nah untuk itu disini aku akan membagikan tips mengenai cara mengatasi gambar keluar dari konten pada tampilan mobile. Berikut ulasannya.
Cara Membuat Gambar Postingan Responsive Mobile
1. Pertama yang niscaya masuk ke Blogger.
2. Kemudian masuk ke hidangan Template - Edit Html.
3. Setelah itu cari arahan @media screen dengan max-width 480px atau dibawahnya, kemudian tambahkan arahan berikut ini sempurna dibawah arahan tersebut.
.post img{float:left;padding:0 0 15px;margin:0;}
4. Untuk misalnya ibarat dibawah ini, aku 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 arahan media screen ibarat diatas silahkan copy saja arahan diatas kemudian paste sempurna dibawah arahan </style>, (Gunakan Ctrl+F) untuk mempermudah pencarian.
Nah kini coba lihat gambar postingan anda melalui ponsel anda atau baca cara melihat tampilan mobile blog eksklusif dari browser, sudah tidak melebihi kontenkan. Jika belum silahkan tanya di kolom komentar. Terima kasih.
No comments:
Post a Comment