Iklan Responsive

Cara Membuat Responsive Template Default Blogger

Tingginya pengguna mobile phone di global secara nir pribadi memaksa setiap blogger buat mendesain tampilan blognya agar lebih ramah. Salah satunya menggunakan membuat template responsive. Dengan begitu, blog yg diakses dari banyak sekali piranti akan lebih mudah dan kelihatan lebih nyaman.
Sayangnya, blogspot sejauh ini belum mendukung template default atau bawaannya sebagai responsive. Blogger baru menyertakan tampilan mobile buat template bawaan. Padahal versi mobile menggunakan template responsive lebih unggul yang responsive. Mungkin saja suatu saat nanti, blogger akan memikirkan hal ini.

Walau belum secara bawaan template default blogger responsive, bukan berarti nir bisa diubah. Google secara gamblang mendukung setiap website supaya memakai template responsive, itu merupakan Google sendiri meminta kita buat melakukan pembaharuan terhadap template default.
Bagi Anda yg selama ini nyaman menggunakan template default blogger, berikut langkah-langkah mudah yg harus Anda perbuat buat menggantinya sebagai responsive.
  • Langkah pertama yg wajib Anda lakukan adalah menonaktifkan Navbar blog Anda.
  • Setelah menonaktifkan Navbar, lalu masuk kebagian Template dan pilih mode HTML. 
  • Cari kode berikut menggunakan cara menekan CTRL+F
.post-body img, .post-body .tr-caption-container
  padding: $(image.border.large.size);
}

Ganti script diatas menggunakan script dibawah ini

.post-body img, .post-body .tr-caption-container
padding: 0;
width:auto;
max-width:100%;
height:auto;
}
  • Kemudian cari lagi kode dibawah ini. Tetapi, bila kode ini nir tersedia di blog Anda, lanjutkan saja langkah yang terakhir. 


Jika telah nemu, ganti dengan kode berikut
  • Masih di pengaturan HTML, langkah terakhir yg harus Anda lakukan adalah mencari kode kemudian menpaste script berikut sempurna diatasnya. 

@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;
}
  • Jika terselesaikan, Simpan. 
Jika semua langkah diatas diikuti menggunakan akurat maka hasilnya akan seperti membuat template Anda responsive. Berikut adalah model blog dengan template default yg sudah tutorial ubah.

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



Apabila terdapat pertanyaan tentang Cara Membuat Responsive Template Default Blogger, jangan sungkan buat berdiskusi melalui kolom komentar berikut adalah. Sekali lagi, langkah diatas hanya berlaku buat blog dengan template default atau template bawaan blogspot.
Selamat mencoba serta Jangan Lupa Bahagia!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel