Cara Membuat Template Default Blogger Menjadi Responsive

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

Cara Membuat Template Default Blogger Menjadi Responsive


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).

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.

nonaktifkan navbar blogger


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

Thanks for reading Cara Membuat Template Default Blogger Menjadi Responsive | Labels: Desain Blog, Template Blog edit this post
Author Image

About CB Blogger
Contoh Blog --sebut saja CB -- Panduan Blogging untuk Pemula - Tips SEO, Desain, Template SEO Friendly, Cara Membuat Blogger Keren, Google Adsense, dll. Subscribe! to get update via email.

1 komentar on Cara Membuat Template Default Blogger Menjadi Responsive

  1. Contoh Blog memang menjadi rujukan para newbie seperti saya.
    Sekarang tampilannya lebih menawan lagi, salam sukses.
    Makasih sudah berbagi

    ReplyDelete

Contact Form

Name

Email *

Message *

Back To Top