Rabu, Juni 29, 2016

Cara Membuat Template Sederhana Bawaan Blogger Menjadi Responsiv

Template yang responsive merupakan salah satu syarat agar blog kita ramah pengguna terutama untuk pengunjung yang menggunakan perangkat mobile. Untuk itu sekalipun kita menggunakan template asli bawaan blogger, tetapi sangat dianjurkan untuk membuatnya menjadi template yang responsive. Dan artikel ini adalah panduan cara membuat template asli bawaan blogger menjadi full responsive untuk desktop dan mobile.

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 silahkan 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


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.

1 comments so far

Silahkan berkomentar dengan sopan dan tidak meninggalkan link aktip.

Terima Kasih.

EmoticonEmoticon