Cara membuat template sederhana bawaan blogger menjadi responsiv

Template yang responsive merupakan salah satu syarat agar blog kita ramah dengan mesin telusur, untuk itu sekalipun kita menggunakan template asli bawaan blogger, tetapi sangat dianjurkan untuk membuatnya menjadi template yang responsive.

Cara membuat template bawaan blogger menjadi responsiv


Pertama masuk ke dasboard blogger anda lalu di menu setelan klik tata letak lalu edit dibagian navbar lalu pilih off seperti yang ditunjukan oleh gambar dibawah ini

Cara membuat template sederhana bawaan blogger menjadi responsiv

Dan terakhir klik simpan.

Langkah kedua masuk lagi ke menu setelan blog lalu pilih template dan selajutnya pilih edit HTML, lalu cari code berikut:

.post-body img, .post-body .tr-caption-container {
  padding: $(image.border.large.size);
}

Kalau sudah ketemu silahkan ganti kode tersebut dengan kode berikut:

.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}

Langkah ketiga cari kode berikut:

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

Kalau sudah ketemu silahkan ganti dengan kode berikut:

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

Langkah ke empat silahkan copy paste kode berikut diatas kode </head>

<style type='text/css'>
@media screen and (max-width:1024px){
body,.content-outer, .content-fauxcolumn-outer, .region-inner {width: 100%!important;min-width:100%!important;padding:0!important}
body .navbar {height: 0!important;}
.footer-inner {padding: 30px 0px!important;}
}
@media screen and (max-width: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;}
}
</style>

Atau agar lebih jelas silahkan perhatikan kode yang di lingkar oleh garis merah pada gambar dibawah ini


Cara membuat template sederhana bawaan blogger menjadi responsiv

Dan langkah terakhir silahkan simpan template, maka template bawaan blogger sobat sudah menjadi template responsiv.

Itulah Cara membuat template sederhana bawaan blogger menjadi responsiv, semoga bermanfaat.

Sumber Referensi: kompiajaib.com

Related Post:

1 komentar so far

Silahkan berkomentar dengan sopan dan tidak meninggalkan link aktip.

Terima Kasih.

EmoticonEmoticon