Cara Membuat Gambar Postingan Blog Responsive Mobile

RaBiitch Official - Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Gambar Postingan Blog Responsive Mobile, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel tutorial blog, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca artikel kami yang berjudul Cara Membuat Gambar Postingan Blog Responsive Mobile
Cara Membuat Gambar Postingan Blog Responsive Mobile


Tutorial Blog,- Bagi pemilik blog mengurus dan mengelola blog sebaik mungkin adalah cara agar blog tersebut bisa mencapai kesuksesan, bukan dalam hal visitor saja melainkan juga pada tampilan blog tersebut. Berbicara mengenai tampilan blog pasti sebagian pemilik blog ada yang sangat memperhatikannya dan ada juga yang menganggap tampilan blog menjadi hal yang belakangan karena suksesnya blog tidak di tentukan oleh sebuah tampilan. Memang benar jika tampilan sebuah blog tidak menentukan banyaknya visitor, namun dengan membuat tampilan blog sebagus mungkin dan enak di pandang tentunya akan membuat pengunjung semakin nyaman dan betah berlama-lama di blog yang yang dikunjungi.

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.



Demikian penjelasan mengenai Cara Membuat Gambar Postingan Blog Responsive Mobile dan seperti biasa silahkan tinggalkan apa pendapat kalian di kolom komentar mengenai Cara Membuat Gambar Postingan Blog Responsive Mobile

Bagikan : https://www.rabiitch.me/2016/12/cara-membuat-gambar-postingan-blog.html

0 Response to "Cara Membuat Gambar Postingan Blog Responsive Mobile"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel