Setelah dibentuk responsive, jangan lupa nonaktifkan tempalate mobile bawaan blogger dengan setting ibarat ini:
Settingan itu pula yang harus diterapkan jikalau Anda memakai Template Blog Responsive/Mobile Friendly. Jika tidak, yang akan tampil di HP nanti template mobile default Blogger.
Cara Membuat Template Blog Responsive Mobile Friendly
1. Buat Blog Baru 2. Pilih Template Simple (Sederhana).
Setelah final menciptakan blog baru, lakukan langkah berikut ini dengan seksama dan dalam tempo sedang saja, hati-hati, jangan buru-buru, untuk menjadikannya responsive.
1. Klik Tema > Edit HTML
2. Temukan instruksi berikut ini di bab atas instruksi template:
<meta expr:content='data:blog.isMobile ? "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" : "width=1100"' name='viewport'/>
3. Hapus instruksi di atas dan ganti dengan instruksi berikut ini:
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
4. Temukan dan hapus instruksi berikut ini yang ada di bawah instruksi <b:template-skin>
<b:variable default='960px' name='content.width' type='length' value='960px'/>
<b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
<b:variable default='310px' name='main.column.right.width' type='length' value='310px'/>
5. Copas instruksi berikut ini di atas kode ]]></b:skin>
.separator a{margin-left:0px!important;margin-right:0px!important;}
.post img{max-width:100%;height:auto;}
6. Temukan instruksi berikut ini di bawah instruksi <b:template-skin>
body {
min-width: $(content.width);
}
.main-inner .column-right-outer {
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
}
Hapus dan ganti dengan instruksi 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);
}
7. Tambahkan instruksi berikut ini di bawah instruksi tadi:
.main-inner .column-center-outer{
float: left;
width:65%;
}
8. Copas instruksi berikut ini di atas instruksi ]]></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;}
}
9. Save! Simpan Template.
Demikian Cara Membuat Template Blog Bawaan Blogger menjadi Responsive Mobile Friendly.*
