Cara Membuat Template Responsive Blogger

Cara Membuat Responsive Template Default Blogger.

Tingginya pengguna mobile phone di dunia secara tidak langsung memaksa setiap blogger untuk mendesain tampilan blognya agar lebih ramah. Salah satunya dengan membuat template responsive. Dengan begitu, blog yang diakses dari berbagai piranti akan lebih mudah dan kelihatan lebih nyaman. Sayangnya, blogspot sejauh ini belum mendukung template default atau bawaannya menjadi responsive. Blogger baru menyertakan tampilan mobile untuk template bawaan. Padahal versi mobile dengan template responsive lebih unggul yang responsive. Mungkin saja suatu saat nanti, blogger akan memikirkan hal ini.

(Baca: Cara Membuat Kotak Script Di Posting Blogspot).

Walau belum secara bawaan template default blogger responsive, bukan berarti tidak bisa diubah. Google secara gamblang mendukung setiap website agar menggunakan template responsive, itu artinya Google sendiri meminta kita untuk melakukan pembaharuan terhadap template default.

Bagi Anda yang selama ini nyaman dengan template default blogger, berikut langkah-langkah mudah yang harus Anda perbuat untuk merubahnya menjadi responsive.

1. Langkah pertama yang harus Anda lakukan adalah menonaktifkan Navbar blog Anda.
2. Setelah menonaktifkan Navbar, kemudian masuk kebagian Template dan pilih mode HTML. Cari kode berikut dengan cara menekan CTRL+F .
   .post-body img, .post-body
   

   .tr-caption-container {

   padding: $(image.border.large.size);

   }
3. Ganti script diatas dengan script dibawah ini.
   .post-body img, .post-body .tr-caption-container {
   

   padding: 0;

   width:auto;

   max-width:100%;

   height:auto;

   }
4. Kemudian cari lagi kode dibawah ini. Namun, jika kode ini tidak tersedia di blog Anda, lanjutkan saja langkah yang terakhir.
   <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>
5. Jika sudah ketemu, ganti dengan kode berikut.
   <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
6. Masih di pengaturan HTML, langkah terakhir yang harus Anda lakukan adalah mencari kode </head> lalu mempaste script berikut tepat diatasnya.
   <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>
7. Jika selesai, Simpan. Jika semua langkah diatas diikuti dengan seksama maka hasilnya akan seperti membuat template Anda responsive.

Apabila masih ada pertanyaan tentang Cara Membuat Responsive Template Default Blogger, jangan sungkan untuk berdiskusi melalui kolom komentar berikut ini. Sekali lagi, langkah diatas hanya berlaku untuk blog dengan template default atau template bawaan blogspot. Semoga bermanfaat dan terimakasih...