Cara Membuat Template Default Blogger Menjadi Responsive

Cara Membuat Template Default Blogger Menjadi Responsive, Sobat blogger, tutorial membuat responsive template default blogger ini sangat cocok bagi anda yang ingin berkreasi untuk membangun sebuah template dari blogger yang responsive, biasnya yang ingin memodif template bawaan blogger ini sering terkendala karena templatenya tidak responsive, namun sekarang anda bisa membuat template tersebut menjadi responsive dengan mudah sekali sobat blogger, tak sesulit yang dipikir..dan untuk tutorial ini saya belajar dari KompiAjaib.

Bagi anda yang ingin membuat template default blogger ini menjadi responsive anda bisa ikuti tutorialnya disini, sekaligus kita belajar juga dan saya sudah prektekan dan hasilnya berhasil. :)

Cara Membuat Template Default atau Bawaan Blogger Menjadi Responsive
1. Pertama, matikan fitur navbar, pilih menu tata letak > klik navbar > Pilih "OFF"
2. Sekarang cari kode di bawah ini :

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

3. Lalu ganti kode tersebut dengan kode dibawah ini.

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

4. Selanjutnya cari kode dibawah 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>

5. Lalu ganti kode tersebut dengan kode di bawah ini :

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

6. Sekarang letakan kode dibawah ini tepat diatas kode </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>

 7. Klik save template dan selesai.

Selesai sudah, dan anda sudah  membuat template default blogger menjadi responsive, mudah sekali bukan, silahkan di cek saja, terimakasih buat mas Adhy atas pelajarannya :) sekian tutorial "Cara Membuat Responsive Template Default Blogger"


Referensi : http://www.kompiajaib.com/2015/03/cara-mudah-membuat-responsive-template.html