Cara Edit Template Bawaan Blogger Jadi Responsive
Sebenarnya saya juga tidak tau bahasa yang lebih mudah dimengerti untuk judul posting ini apa. Tapi yang jelas posting ini akan menjelaskan bagaimana : Cara Edit Template Bawaan Blogger Jadi Responsive, Cara membuat Template Blogger Jadi Responsive, Edit template jadi responsive, edit blogger jadi responsive, cara ubah template blog jadi responsive. Inti dan tujuan semuanya itu hampir sama, hanya beda kata-katanya saja.
Ketika kita membuat blog di blogger, tentunya blogger telah menyediakan beberapa template yang ada di dibagian : Blogger > Template. Disana telah banyak terdapat beberapa pilihan template yang dapat digunakan secara gratis. Untuk cara mengubah template tersebut bisa dilihat pada posting Ganti Template Standar bawaan blogger. Jika diperhatikan, template tersebut masih sangat standar dan jika ingin tampil beda, tentunya masih banyak pekerjaan yang harus dilakukan untuk untuk edit template bawaan tersebut.
Posting kali ini akan menjelaskan bagaiaman Cara Edit Template Bawaan Blogger Jadi Responsive, berikut tutorial edit template tersebut:
1. Pastikan telah login ke blogger
2. Buka Template > Edit html
3. Cari kode dibawah ini atau yang mirip seperti dibawah ini
Ketika kita membuat blog di blogger, tentunya blogger telah menyediakan beberapa template yang ada di dibagian : Blogger > Template. Disana telah banyak terdapat beberapa pilihan template yang dapat digunakan secara gratis. Untuk cara mengubah template tersebut bisa dilihat pada posting Ganti Template Standar bawaan blogger. Jika diperhatikan, template tersebut masih sangat standar dan jika ingin tampil beda, tentunya masih banyak pekerjaan yang harus dilakukan untuk untuk edit template bawaan tersebut.
Posting kali ini akan menjelaskan bagaiaman Cara Edit Template Bawaan Blogger Jadi Responsive, berikut tutorial edit template tersebut:
1. Pastikan telah login ke blogger
2. Buka Template > Edit html
3. Cari kode dibawah ini atau yang mirip seperti dibawah ini
.post-body img, .post-body .tr-inscription holder {4. Ganti kode tersebut dengan kode dibawah
cushioning: $(image.border.large.size)
}
.post-body img, .post-body .tr-heading compartment {5. Tambahkan kode berikut dibawah kode <head>
cushioning: 0;
width:auto;
max-width:100%;
height:auto;
}
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>6. Cari kode ]]> </b:skin> tambahkan kode berikut diatasnya :
@media screen and (max-width:1024px){7. Simpan dan lihat hasilnya..
body,.content-external, .content-fauxcolumn-external, .district inward {width: 100%!important;min-width:100%!important;padding:0!important}
body .navbar {height: 0!important;}
.footer-internal {padding: 30px 0px!important;}
}
@media screen and (max-width: 603px){
.primary inward .segments {padding-right: 0!important;}
.primary inward .segment right-external {width: 100%!important;margin-privilege: 0!important;}
}