Mengubah Template Bawaan Blogger Jadi Responsive Sidebar Kanan

Blog

anda sampai pada halaman ini karena anda menggunakan template simple bawaan blogger sidebar kiri yang anda miliki ingin dijadikan responsive. Sebelumnya silahkan dibaca langkah 1 dan dua pada bagian : Mengubah Template Blog Jadi Responsive. Tampilan Pada tataletak blogger yang memiliki sidebar kiri ini seperti berikut,

Mari dilanjutkan mengubah tampilan template tersebut menjadi responsive,
Ketiga: Cari kode di bawah ini dalam <b:template-skin> 

 body {
min-width: $(content.width);
}
.main-inner .column-right-outer {
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
} 

lalu ganti dengan kode di bawah ini
KODE 2

 body {
width: 1100px;
margin:0 auto;
min-width: $(content.width);
}
 
.main-inner .column-right-outer {
width: 30%;
float: right;
margin-right: -$(main.column.right.width);
}
.main-inner .column-center-outer{
float: left;
width:65%;
}
 

Ke-Empat: Tambahkan di atas ]]></b:skin> kode di bawah ini,

 .separator a{margin-left:0px!important;margin-right:0px!important;}
.post img{max-width:100%;height:auto;} 

Kelima: Perhatikan nama template yang anda gunakan. Letakkan kode berikut ini di bawah kode pada langkah ke-empat. Pilih salah satu sesuai jenis template yang anda gunakan.

 @media screen and (max-width:1024px){
        body{width:100%!important;padding:0;}
      }
      @media screen and (max-width:768px){
        .main-inner .column-right-outer, .main-inner .column-center-outer{float:none;width:100%!important;}
        .main-inner .column-right-inner, .main-inner .column-center-inner{padding:0}
        .main-inner .section {margin:0 15px}
        .Header h1{font-size:30px;text-align:center;}
        .Header .description{font-size:14px;text-align:center;}
      } 

 @media screen and (max-width:1024px){
        body{width:100%!important;padding:0;}
      }
      @media screen and (max-width:768px){
        .main-inner .column-center-outer, .main-inner .column-right-outer{float:none;width:100%!important;}
        .footer-inner, .main-inner .column-center-inner, .main-inner .column-right-inner{padding:0;}
        .Header h1{font-size:30px;text-align:center;}
        .Header .description{font-size:14px;text-align:center;}
      }
      @media screen and (max-width:414px){
        .footer-inner .section, .main-inner .column-center-inner .section, .main-inner .column-right-inner .section {margin:10px;}
      }
      @media screen and (max-width:320px){
        .fauxcolumn-right-outer .fauxcolumn-inner{border-left:none;}
        .fauxcolumn-left-outer .fauxcolumn-inner{border-right:none;}
        .footer-inner .section, .main-inner .column-center-inner .section, .main-inner .column-right-inner .section{margin:0;}
      } 

  @media screen and (max-width:1024px){
        body{width:100%!important;padding:0;}
      }
      @media screen and (max-width:768px){
        .main-inner .column-right-outer, .main-inner .column-center-outer{float:none;width:100%!important;}
        .main-inner .column-center-inner{padding:0}
.main-inner .column-right-inner{padding:20px}.Header h1{font-size:30px;text-align:center;}
        .Header .description{font-size:14px;text-align:center;}
      }
      @media screen and (max-width:320px){
        .main-inner .section{margin:0 10px}
        .post-outer {padding:10px 10px;}
      }

  @media screen and (max-width:1024px){
        body{width:100%!important;padding:0;}
      }
      @media screen and (max-width:768px){
        .main-inner .column-right-outer, .main-inner .column-center-outer{float:none;width:100%!important;}
        .main-inner .column-center-inner, .main-inner .column-right-inner {padding:0}
        .Header h1{font-size:30px;text-align:center;}
        .Header .description{font-size:14px;text-align:center;}
      }
      @media screen and (max-width:320px){
        .main-inner .section{margin:0 10px}
        .post-outer {padding:10px 10px;}
      } 

Terakhir silahkan template tersebut disimpan dan lihat hasil yang anda peroleh.Terakhir silahkan template tersebut disimpan dan lihat hasil yang anda peroleh. Untuk pengujiannya Anda bisa lakukan pada halaman: https://search.google.com/test/mobile-friendly?utm_source=gws&utm_medium=onebox&utm_campaign=suit&url=ALAMAT BLOG ANDA

Share Yuk

Facebook Twitter Linkedin

Related Posts

Loading...