Untuk membuat tutorial cara membuat blog responsive, salah satu caranya adalah dengan menggunakan template sederhana dengan desain simpel namun cukup menarik bagi para pembaca atau pengunjung website tersebut.
Template yang tersedia terbilang cukup beragam, mulai dari template sederhana dan hingga tampilan yang sangat dinamis.
Template tersebut memiliki struktur yang hampir serupa tata letaknya. Namun, template yang telah disediakan oleh Blogger atau website developer tidak responsive, sehingga anda harus mengaktifkan template blog yang mudah untuk diakses melalui seluler.
Apa yang Dimaksud Dengan Blog Responsive?
Sebelum lanjut ke bagian yang membahas mengenai cara membuat blog responsive, sebaiknya jika anda memahami terlebih dahulu pengertian dari blog responsive ini. Melansir penjelasan dari Endar Julian, salah satu penggiat jasa SEO website, blog responsive adalah blog yang memiliki tampilan ramah ketika diakses melalui perangkat mobile.
Seperti yang dijelaskan sebelumnya bahwa blog responsive akan memiliki tampilan yang menarik dan user friendly. Namun hal tersebut bukan satu satunya alasan mengapa blog disarankan untuk memiliki tampilan responsive.
Hal tersebut juga terkait dengan faktor SEO, dimana Google lebih memprioritaskan blog dengan loading time cepat dan memberikan user experience yang baik terhadap pengunjungnya.
Cara Membuat Blog Responsive dengan Menggunakan Template Default
Anda dapat dapat membuat template di dalam Blog menjadi lebih responsive, untuk melakukannya anda dapat melakukan langkah sebagai berikut ini:
- Gunakan template dengan tampilan yang simpel
- Pilih tata letak yang terdapat di bagian Navbar, lalu klik edit dan nonaktifkan saja dengan menekan tombol Off dan klik tombol save atau simpan.
- Klik Tema lalu masuk ke dalam Edit HTML
- Cari kode yang akan saya berikan dibawah ini dengan cara yang mudah menggunakan CTRL + F
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
- Hapus kode yang telah anda temukan di atas tersebut dengan menggunakan kode berikut ini:
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>- Kode yang harus anda cari dan ubah formatnya adalah kode dibawah ini:
.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size)
}
- Ubah menjadi kode seperti dibawah ini agar tampilan gambar menjadi lebih responsif bagi para pengunjung
.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}
- Copy kode berikut ini dibagian atas format </head>
<style type='text/css'>
@media screen and (max-width:1024px){
body,.content-outer, .content-fauxcolumn-outer, .region-inner {width: 100%!important;min-width:100%!important;padding:0!important}
body .navbar {height: 0!important;}
.footer-inner {padding: 30px 0px!important;}
}
@media screen and (max-width: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;}
}
</style>
- Langkah terakhir adalah menyimpan semua perubahan yang telah anda lakukan.
Demikian adalah cara membuat blog responsive yang perlu anda ketahui untuk dapat meningkatkan kinerja website anda lebih baik bagi para penggunanya. Semoga ulasan singkat ini dapat bermanfaat untuk anda yang memiliki goal untuk membuat blog anda mendapatkan peringkat 1 di Google.
Jangan lupa juga untuk mengikuti blog ini agar anda tidak melewatkan artikel informatif lainnya seputar blogging dan juga SEO dari saya. Terima kasih telah menyempatkan membaca.
Artikel lain yang mungkin anda sukai:
- Daftar Backlink Gratis untuk Optimasi SEO
- Manfaat Backlink untuk Website
- Cara Mendapatkan Backlink Berkualitas