Cara Membuat Template Default Blogger Menjadi Responsive

Cara Membuat Template Default Blogger Menjadi Responsive

Blogger telah menyediakan template default atau template bawaan yang disediakan di bagian Dashboard Blogger. Kita tinggal pilih. Untuk menerapkan tutorial ini, pilih template Sederhana (Simple).

Cara Membuat Template Default Blogger Menjadi Responsive

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.

mengaktifkan template mobile

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.
3. 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.*

Thanks for reading Cara Membuat Template Default Blogger Menjadi Responsive | Labels: Blogging, Desain Blog, Template Blog edit this post
0 Komentar untuk "Cara Membuat Template Default Blogger Menjadi Responsive"

1. Komentar spam, link aktif, dan alamat blog tidak akan muncul.
2. Tidak semua pertanyaan sempat/bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *