CARA RESPONSIVE-KAN TEMPLATE BAWAAN BLOGGER

menggunakan template bawaan blogger, namun ingin menjadikannya sebagai template responsive, maka lakukan langkah edit atau modifikasi berikut ini, seperti dishare oleh saya yang banyak direpost juga oleh blogger lain --sebagian tidak mencantumkan sumber :)



Anggap saja Anda sudah membuat blog baru dengan memilih pilih template Simple seperti ini:
Nah, template tersebut kita akan jadikan responsive alias mobile  lainnya). Cara me-responsive-kannya sebagi berikut.
Cara Membuat Template Bawaan Blogger Jadi Responsive
1. Nonaktifkan Navbar Blogger
Klik Layout (Tata Tetak) > Edit Gadget Navbar. Pilih option OFF untuk menonaktifkan navbar.
2. Membuat Gambar Postingan Jadi Reponsive
Cari kode di bawah ini:
.post-body img, .post-body .tr-caption-container { padding: $(image.border.large.size); }
Ganti kode tersebut dengan kode di bawah ini:.post-body img, .post-body .tr-caption-container {padding: 0;width:auto;max-width:100%;height:auto;}

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




Ganti dengan kode di bawah ini


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

4. Simpan kode CSS Responsive 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>


5. Save! Simpan Template!