Membuat Template Blog Responsive Template bawaan Blogger Asli

Cara Membuat Template Blog Responsive Mobile Friendly

 Temukan teks warna biru dan hapus kode berikut ini yang ada di bawah kode <b:template-skin>

.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
  border-$startSide: 1px solid $(tabs.border.color);
}
]]></b:skin>

    <b:template-skin>
      (INI TARGET KITA )
<b:variable default='960px' name='content.width' type='length'/>
      <b:variable default='0' name='main.column.left.width' type='length'/>
      <b:variable default='310px' name='main.column.right.width' type='length'/>  

(INI TARGET KITA)

      <![CDATA[
      body {
        min-width: $(content.width);
      }






Copas kode berikut ini di atas kode  ]]></b:skin>

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


Temukan kode berikut ini di bawah kode <b:template-skin>

 <![CDATA[
   (INI TARGET KITA)   body {
        min-width: $(content.width);
      }

      .content-outer, .content-fauxcolumn-outer, .region-inner {
        min-width: $(content.width);
        max-width: $(content.width);
        _width: $(content.width);
      }  (INI TARGET KITA

      .main-inner .columns {
        padding-left: $(main.column.left.width);
        padding-right: $(main.column.right.width);
      }


Hapus dan ganti dengan kode berikut ini:

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);
}

Tambahkan kode berikut ini di bawah kode tadi:

.main-inner .column-center-outer{
float: left;
width:65%;
}

Copas kode dibawah ini dan paste di atas kode ]]></b:skin>

/*Responsive*/
@media screen and (max-width:1024px){
body{width:100%!important;padding:0;}
.content-inner{overflow: hidden;}
}
@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;}
}
 
Save Simpan Template.



Setelah itu Simpan pengaturan Template Responsive diblog Anda. Ini akan menambah kerapihan tampilan blog Anda.

Semoga bermanfaat. Jika masih mengalami kesulitan, tak perlu sungkan untuk bertanya dengan meninggalkan komentar dibawah ini. Salam berbagi!

Share this post