Cara Menciptakan Responsive Template Default Blogger

Tingginya pengguna mobile phone di dunia secara tidak pribadi memaksa setiap blogger untuk mendesain tampilan blognya biar lebih ramah. Salah satunya dengan menciptakan template responsive. Dengan begitu, blog yang diakses dari banyak sekali piranti akan lebih gampang dan kelihatan lebih nyaman.

Sayangnya, blogspot sejauh ini belum mendukung template default atau bawaannya menjadi responsive. Blogger gres menyertakan tampilan mobile untuk template bawaan. Padahal versi mobile dengan template responsive lebih unggul yang responsive. Mungkin saja suatu ketika nanti, blogger akan memikirkan hal ini.

Walau belum secara bawaan template default blogger responsive, bukan berarti tidak dapat diubah. Google secara gamblang mendukung setiap website biar memakai template responsive, itu artinya Google sendiri meminta kita untuk melaksanakan pembaharuan terhadap template default.

Bagi Anda yang selama ini nyaman dengan template default blogger, berikut langkah-langkah gampang yang harus Anda perbuat untuk merubahnya menjadi responsive.
  • Langkah pertama yang harus Anda lakukan ialah menonaktifkan Navbar blog Anda. (Baca: Cara Menghilangkan Navbar Pada Blogger)
  • Setelah menonaktifkan Navbar, kemudian masuk kebagian Template dan pilih mode HTML. 
  • Cari arahan berikut dengan cara menekan CTRL+F
.post-body img, .post-body .tr-caption-container {
  padding: $(image.border.large.size);
}

Ganti script diatas dengan script dibawah ini

.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}
  • Kemudian cari lagi arahan dibawah ini. Namun, jikalau arahan 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>

Jika sudah nemu, ganti dengan arahan berikut

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
  • Masih di pengaturan HTML, langkah terakhir yang harus Anda lakukan ialah mencari arahan </head> lalu menpaste script berikut sempurna 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>
  • Jika selesai, Simpan. 
Jika semua langkah diatas diikuti dengan seksama maka balasannya akan menyerupai menciptakan template Anda responsive. Berikut ialah referensi blog dengan template default yang sudah BloGooblok ubah.


Jika masih belum paham dengan langkah-langkah diatas, silahkan simak videonya berikut ini:



Apabila masih ada pertanyaan wacana 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.

Selamat mencoba dan Jangan Lupa Bahagia!
+Wisa Rahardi


0 Response to "Cara Menciptakan Responsive Template Default Blogger"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel