Cara Mengatasi Template Tidak Responsive (Bagian 2)
Tambahkan Meta Viewport pada Template Blogger
Langkah pertama yang wajib dilakukan adalah memastikan template Blogger memiliki tag viewport. Tag ini berfungsi agar browser dapat menyesuaikan lebar halaman dengan ukuran layar perangkat yang digunakan.
Masuk ke menu Tema → Edit HTML, kemudian cari bagian <head>. Jika belum terdapat kode viewport, tambahkan kode berikut tepat di bawah tag <head>.
<meta content="width=device-width, initial-scale=1" name="viewport"/>
Setelah disimpan, buka kembali blog menggunakan smartphone untuk melihat apakah tampilannya mulai menyesuaikan ukuran layar.
Tambahkan CSS Responsive
Jika template masih menggunakan ukuran tetap, Anda perlu menambahkan CSS responsive agar elemen-elemen blog dapat mengikuti ukuran layar secara otomatis.
Masuk ke menu Tema → Edit HTML, kemudian cari kode <b:skin> atau ]]></b:skin>. Tempelkan kode berikut tepat sebelum penutup tersebut.
/* Responsive Layout */
*{
box-sizing:border-box;
}
html{
overflow-x:hidden;
}
body{
max-width:100%;
overflow-x:hidden;
}
img,
iframe,
video,
embed,
object{
max-width:100%;
height:auto;
}
table{
display:block;
width:100%;
overflow-x:auto;
}
.container,
.wrapper,
.main-wrapper,
.content-wrapper{
width:100%;
max-width:100%;
margin:auto;
}
@media only screen and (max-width:768px){
#main-wrapper,
.main-wrapper,
.content,
.main,
.post{
width:100%;
float:none;
}
.sidebar,
.sidebar-wrapper,
#sidebar-wrapper{
width:100%;
float:none;
margin-top:20px;
}
.header,
.footer,
.navigation{
width:100%;
}
.menu ul{
display:block;
}
.menu li{
display:block;
width:100%;
}
}
Perlu diperhatikan bahwa nama class pada setiap template bisa berbeda. Jika template Anda menggunakan nama class lain, sesuaikan kode di atas dengan struktur template yang digunakan.
Pastikan Semua Gambar Bersifat Responsive
Gambar yang memiliki ukuran tetap sering menjadi penyebab halaman melebar. Karena itu, gunakan aturan CSS yang membuat gambar mengikuti ukuran layar.
img{
max-width:100%;
height:auto;
}
Dengan pengaturan tersebut, gambar akan otomatis mengecil ketika dibuka melalui smartphone tanpa kehilangan proporsi aslinya.
Membuat Video YouTube Responsive
Video yang disisipkan menggunakan ukuran tetap sering kali keluar dari area artikel. Bungkus iframe menggunakan container berikut.
<div class="video-responsive">
<iframe src="URL_VIDEO"></iframe>
</div>
Kemudian tambahkan CSS berikut.
.video-responsive{
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;
}
.video-responsive iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
Periksa Widget HTML dan Banner Iklan
Widget HTML, banner iklan, maupun iframe dari pihak ketiga sering menggunakan ukuran tetap, misalnya 728 piksel atau 970 piksel. Ukuran tersebut terlalu lebar untuk layar smartphone.
Gunakan banner yang bersifat responsif atau sesuaikan ukurannya menggunakan CSS agar tidak memaksa halaman melebar.
Gunakan Menu Mobile
Template modern biasanya telah menyediakan menu hamburger untuk perangkat mobile. Jika template masih menggunakan menu horizontal penuh, pertimbangkan untuk mengaktifkan menu mobile bawaan atau memperbarui sistem navigasi agar lebih nyaman digunakan.
Hindari Penggunaan Fixed Width
Salah satu penyebab terbesar template tidak responsive adalah penggunaan ukuran tetap seperti width:960px; atau width:1200px;.
Apabila memungkinkan, ubah ukuran tersebut menjadi persentase atau gunakan max-width sehingga elemen dapat menyesuaikan berbagai ukuran layar.
Cara Menguji Apakah Blog Sudah Mobile Friendly
Uji Menggunakan Smartphone Berbeda
Jangan hanya menguji menggunakan satu perangkat. Bukalah blog melalui beberapa ukuran layar untuk memastikan tampilannya tetap rapi.
Periksa Menu dan Tombol
Pastikan seluruh tombol dapat disentuh dengan nyaman, menu dapat dibuka, serta tidak ada elemen yang keluar dari layar.
Perhatikan Kecepatan Memuat Halaman
Template yang responsive sebaiknya juga ringan. Hindari memasang terlalu banyak script maupun widget yang memperlambat proses pemuatan halaman.
Kesalahan yang Sering Dilakukan Pemilik Blog
Menyalin CSS Tanpa Menyesuaikan Template
Banyak tutorial menggunakan nama class yang berbeda dengan template yang digunakan pembaca. Akibatnya, CSS tidak memberikan perubahan apa pun.
Terlalu Banyak Memasang Widget
Widget yang berlebihan dapat membuat tampilan mobile menjadi penuh dan memperlambat proses pemuatan halaman.
Tidak Menguji Setelah Mengedit Template
Setelah setiap perubahan, selalu buka blog menggunakan smartphone agar kesalahan dapat diketahui sejak awal.
Tips Agar Template Blogger Selalu Responsive
Gunakan template yang terus diperbarui oleh pengembangnya sehingga kompatibel dengan browser modern.
Selalu lakukan backup sebelum mengedit HTML maupun CSS agar proses pemulihan lebih mudah jika terjadi kesalahan.
Hindari memasang script dan widget yang tidak diperlukan karena dapat mengganggu tampilan serta menurunkan performa blog.
Periksa blog secara berkala menggunakan berbagai ukuran layar untuk memastikan seluruh elemen tetap bekerja dengan baik.
FAQ Seputar Template Blogger Tidak Responsive
Mengapa blog terlihat normal di komputer tetapi berantakan di smartphone?
Biasanya karena template belum memiliki media query, tidak menggunakan meta viewport, atau masih memakai ukuran tetap pada beberapa elemen.
Apakah semua template Blogger bisa dibuat responsive?
Sebagian besar bisa diperbaiki, tetapi template yang sangat lama atau memiliki struktur yang kurang baik terkadang memerlukan perubahan CSS dan HTML yang cukup banyak.
Apakah template responsive berpengaruh terhadap SEO?
Ya. Website yang mobile friendly memberikan pengalaman pengguna yang lebih baik dan memiliki peluang lebih besar memperoleh peringkat yang baik di hasil pencarian Google.
Apakah harus mengganti template baru?
Tidak selalu. Banyak template lama yang masih dapat dioptimalkan dengan menambahkan viewport, media query, dan beberapa penyesuaian CSS.
Kesimpulan
Template Blogger yang tidak responsive dapat menyebabkan pengalaman pengguna menurun, tampilan blog menjadi berantakan, dan berpotensi memengaruhi performa SEO. Penyebabnya beragam, mulai dari penggunaan template lama, tidak adanya meta viewport, CSS yang masih menggunakan ukuran tetap, hingga widget pihak ketiga yang tidak mendukung tampilan mobile.
Dengan menambahkan meta viewport, menerapkan CSS responsive, mengoptimalkan gambar, video, tabel, serta memastikan seluruh elemen dapat menyesuaikan ukuran layar, blog Anda akan tampil lebih profesional di berbagai perangkat. Selain meningkatkan kenyamanan pengunjung, blog yang mobile friendly juga memiliki peluang lebih baik untuk bersaing di hasil pencarian Google dan memberikan performa yang lebih optimal bagi Google AdSense.
Untuk melihat artikel tentang Cara Mengatasi Template Tidak Responsive Ketika Dibuka Melalui Smartphone, Lengkap dengan Script Responsive Blogger Part 1, lihat disini.