Cara mengedit template blogger biar jadi responsive

Bagi kamu yang sering utak atik template blog pasti sudah tahu secara keseluruhan kalau template default bawaan blogger itu belum responsive . Nah artikel kali ini akan berbagi sedikit pengalaman tentang tata cara mengubah template bawaan default blogger kita edit untuk menjadikannya responsive.

Referensi ini saya dapat dari blog kompi ajaib dan sudah saya terapkan dan memang hasilnya joss.
caranya pun tidak begitu sulit hanya menerapkan 3 langkah mudah maka secara lansung template bawaan blogger kamu berubah jadi responsive.

Cara mengedit template blogger biar jadi  responsive

Kegunaan jika template responsive.
Goolge dan mesin pencari lainnya  seperti yahoo dan bing  sangat menyarankan template harus responsive.  mengingat jaman sekarang visitor paling banyak adalah melalui gadget sekitar 65% dari visitor yang menggunakan layar lebar seperti komputer maka dari itu template yang responsive sangat di tuntut untuk kita sebagai blogger.

Baik 3 langkah mudah mengubah template jadi responsive seperti berikut :
Login keblogger kemudian pada template klik edit html kemudian cari kode ini

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

Ganti kode tersebut dengan kode dibawah ini

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

Langka selanjutnya masih dalam posisi edit html liat ada kode di bawah <head> seperti ini
kurang lebih modelnya seperti 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 kode tersebut dengan ini

<meta content='width=device-width,initial-scale=1.0,
minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
 
Langkah terakhir kamu cari kode </head> kemudian kode dibawah kamu simpan 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>

Sekarang save template dan test template kamu .untuk menguji apakah template kamu sudah responsive kamu bisa baca artikel saya yang
Cara mengetahui template web atau blog yang responsive

Makasih dan jika ada pertanyaan jangan sungkan-sungkan untuk bertanya.

Artikel Terkait

Silahkan berkomentar sesuai dengan isi yang dikandung dari artikel ini . untuk menyisipkan link aktif atau backlink bisa menghubugi saya via form contact diatas .
EmoticonEmoticon