Tuesday, 21 April 2015

Cara Membuat Template Default menjadi Responsive Pada Blog

Responsive Template

Dalam membangun sebuah blogger kita membutuhkan reaksi cepat dari semua pelayan internet , dan untuk itu jika blog kita sudah responsive design maka sudah jelas akan lebih cepat terindex oleh si Google dan sungguh menyenangkan karena bisa dikunjungi banyak orang .

Untuk itu berikut ini NTechno bagikan caranya : 

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. Save Template dan Selesai



Masukan email Anda untuk Dapatkan Update terbaru dari Newbie Techno.Gratis!
Share this article to your friends