Cara Mudah Membuat Template Bawaan Blogger Responsive, Template responsive merupakan syarat yang harus di miliki pengguna blogger saat ini di karenakan perkembangan teknologi yang semakin pesat dan semakin banyak pula Gadget baru dengan berbagai merk dan ukuran bermunculan maka di harus kan bagi pengguna Blogger untuk mengubah tampilan untuk artikel nya secara responsive agar dapat tayang di setiap model dan ukuran PC maupun Smartphone. Saat ini memang banyak sekali template gratis, keren dan responsive yang di bagi - bagikan namun bagaimanapun bagus dan menariknya template yang kita download tetap saja buatan orang lain bukan..? Kali ini saya akan bagikan cara mudah membuat template bawaan blogger jadi responsive. Cara ini saya dapatkan setelah lama mencari - cari dan mencoba setiap postingan dari para ahli profesional blogger, akhirnya saya dapatkan dari blognya Mas Adhi Suryadi dengan alamat www.kompiajaib.com. Cara ini telah saya coba, Anda dapat lihat tampilan pada Smartpone dengan alamat blog saya yang ini dan yang lain seperti http://myreseppraktis.blogspot.com dan http://macamragammanfaat.blogspot.com. Warna dapat Anda sesuaikan dengan keinginan Anda, begitu juga dengan ukuran font dan modelnya.
Baiklah untuk tidak panjang lebar berikut ini saya akan jelaskan langkah - langkahnya, disini kita akan menambahkan kode - kode html pada template blog, yaitu sebagai berikut :
1. Masuk ke Draft Blogger
2. Non aktifkan dulu Navbar Blogger, dengan masuk ke Tata Letak, lihat kebagian atas Navbar lalu buka pilih OFF.
3. Selanjutnya Klik Template > Edit Html
3. Lalu cari kode di bawah ini
.post-body img, .post-body .tr-caption-container {padding: $(image.border.large.size);}
Setelah itu ganti kode diatas dengan kode di bawah ini
.post-body img, .post-body .tr-caption-container {padding: 0;width:auto;max-width:100%;height:auto;}
Langkah selanjutnya, silahkan cari kode berikut 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>
Lalu ganti lagi dengan kode di bawah ini
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
Langkah terakhir, silahkan simpan kode dibawah ini diatas </head>
<style type='text/css'>@media screen and (max-width:1024px){body,.content-outer, .content-fauxcolumn-outer, .region-inner {width:100%;min-width:100%;padding:0}body .navbar {height: 0;}.footer-inner {padding: 30px 0px;}}@media screen and (max-width: 603px){.main-inner .columns {padding-right: 0;}.main-inner .column-right-outer {width: 100%;margin-right: 0;}}</style>
Pastikan Anda lakukan langkah diatas dengan benar, lalu silahkan Anda lihat pratinjau terlebih dahulu untuk memastikan template Anda tidak rusak, jika semua sudah benar, silahkan di Simpan Template Anda. Sekarang template Anda telah memiliki fitur responsive, selamat memcoba ya semoga berhasil.
