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.
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).
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.
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
Hapus dan ganti lagi semua kode di atas dengan kode di bawah ini
5. Cari kode di bawah ini:
6. Hapus dan ganti dengan kode di bawah ini agar gambar menjadi responsive
7. Copas kode berikut ini di atas kode </head>
8. Simpan!
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).*
Good Luck & Happy Blogging! (www.contohblog.com).*
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
Contoh Blog memang menjadi rujukan para newbie seperti saya.
ReplyDeleteSekarang tampilannya lebih menawan lagi, salam sukses.
Makasih sudah berbagi
Amin, semoga demikian, sama-sama....
DeleteSangat membantu sekali Pak.
ReplyDeleteSaya sudah coba. Akan tetapi headernya belum ikut menjadi responsive.
Bagaimana strateginya supaya header juga menjadi responsive?
Itu semua sudah otomatis responsive, bisa juga pasang header responsive baru: https://www.contohblog.com/2017/01/cara-membuat-header-blogger-responsive.html
DeleteKemaren aku coba kok gak bisa ya min, apa template bawaan blogger sekarang struktur kodenya berbeda juga
ReplyDeleteIni untuk tema blogger versi 2 (Simple dkk). Tema Blogger versi terbaru sudah responsive semua.
DeleteMas, saya baru mulai buat blog, ada tutorial tentang buat garis batas untuk tema bawaan blogspot Ndak??
ReplyDeleteGaris batas apa? Gunakan kode CSS dan HTML.
DeleteThis works! Thanks a lot!
ReplyDeleteYou are welcome. Glad to help.
DeleteWah nice info gan dan sangat bermanfaat Berita Bagus
ReplyDelete