Tampilan theme yang baru dibuat sudah seharusnya diperiksa melalui desktop dan mobile. Apakah tampilan yang terlihat di sana benar-benar sesuai dengan yang kita inginkan? Ataukah ada beberapa hal yang terlewat sehingga terlihat kurang elok.
Betul, meskipun pada saat membuat theme blogger sudah dibantu dengan tool untuk melihat tampilan melalui perangkat mobile. Tampilan sebuah blog yang dilihat secara langsung melalui device mobile beneran tetap dibutuhkan.
Image by Patrick Skrbinjek from Pixabay
Mengapa ini harus dilakukan? Jawaban sederhananya karena memanfaatkan perangkat mobile yang ada di lingkungan sekitar. Entah milik saudara, teman atau tetangga kita. Ya itung-itung sambil promosi blog dan theme hasil karya kita kan?
Belum lagi jika tool yang digunakan untuk memeriksa tampilan website itu sifatnya gratis. Seperti halnya dengan mobiletest.me yang sering saya gunakan. Di sana terlihat hanya ada beberapa perangkat. Misalnya: Apple iPhone 5, HTC ONE, Nokia Lumia 920, Samsung Galaxy Y, Google Nexus 7 dan Apple iPad Mini
Nah, sayang kan kalau kita misalnya mempunyai perangkat mobile dengan merek lain tapi tidak digunakan untuk memeriksa tampilan blog yang sedang kita kerjakan? Jika ini sudah dimaklumi, yuk kita cek tulisan kali ini tentang cara mengatur gambar postingan agar terlihat responsive pada semua perangkat.
Cara Mengatur Gambar Postingan Blogger Agar Responsive
Kemampuan responsive dibutuhkan agar gambar postingan blog mampu menyesuaikan diri sesuai dengan lebar perangkat yang mengakses sebuah website. Sehingga, ketika website diakses melalui perangkat mobile. Maka ukuran gambar tersebut akan menyesuaikan diri secara otomatis. Adapun cara untuk mengatur hal tersebut cukup dengan melakukan langkah-langkah di bawah ini:
1. Login ke dashboard Blogger.
2. Klik "Tema", klik icon "▼" di sebelah tulisan SESUAIKAN kemudian klik "Edit HTML".
3. Paste kode di bawah ini sebelum tag ]]></b:skin>.
4. Simpan theme.
5. Lihat hasilnya, jika gambar sudah sesuai dengan ukuran perangkat apapun yang mengaksesnya maka kode dinyatakan sudah berfungsi.
6. Namun jika masih belum berhasil silahkan klik kanan pada area postingan blog.
7. Kemudian pilih "Inspect (Q)".
8. Klik tanda pointer yang kalau disorot akan keluar tulisan "pick an element from the page (Ctrl + Shift + C)" jika menggunakan Firefox. Dan tulisan "select an element in the page to inspect it - Ctrl + Shift + C" jika menggunakan Chrome.
9. Arahkan pada gambar dan letakkan di sana (klik pada gambar tersebut).
10. Pada bagian tag div lihat id-nya. Jika id sudah didapatkan silahkan tiru cara penulisan untuk css di atas dan tempatkan pada bagian kode css pada theme blogger.
11. Lihat gambar di bawah sebagai contoh.
12. Halaman demo bisa dilihat pada tautan di bawah ini.
Kesimpulan
Demikian tutorial kali ini tentang cara mengatur gambar postingan agar menyesuaikan diri sesuai lebar kecilnya perangkat yang mengakses blog. Dengan cara ini, theme blogger kita terutama gambar yang dimuat blog bisa disebut dengan istilah responsive. Dan untuk menyempurnakan fungsi ini jangan lupa ada meta: <meta content='width=device-width, initial-scale=1' name='viewport'/> yang diletakan diantara tag <header> dan </header>. Dan ini sudah dijelaskan pada awal-awal membangun sebuah theme blogger.
Semoga bermanfaat.
Tidak ada komentar:
Posting Komentar