Itu sebabnya, kalau kita membangun blog akhir-akhir ini, para begawan-begawan traffic tak lelah mengingatkan bahwa website kita harus bisa diakses dengan mudah di smartphone. Desain pun beralih dari yang tadinya bisa totalitas mengembangkan kreativitas di layar lebar PC, jadi harus memikirkan apakah tampilan blog juga sedemikian menarik di smartphone.
Buat Anda yang males ubrak-abrik desain blog seperti saya karena nyaman dengan setting blog yang sudah digunakan bertahun-tahun (diluar yang disediakan blogger ya, kalau template yang default itu sudah responsif semua), ada sedikit solusi untuk blog yang belum smartphone friendly. Tutorial kali ini terbatas pada ilustrasi atau gambar yang biasa kita sematkan di postingan.
Biasanya jika insert ilustrasi di post maka akan muncul setting seperti ini:
Kita bebas memilih apakah mau setting small-medium-large-x large-atau original size. Pilihlah salah satu, misal saya pilih setting x-large. Hasil di tampilan blog di PC jadi seperti ini:
Untuk ilustrasi yang belum responsive ketika kita masuk ke halaman blog yang berisi postingan tadi, maka ilustrasi tersebut akan terdistorsi. Atau jadi gepeng dalam posisi vertikal. Seperti gambar berikut: mengganggu ya?
Bagaimana supaya gambar tadi bisa dilihat enak di layar smartphone kita? Silakan Anda balik ke dashboard dan edit postingan dimana ilustrasi tadi disematkan. Klik HTML pada sisi kanan atas, tampilannya jadi seperti ini:
Ketikkan: style="max-width:100%;height:auto;" setelah file ekstensi dari ilustrasi tersebut bisa setelah .png atau .jpg seperti ini:
Klik compose di kanan atas untuk mengecek apakah settingan kita berubah? Berikut dapat dilihat bahwa x-large masih digunakan untuk setting ilustrasi tersebut.
Klik update di kiri atas, cek di PC, tampilan posting yang tadi. Tidak berubah kan? Lalu cek di smartphone apakah script HTML tadi bekerja:
Demikian tutorial kali ini, semoga bermanfaat :)
No comments:
Post a Comment