Cara Mendesain Template Blog Responsive Mobile Friendly

ilustrasi (Foto: pexels.com)

BangSiagian.id - Saat memilih template atau tema blog harus memilih template yang mobile friendly, karena saat ini kebanyakan orang mengakses internet melalui perangkat mobile.

Cara untuk Membuat desain Template Blog Responsive Mobile Friendly adalah mengubah template bawaan Blogger menjadi ramah seluler atau mobile friendly.


Cara Mendesain Template Blog Responsive Mobile Friendly


1. Buatlah Blog Baru

2. Pilih Template Simple / Sederhana

Template

3. Non aktifkan template mobile bawaan blogger dengan setting seperti ini

Pada tahap selanjutnya harus dilakukan dengan hati-hati dan saksama.

4. Klik Tema kemudian Edit HTML

5. Carilah 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'/>

6. Hapus kode di atas kemudian ganti dengan kode berikut ini

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

7.Carilah kode yang ada di bawah kode kemudian hapus kode tersebut.

<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'/>

8. Copy dan paste kode berikut ini. ( Terletak di atas kode ]]></b:skin>)

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

9. Temukan kode berikut ini. (Terletak 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);
}

10. Tambahkan kode berikut ini di bawah kode di atas (no. 9)

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

11. Copy dan paste 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;}
}

12. Simpan template, buat artikel pada blog kemudian lihat hasilnya.

Demikian cara mendesain template blog responsive mobile friendly. Silakan langsung dipraktikkan dan semoga berhasil.

Share This