Cara Mudah Membuat Template Default Blog Responsive

Assalamu'alaikum Wr. Wb

Pada hari ini SIA27 akan memberikan tutorial Cara Membuat Blog Responsive

Membuat tampilan blog kita bisa di layar resolusi apa aja menjadi idaman bagi anda yang sedang membangun blog

Seiring berjalannya waktu, penggunaan mobile semakin tinggi, dan kita yang sedang membangun blog mungkin ingin membuat nyaman visitor yg menggunakan mobile

Tapi sayangnya sampai saat ini , Blogger belum menyediakan template default/bawaannya responsive, jadi kalian harus membuat secara manual

Jadi  bagi kalian yang ingin membuat template default blog nya menjadi responsive, silahkan ikuti tutorial dibawah ini

Step By Step:

1. Matikan  Navbar Pada Blog

• Masuk ke Blogger kalian

• Dashboard -> Layout (Tata Letak) -> klik "edit" pada bagian Navbar

• Kemudian kita ubah menjadi off  

     2. Masukan Script di Blog

• Silahkan cari kode berikut ini

.post-body img, .post-body .tr-caption-container {
  padding: $(image.border.large.size);
}

• Lalu ganti menjadi

.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}

• Kemudian silahkan cari kode berikut ini

<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>

• Lalu ganti menjadi

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

• Terakhir cari kode </head> kemudian masukan script ini diatas </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>

CATATAN:

Jika ada salah satu script yang kalian tidak temukan , tidak masalah lanjutkan saja, insya allah tetap berhasil 

• Terakhir klik "Simpan Template"

 
Baik mungkin sekian dari SIA27
Jika ada pertanyaan silahkan Berkomentar

Wassalamu'alaikum Wr. Wb

Artikel Terkait