Cara Menciptakan Template Default Blog Menjadi Responsive

– Cara menciptakan Templat default blog bawaan menjadi responsive, Blogger telah menyediakan template default atau template bawaan yang disediakan di bab Dashboard Blogger. Kita tinggal pilih. Untuk menerapkan tutorial ini, pilih template Sederhana (Simple).



Template tersebut banyak sekali macam, mulai dari template Sederhana, Tampilan Dinamis, Jendela Gambar, PT Keren Sekali, Tanda Air, Kelembutan, dan Perjalanan.

Tempate-template tersebut mempunyai struktur yang hampir sama. Namun, template yang disediakan oleh pihak Blogger tidak responsive, sehingga kita harus mengaktifkan template mobile bawaan blogger untuk susukan seluler.

Cara menciptakan Templat default blog bawaan menjadi responsive Cara Membuat Template Default Blog Menjadi Responsive


Cara Membuat Template Default Blogger Menjadi Responsive

Kita dapat menciptakan template bawaan Blogger ini menjadi responsive. Nanti yang dicentang dalam gambar di atasa adalah  “No. Show desktop template on mobile devices”.

1. Pilih atau pasang template Simple

2. Klik Tata Letak > di bagian Navbar klik edit kemudian di nonaktifkan saja dengan menekan tombol Off, kemudian klik Simpan.
3. Tema > Edit HTML

4. Cari isyarat di bawah ini


<b:if cond=’data:blog.isMobile’>
<meta content=’width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0′ name=’viewport’/>
<b:else/>
<meta content=’width=1100′ name=’viewport’/>
</b:if>


Hapus dan ganti lagi semua isyarat di atas dengan isyarat di bawah ini


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



5. Cari isyarat di bawah ini:


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


6. Hapus dan ganti dengan isyarat di bawah ini semoga gambar menjadi responsive


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


7.  Copas isyarat berikut ini di atas 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>


8. Simpan!


Nah itulah dia Cara Membuat Template Default Blogger Menjadi Responsive, semoga apa yang sudah aku tuliskan di blog ini bermanfaat untuk anda semuanya…