VPS Murah

Cara Mengubah Template Default Blogger Menjadi Responsive

Cara mengubah template default Blogger menjadi responsive – Template default blogger tampilannya memang sangat simple dan fast loading, namun sayangnya belum responsive seperti yang disarankan oleh Google.

Agar template delauft blogger menjadi mobile friendly sesuai rekomendasi Google, kita harus mengubahnya menjadi template responsive dengan cara mengganti dan menambahkan kode pada template default.  Caranya cukup mudah, sobat tinggal mengikuti langkah-langkah berikut ini.

Cara mengubah template default Blogger menjadi responsive

1. Nonaktifkan Navbar

Login ke dasbor blogger, pilih tata letak kemudian edit gadget navbar. Centang off pada opsi paling bawah.

Cara Mengubah Template Default Blogger Menjadi Resposive

2. Ganti Kode HTML

Klik template, edit HTML kemudian cari kode berikut

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

Agar lebih mudah, silakan lakukan pencarian kode di atas dengan menekan tombol CTRL+F. Setelah ketemu, ganti dengan kode di bawah ini.

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

Cari lagi kode di bawah ini

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

Lalu ganti dengan kode berikut

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

3. Tambahkan Kode HTML

Langkah berikutnya, silakan cari kode </head>, kemudian tambahkan kode di bawah ini tepat 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>

Kalau sudah selesai, jangan lupa klik Simpan. Untuk melihat hasilnya apakah template bawaan blogger sudah berubah menjadi renponsive atau belum, silakan lihat blog kemudian restore down  web browser.

Demikian cara mengubah template default blogger menjadi rensponsive, semoga berguna. Terima kasih.

Baca juga : Cara mengubah ukuran teks header (judul blog) pada blogspot

Bagikan yuk!

Tinggalkan Komentar