January 29, 2020

Cara Membuat Template Default Blogger Menjadi Responsive

January 29, 2020

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

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

11 comments 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
  2. Sangat membantu sekali Pak.
    Saya sudah coba. Akan tetapi headernya belum ikut menjadi responsive.

    Bagaimana strateginya supaya header juga menjadi responsive?

    ReplyDelete
    Replies
    1. Itu semua sudah otomatis responsive, bisa juga pasang header responsive baru: https://www.contohblog.com/2017/01/cara-membuat-header-blogger-responsive.html

      Delete
  3. Kemaren aku coba kok gak bisa ya min, apa template bawaan blogger sekarang struktur kodenya berbeda juga

    ReplyDelete
    Replies
    1. Ini untuk tema blogger versi 2 (Simple dkk). Tema Blogger versi terbaru sudah responsive semua.

      Delete
  4. Mas, saya baru mulai buat blog, ada tutorial tentang buat garis batas untuk tema bawaan blogspot Ndak??

    ReplyDelete
    Replies
    1. Garis batas apa? Gunakan kode CSS dan HTML.

      Delete
  5. This works! Thanks a lot!

    ReplyDelete

Contact Form

Name

Email *

Message *