Cara merubah templet bawaan blogger menjadi responsive

Seperti yang kita ketahui bahwaTemplatte bawaan blogger belum tergolong templatte Responsive, Templet blogger masih menggunakan sistim mobile Unruk ukuran HP. Sedangkan Google sendiri yang notabene merupakan simbahe para blogger menganjurkan untuk menggunakan templatte bawaan blogger.

Bagi anda yang menggunakan templatte bawaan blogger, mungkin sebagian ada yang menginginkan templattenya menjadi responsive walaupun masih menggunakan templatte bawaan blogger. Anda takperlu bingungung untuk merubah templatte bawaan blogger menjadi responsive, hanya memerlukan coding tambahan sedikit Silahkan bisa anda mengikuti langkah-langkahnya berikut ini :

Untuk langkah yang 1.

Nonaktifkan Navbar blogger, Silahkan anda masuk ke layout atau tata letak kemudian edit gadget navbar, pilih option OFF untuk menonaktifkan Navbar.

Untuk langkah yang ke 2.

Membuat Gambar posting menjadi Responsive Silahkan Cari Kode Seprti yang tertera dibawah ini .

 .post-body img, .post-body .tr-caption-container {
  padding: $(image.border.large.size);
}

Kemudian Silahkan ganti kode di atas dengan kode di bawah ini ;

.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}

Untuk langkah ke 3

Silahkan cari kode seperti di bawah ini ;

 <meta expr:content='data:blog.isMobile         ? &quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0&quot;         : &quot;width=1100&quot;' name='viewport'/>

Kemudian 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'/>

Kemudian untuk langkah yang ke 4.

Silahkan kopi kode di bawah ini diatas 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>

Selesai sudah kini templatte anda yang berasal dari Bawaan blogger sudah menjadi Responsive Moga berhasil.

Sebagai contoh Templatte bawaan blogger yang sudah menjadi responsive Anda bisa langsung lihat demonya di bawah ini.

Testing DEMO

Anda baru saja membaca artikel tentang - Cara merubah templet bawaan blogger menjadi responsive. Silahkan baca artikel berikutnya Tentang - Next - Jangan lupa g+1 / fb / twit :)