Cara Membuat Template Blog Responsive Mobile Friendly

Baca Juga

Yang dimaksud Cara Membuat Template Blog Responsive Mobile Friendly dalam postingan ini adalah mengubah template bawaan Blogger menjadi ramah seluler (mobile friendly).

Setelah dibuat responsive, jangan lupa nonaktifkan tempalate mobile bawaan blogger dengan setting seperti ini:

Settingan itu pula yang harus diterapkan jika Anda menggunakan 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 selesai membuat 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 kode berikut ini di bagian atas kode template:

<meta expr:content='data:blog.isMobile ? &quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0&quot; : &quot;width=1100&quot;' name='viewport'/>

3. Hapus kode di atas dan ganti dengan kode 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 kode berikut ini yang ada di bawah kode <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 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;}

6. Temukan kode berikut ini di bawah kode <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 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);
}

7. Tambahkan kode berikut ini di bawah kode tadi:

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

8. Copas kode berikut ini 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;}
}

9. Save! Simpan Template.

Demikian Cara Membuat Template Blog Bawaan Blogger menjadi Responsive Mobile Friendly.*