Edit Template Bawaan Blogger Jadi Responsive Sidebar Kiri-Kanan

Blog

Sebelumnya Silahkan baca langkah 1 dan 2 pada  Cara Mengedit Template Bawaan Blogger Menjadi Responsive anda sampai pada halaman ini karena anda menggunakan template simple bawaan blogger sidebar kiri yang anda miliki ingin dijadikan 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-left-outer {
width: $(main.column.left.width);
right: 100%;
margin-left: -$(main.column.left.width);
}
.main-inner .column-right-outer {
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
}
 

lalu ganti dengan kode di bawah ini

 body {
width: 1100px;
margin:0 auto;
min-width: $(content.width);
}
.main-inner .column-left-outer {
width: 20%;
right: 80%;
position: absolute;
margin-left: -$(main.column.left.width);
}
.main-inner .column-right-outer {
width: 20%;
float: right;
margin-right: -$(main.column.right.width);
} .main-inner .column-center-outer{
left:20%;
width:60%;
}

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.

 /*Responsive*/
      @media screen and (max-width:1024px){
        body{width:100%!important;padding:0;}
      }
      @media screen and (max-width:768px){
        .main-inner .column-left-outer{position:relative;left:0;margin:auto;width:100%}
        .main-inner .column-center-outer{left:0;width:100%}
        .main-inner .column-right-outer{float:none;width:100%;}
        .footer-inner, .main-inner .column-left-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-left-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-left-inner .section, .main-inner .column-center-inner .section, .main-inner .column-right-inner .section{margin:0;}
      } 

 /*Responsive*/
      @media screen and (max-width:1024px){
        body{width:100%!important;padding:0;}
      }
      @media screen and (max-width:768px){
        .main-inner .column-left-outer{position:relative;left:0;margin:auto;width:100%}
        .main-inner .column-center-outer {left:0;width:100%;}
        .main-inner .column-right-outer {float:none;width:100%}
        .main-inner .column-left-inner, .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;}
      } 

 /*Responsive*/
      @media screen and (max-width:1024px){
        body{width:100%!important;padding:0;}
      }
      @media screen and (max-width:768px){
        .main-inner .column-left-outer{position:relative;left:0;margin:auto;width:100%}
        .main-inner .column-center-outer {left:0;width:100%;}
        .main-inner .column-right-outer {float:none;width:100%}
        .main-inner .column-center-inner{padding:0}
.main-inner column-left-inner, .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;}
      } 

 /*Responsive*/
      @media screen and (max-width:1024px){
        body{width:100%!important;padding:0;}
      }
      @media screen and (max-width:768px){
        .main-inner .column-left-outer{position:relative;left:0;margin:auto;width:100%}
        .main-inner .column-center-outer {left:0;width:100%;}
        .main-inner .column-right-outer {float:none;width:100%}
        .main-inner .column-left-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: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...