Pernahkah Anda membuka blog melalui smartphone, tetapi menemukan tampilan artikel berantakan karena gambar terlalu lebar, tabel keluar dari batas layar, atau video tidak menyesuaikan ukuran perangkat? Masalah seperti ini cukup mengganggu karena pengunjung harus menggulir layar ke kiri dan kanan untuk membaca seluruh isi artikel.
Masalah tersebut biasanya berkaitan dengan elemen di dalam postingan yang memiliki ukuran tetap atau tidak memiliki aturan responsif. Jika tidak ditangani, tampilan halaman dapat menjadi kurang nyaman terutama pada perangkat dengan layar kecil.
Salah satu solusi yang dapat dicoba adalah menambahkan CSS responsive untuk postingan Blogger. CSS ini dapat membantu membatasi lebar gambar, iframe, dan tabel agar tidak melewati area konten artikel.
Pada tutorial ini, Anda akan mempelajari cara memperbaiki layout postingan Blogspot yang berantakan di HP menggunakan CSS, lengkap dengan kode siap pakai, cara pemasangan, contoh penggunaan, dan cara menguji hasilnya.
Mengapa Layout Postingan Blogger Bisa Berantakan di HP?
Tampilan artikel dapat mengalami masalah horizontal overflow ketika terdapat elemen yang memiliki lebar lebih besar daripada area konten. Beberapa elemen yang sering menjadi penyebabnya adalah gambar berukuran besar, tabel dengan banyak kolom, iframe, video, dan elemen HTML dengan width tetap.
Contohnya, sebuah tabel yang memiliki banyak kolom mungkin terlihat normal pada layar komputer. Namun, ketika artikel dibuka melalui smartphone, tabel tersebut dapat menjadi lebih lebar daripada layar.
Hal yang sama dapat terjadi pada gambar atau iframe yang menggunakan ukuran tetap. Jika elemen tersebut tidak memiliki aturan maksimal yang sesuai, konten dapat melewati batas area postingan.
Apa Fungsi CSS Responsive pada Postingan Blogger?
CSS responsive digunakan untuk membantu elemen di dalam artikel menyesuaikan diri dengan area yang tersedia. Dalam kode yang digunakan pada tutorial ini, gambar dan iframe diberikan batas lebar maksimal, sedangkan tabel dibuat agar dapat digulir secara horizontal ketika ukurannya lebih lebar daripada area konten.
Dengan pendekatan tersebut, pengunjung tidak perlu membuat seluruh halaman blog melebar hanya untuk melihat tabel atau elemen tertentu.
Manfaat Memperbaiki Layout Artikel Blogger
Memperbaiki tampilan artikel agar lebih responsif memiliki beberapa manfaat, terutama dari sisi kenyamanan pengguna.
- Mengurangi masalah konten melebar pada layar smartphone.
- Membuat gambar lebih mudah menyesuaikan area artikel.
- Membantu tabel tetap berada di dalam area postingan dengan scroll horizontal.
- Meningkatkan kenyamanan membaca pada perangkat dengan layar kecil.
- Membuat tampilan artikel lebih rapi pada berbagai ukuran layar.
- Membantu mengurangi horizontal overflow yang disebabkan oleh elemen konten tertentu.
Perlu dipahami bahwa CSS ini tidak otomatis membuat seluruh template Blogger menjadi responsif. Responsivitas keseluruhan blog juga dipengaruhi oleh struktur template, navigasi, sidebar, gambar, widget, JavaScript, dan elemen lainnya.
Contoh Masalah Tabel pada Tampilan Mobile
Salah satu masalah yang cukup sering ditemukan adalah tabel dengan banyak kolom. Misalnya, Anda membuat tabel perbandingan spesifikasi smartphone yang terdiri dari lima atau lebih kolom.
Pada layar desktop, tabel mungkin masih dapat ditampilkan dengan baik. Namun, ketika dibuka melalui smartphone, tabel dapat melebihi lebar artikel dan menyebabkan halaman ikut melebar.
Dengan menerapkan aturan CSS yang tepat, tabel dapat diberikan area gulir horizontal. Dengan demikian, halaman utama tetap berada dalam batas layar, sedangkan tabel dapat digeser ke kanan dan kiri untuk melihat kolom yang tidak terlihat.
Kode CSS Responsive untuk Blogger
Berikut kode CSS yang dapat digunakan untuk membantu mengatasi masalah gambar, iframe, dan tabel yang melebar pada postingan Blogger:
/* Responsive Fix untuk Gambar dan Iframe */
.post-body img,
.post-body iframe {
max-width: 100% !important;
height: auto !important;
display: block;
}
/* Responsive Table */
.post-body table {
width: 100% !important;
max-width: 100% !important;
display: block;
overflow-x: auto;
border-collapse: collapse;
white-space: nowrap;
}
/* Tampilan Sel Tabel */
.post-body table th,
.post-body table td {
padding: 10px;
border: 1px solid #e0e0e0;
}Penjelasan Kode CSS
CSS untuk Gambar
.post-body img {
max-width: 100% !important;
height: auto !important;
display: block;
}Aturan max-width: 100% membatasi lebar gambar agar tidak melebihi area konten postingan. Sementara itu, height: auto membantu menjaga perbandingan ukuran gambar ketika lebarnya menyesuaikan.
Penggunaan !important dimaksudkan untuk membantu mengatasi aturan CSS lain pada template yang mungkin memberikan nilai width berbeda.
CSS untuk Iframe
.post-body iframe {
max-width: 100% !important;
height: auto !important;
display: block;
}Aturan ini membatasi lebar iframe agar tidak melebihi area postingan. Iframe biasanya digunakan untuk menyematkan video, peta, atau konten eksternal lainnya.
Perlu diperhatikan bahwa height: auto pada iframe tidak selalu menghasilkan rasio video yang ideal. Untuk video yang benar-benar responsif, wrapper dengan rasio aspek tertentu dapat memberikan hasil yang lebih konsisten.
CSS untuk Tabel
.post-body table {
width: 100% !important;
max-width: 100% !important;
display: block;
overflow-x: auto;
border-collapse: collapse;
white-space: nowrap;
}Bagian ini digunakan untuk membuat tabel memiliki area yang dapat digulir secara horizontal. Properti overflow-x: auto memungkinkan tabel digeser ketika isinya lebih lebar daripada area yang tersedia.
CSS untuk Sel Tabel
.post-body table th,
.post-body table td {
padding: 10px;
border: 1px solid #e0e0e0;
}Kode tersebut memberikan jarak di dalam sel serta garis pembatas antara kolom dan baris agar tabel lebih mudah dibaca.
Cara Memasang CSS Responsive di Blogger
Setelah kode CSS disiapkan, Anda dapat memasukkannya ke dalam template Blogger melalui menu Edit HTML.
1. Buka Dashboard Blogger
Masuk ke dashboard Blogger menggunakan akun yang memiliki akses untuk mengedit template blog.
2. Pilih Menu Tema
Pada panel Blogger, pilih Tema. Sebelum melakukan perubahan, sebaiknya buat cadangan template terlebih dahulu agar Anda dapat mengembalikannya jika terjadi kesalahan.
3. Buka Edit HTML
Buka menu Edit HTML untuk melihat struktur kode template Blogger yang sedang digunakan.
4. Cari Bagian CSS Template
Gunakan fitur pencarian dengan menekan Ctrl + F. Cari bagian penutup CSS seperti:
<![CDATA[atau bagian:
]]></b:skin>Posisi yang tepat dapat berbeda tergantung struktur template Blogger yang digunakan. Karena itu, jangan langsung menempelkan kode jika struktur template Anda berbeda.
5. Tempelkan Kode CSS
Masukkan kode CSS responsive di dalam area CSS template, sebelum bagian penutup </b:skin> atau sesuai struktur style pada template.
6. Simpan Template
Setelah memastikan kode berada pada lokasi yang benar, simpan template. Jika muncul pesan kesalahan, periksa kembali sintaks CSS dan posisi kode yang baru ditambahkan.
Cara Menggunakan Setelah CSS Terpasang
Setelah CSS berhasil ditambahkan, Anda tidak perlu menambahkan class khusus pada setiap gambar selama elemen tersebut memang berada di dalam area .post-body.
Anda dapat tetap menulis artikel seperti biasa melalui editor Blogger. Ketika artikel memiliki gambar yang lebih lebar dari area konten, aturan CSS akan membatasi lebarnya.
Untuk tabel, jika tabel lebih lebar daripada area artikel, pengguna dapat menggeser tabel secara horizontal tanpa membuat seluruh halaman ikut melebar.
Cara Menguji CSS Responsive Blogger
Setelah pemasangan selesai, lakukan pengujian untuk memastikan perubahan bekerja dengan baik pada berbagai ukuran layar.
Uji dengan Gambar Besar
Buat artikel percobaan yang berisi gambar dengan resolusi besar. Buka artikel tersebut melalui browser desktop dan kemudian kecilkan ukuran jendela browser.
Gambar seharusnya menyesuaikan dengan area konten dan tidak menyebabkan halaman melebar secara horizontal.
Uji dengan Tabel Banyak Kolom
Buat tabel yang memiliki banyak kolom dan teks panjang. Buka artikel melalui smartphone atau gunakan mode perangkat pada developer tools browser.
Jika tabel lebih lebar daripada area artikel, seharusnya tersedia kemampuan untuk melakukan scroll horizontal pada tabel tanpa membuat keseluruhan halaman bergeser.
Uji dengan Iframe
Tambahkan iframe seperti video atau konten eksternal ke dalam artikel. Pastikan lebar iframe tidak menyebabkan area postingan melewati batas layar.
Kesalahan Umum Saat Memasang CSS Responsive
Menempatkan CSS di Lokasi yang Salah
CSS harus ditempatkan pada area yang dapat dibaca sebagai stylesheet. Jika kode ditempatkan di dalam bagian yang salah, browser tidak akan menerapkannya sebagaimana mestinya.
Selector Tidak Sesuai dengan Template
Kode di atas menggunakan selector .post-body, yang umum digunakan pada template Blogger untuk area isi postingan. Namun, beberapa template yang telah dimodifikasi dapat menggunakan struktur atau class yang berbeda.
Jika kode tidak memberikan perubahan apa pun, periksa struktur HTML template dan cari class yang digunakan pada container artikel.
CSS Template Memiliki Aturan yang Lebih Kuat
Beberapa template memiliki aturan CSS yang sangat spesifik sehingga dapat mengalahkan aturan yang baru ditambahkan. Pada kondisi seperti ini, !important dapat membantu meningkatkan prioritas deklarasi tertentu.
Namun, penggunaan !important sebaiknya tidak berlebihan karena dapat membuat pengelolaan CSS menjadi lebih sulit ketika template dikembangkan lebih lanjut.
Memberikan Width Tetap pada Tabel
Jika tabel memiliki atribut width atau style inline dengan ukuran tetap, aturan responsive mungkin perlu disesuaikan. Hindari penggunaan lebar tetap dalam satuan piksel jika tidak benar-benar diperlukan.
Tips Agar Artikel Blogger Lebih Mobile Friendly
- Gunakan gambar yang sesuai dengan kebutuhan artikel dan optimalkan ukuran file.
- Hindari menetapkan lebar gambar menggunakan nilai piksel yang terlalu besar.
- Gunakan tabel dengan struktur yang sederhana jika memungkinkan.
- Pastikan video dan iframe tidak melebihi lebar area konten.
- Gunakan CSS responsive untuk elemen yang berpotensi menyebabkan horizontal overflow.
- Uji tampilan artikel menggunakan smartphone dan komputer.
- Periksa elemen tambahan seperti widget, banner, dan kode embed yang dapat menyebabkan halaman melebar.
Apakah CSS Ini Membuat Blog 100% Responsif?
Tidak. Kode ini secara khusus membantu menangani beberapa elemen di dalam postingan, terutama gambar, iframe, dan tabel. Responsivitas sebuah blog secara keseluruhan bergantung pada struktur template dan berbagai komponen lain yang digunakan.
Jika sidebar, header, navigasi, widget, atau elemen lain masih menggunakan ukuran tetap, halaman tetap dapat mengalami masalah pada perangkat tertentu. Karena itu, perbaikan layout sebaiknya dilakukan secara menyeluruh jika ditemukan masalah responsivitas lainnya.
FAQ CSS Responsive Blogger
Kenapa postingan Blogger berantakan saat dibuka di HP?
Salah satu penyebabnya adalah terdapat elemen dengan lebar yang melebihi area konten, seperti gambar, tabel, iframe, atau elemen HTML dengan ukuran tetap.
Apakah kode CSS ini bisa digunakan di semua template Blogger?
Kode ini dapat digunakan pada banyak template Blogger yang menggunakan class .post-body. Namun, template yang memiliki struktur CSS atau HTML berbeda mungkin memerlukan penyesuaian selector.
Apakah CSS ini bisa memperbaiki tabel yang melebar di HP?
Bisa membantu. Aturan overflow-x: auto memungkinkan tabel yang lebih lebar daripada area konten untuk digulir secara horizontal sehingga tidak harus membuat seluruh halaman melebar.
Apakah gambar akan otomatis menyesuaikan layar?
Gambar yang berada di dalam area .post-body akan dibatasi hingga maksimal 100% dari area induknya melalui aturan CSS tersebut. Tinggi gambar tetap disesuaikan agar proporsinya terjaga.
Apakah kode ini dapat meningkatkan SEO Blogger?
CSS responsive bukan faktor yang secara langsung menjamin peningkatan peringkat pencarian. Namun, tampilan yang nyaman pada perangkat mobile merupakan bagian penting dari pengalaman pengguna dan kualitas teknis sebuah halaman.
Apakah harus melakukan backup sebelum mengedit template?
Sangat disarankan. Backup template dapat digunakan untuk mengembalikan kondisi sebelumnya jika terjadi kesalahan saat mengedit HTML atau CSS.
Kesimpulan
Masalah layout postingan Blogspot yang berantakan di HP sering kali disebabkan oleh elemen konten yang memiliki ukuran lebih besar daripada area artikel. Gambar, tabel, iframe, dan elemen HTML tertentu dapat menyebabkan halaman mengalami horizontal overflow jika tidak memiliki aturan responsive yang sesuai.
Dengan menambahkan CSS responsive untuk Blogger, gambar dapat dibatasi agar tidak melebihi area postingan, sementara tabel dapat diberikan kemampuan scroll horizontal ketika ukurannya terlalu lebar.
Kode ini merupakan salah satu solusi sederhana yang dapat diterapkan pada template Blogger. Namun, jika masalah responsivitas masih muncul setelah pemasangan, periksa juga struktur template, selector CSS, widget, banner, dan elemen lain yang mungkin menjadi sumber masalah.
Dengan melakukan pengujian pada berbagai ukuran layar dan mengoptimalkan setiap elemen secara bertahap, Anda dapat membuat tampilan artikel Blogger menjadi lebih rapi, nyaman dibaca, dan lebih sesuai untuk perangkat mobile.