Berbeda dengan template yang tersedia di situs - situs penyedia template yang sekarang sangat banyak menyedikan template yang design responsive. Sehingga bagi blogger yang ingin menggunakan template reponsive dengan mudah bisa mendownloadnya pada situs - situs tersebut.
Template dengan design responsive ada kegunaanya karena sekarang ini banyak sekali pengguna internet sudah menggunakan smartphone dengan berbagai macam ukuran. Maka dengan menggunakan template yang responsive akan mudah bagi pengguna internet untuk browsing dan membuka situs - situs atau blog yang di desain dengan tampilan responsive.
Jika kita menggunakan template responsive yang di sediakan di situs - situs penyedia template maka kita tidak perlu lagi mengeditnya. Namun jika tidak ingin menggunakan template hasil download hanya ingin memakai template bawaan blogger maka perlu bagi kita untuk mengeditnya supaya menjadi responsive.
Maka bagi Anda yang ingin mengedit template bawaan blogger menjadi responsive bisa mengikuti tutorial ini. Adapun langkah - langkahnya yaitu :
Langkah pertama
Masuk ke akun blogger dan klik Edit HTML pada Dashboard blog kita. Selanjutnya cari kode :
<meta expr:content='data:blog.isMobile ? "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" : "width=1100"' name='viewport'/>
Kemudian silahkan ganti dengan kode berikut :
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
Langkah kedua
Adapun langkah selanjutnya kita membuat gambar supaya responsive yaitu dengan cara mencari kode berikut :
.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}
Silahkan ganti dengan kode di bawah :
.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}
Langkah ketiga
Selanjutnya kita cari </head> dan masukkan kode berikut di atas </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 keempat
Jika kita belum menonaktifkan navbar bawaan blogger maka nonaktif dulu navbarnya dengan cara masuk ke dashboard blog kita dan pilih Tata Letak selanjutnya klik Edit maka akan muncul jendela baru dan pilih Off.
Demikian sedikit tutorial yang bisa kita coba untuk membuat responsive template bawaan atau default blogger. Mungkin ini bisa kita terapkan jika kita ingin tetap menggunakan template bawaan tanpa menggantikan dengan template hasil download.
