Cara Membuat Template Default Blogger Menjadi Responsive

Baca Juga

Cara Membuat Template Default Blogger Menjadi Responsive. Agar Tampilan Blog di Desktop Sama dengan di HP.

BLOGGER telah menyediakan template atau tema default atau template bawaan yang disediakan di bagian Dashboard Blogger. Kita tinggal pilih.

Untuk menerapkan tutorial Cara Membuat Template Default Blogger Menjadi Responsive ini, pilih template Sederhana (Simple).

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

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

Cara Membuat Template Default Blogger Menjadi Responsive

Kita bisa membuat 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 lalu di nonaktifkan saja dengan menekan tombol Off, lalu klik Simpan.

Langkah berikutnya adalah mulai memasukkan kode untuk meresposivekan template bawaan Blogger.

3. Klik Tema > Edit HTML

4. Cari kode 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 kode di atas dengan kode di bawah ini

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

5. Cari kode di bawah ini:

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

6. Hapus dan ganti dengan kode di bawah ini agar gambar menjadi responsive

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

7.  Copas kode 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!

Itu dia Cara Membuat Template Default Blogger Menjadi Responsive.

Katanya, template bawaan Blogger akan mendukung blog diterima AdSense. Masuk akal, sebab template bawaan Blogger sudah disetting buat AdSense, sehingga memudahkan pemasangan iklannya.

Jika tidak mau ribet dengan Cara Membuat Template Default Blogger Menjadi Responsive di atas, Anda bisa gunakan template CB Theme yang sudah dioptimalkan responsive dan SEO-nya. Silakan cek di Galeri Template.

Good Luck & Happy Blogging! (www.contohblog.com).*