Cara Agar Template Default Blog Menjadi Responsive

Untuk merubah template default blog bawaan menjadi responsive sebenarnya bukan hal yang sulit dilakukan oleh seorang blogger jika kita mengetahui cara melakukannya, seperti yang kita ketahui bahwa blogger telah menyediakan template default atau template bawaan yang disediakan dibagian Dashboard Blogger.

Nah dari sana kita tinggal pilih mana yang akan kita gunakan. Untuk menerapkan tutorial ini, saya sarankan sebaiknya pilih template sederhana saja (simple).

Template tersebut sa banyak berbagai macam pilihan, diantaranya mulai dari template Sederhana, Template Dinamis, Jendela Gambar, Pt Keren Sekali, Tans Air, Kelembutan, dan Perjalanan.

Template-template tersebut memiliki struktur yang hampir sama. Namun perlu anda ketahui, template yang disediakan oleh pihak Blogger tidak responsive, sehingga kita yang menggunakan templa tersebut harus mengaktifkan template mobile bawaan Blogger untuk akses seluler.

Cara Agar Template Default Blogger Menjadi Responsive

Kita bisa membuat twmplate bawaan blogger ini menjadi responsive. Nanti yang dicentang dalam gambar diatas adalah "No. Show desktop templatw on devices".

1. Pilih atau pasang template Simple

2. Klik Tata Letak > di bagian Navbar klik edit lalu di nonaktifkan saja dengan menekan tombol Off, lalu klik Simpan.

3. Tema > Edit HTML

4. Cari kode di bawah ini

<b:if cond='data:blog.isMobile'><meta content='wdth=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 silahkan anda ganti semua kode diatas dengan kode di bawah ini

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

5. Lalu anda cari kode di bawah ini

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

6. Lalu anda hapus dan ganti dengan kode di bawah ini agar gambar menjadi responseve

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

7. Copas kode berikut ini di atas kode </head>

<style type='text/css'>
@media screen and (max-width:1024px){
body,.content-uter, .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. Lalu Simpan.

Demikian tutorial diatas tentang cara agar template default blogger menjadi responsive, semoga apa yang draplan tuliskan di artikel kali ini bermanfaat buat anda semuanya... Salam Sukses !!