CB repost supaya fokus ke cara Membuat Template Bawaan Blogger Jadi Responsive atau meresponsivekan default blogger template.
Dengan trik ini, pengguna template bawaan blogger, khususnya template Simple, tidak usah bingung lagi mencari template responsive yang bebas credit link selain yang premium.
Artinya, dengan menggunakan template bawaan blogger, maka blog Anda bebas link credit, karena yang memodifikasi Anda sendiri.Tulisan Powered by Blogger atau Diberdayakan oleh Blogger boleh dihapus, boleh juga dibiarkan.
Menjadikan tampilan Blog Responsive atau Mobile Friendly dimaksudkan agar blog kita lebih mudah terindeks mesin pencari Google (SEO Friendly).
Tampilan blog responsive juga agar blog ramah pengguna (user friendly) karena mayoritas pengguna internet sekarang menggunakan HandPhone/SmartPhone atau Mobile Devices untuk internetan.
CARA #1 AKTIFKAN MOBILE TEMPLATE
Bagi blog platform Blogger, jangan khawatir soal responsive desain ini, karena Blogger milik Google ini sudah menyediakan template versi mobile.Jika Anda menggunakan templata bawaan blogger, misalnya template Simple, aktifkan saja versi mobilenya dengan cara Template > klik Gear > Choose Mobile template, seperti pada gambar di bawah ini:
Save!
CARA #2 GUNAKAN TEMPLATE RESPONSIVE
Jika Anda menggunakan template responsive (responsive blogger template), maka setting di atas tidak berlaku, melainkan yang disetting begini: pilih "No. Show desktop template on mobile devices".
CARA #3 RESPONSIVE-KAN TEMPLATE BAWAAN BLOGGER
Jika Anda bersikukuh menggunakan template bawaan blogger, namun ingin menjadikannya sebagai template responsive, maka lakukan langkah edit atau modifikasi berikut ini, seperti dishare oleh Kompi Ajaib 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:
Cara Membuat Template Bawaan Blogger Jadi Responsive
1. Nonaktifkan Navbar BloggerKlik Layout (Tata Tetak) > Edit Gadget Navbar. Pilih option OFF untuk menonaktifkan navbar.
2.Membuat Gambar Postingan Jadi ReponsiveCari 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!