Search This Blog

Cara Membuat Template Blogspot Responsive

  • Saturday, June 16, 2018 at 10:44:00 AM
  • 0 Comments
  • Views
Sudah lama aku ingin sekali membuat template blogspot yang responsive dengan pengetahuanku mengedit template yang sedikit. Kemarin aku menemukan sebuah tutorial yang bisa diterapkan di blog aku, tutorialnya berasal dari Blog Romeltea.

Pemasangan
Pertama hapus kode navbar bawaan blogspot. Cari dan hapus kode di bawah ini.
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
</b:includable>
</b:widget>
</b:section>
Di bagian CSS style cari kode berikut ini.
.post-body img, .post-body .tr-caption-container {
}
 Ganti dengan kode di bawah ini.
.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}
Cari dan ganti 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>
Ganti dengan hanya kode berikut ini.
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
Untuk kode responsive nya simpan kode berikut di atas kode </head>. Untuk CSS nya di sesuaikan dengan kode dari blog kamu.
<style type='text/css'>
@media screen and (max-width:1024px){}
@media screen and (max-width:800px){}
@media screen and (max-width: 603px){}
@media screen and (max-width:400px){}
</style>
Selanjutnya nonaktifkan setting untuk mobile view bawaan blogspot. Di bagian Theme klik setting di bagian Mobile lalu nonaktifkan dengan memilih No.
Mobile setting
Simpan template.
No comments
No comments

Post a Comment