Cara Membuat Template Blogspot 100% Responsive Pada Semua Device

Cara Membuat Template Blogspot 100% Responsive Pada Semua Device - Mengapa kita perlu mengembangkan suatu blog dengan sistem Responsive? Jawabannya adalah ya, sangat diperlukan. karena seiring perkembangan teknologi saat ini, setiap orang mengakses sebuah internet hanya cukup dengan melalui alat genggamnya seperti smartphone atau tablet. maka dari itu kita sebagai pengembang web/blog perlu menambahkan beberapa elemen-elemen penting responsive agar orang yang mengakses web/blog kita menjadi lebih mudah dan tak perlu ribet scroll kanan kiri.

Cara Membuat Template Blogspot 100% Responsive Pada Semua Device

Untuk mengetahui apakah web/blog anda sudah responsive atau belum, anda bisa kunjungi situs dibawah ini ya!


Di atas adalah situs untuk mengecek apakah web/blog anda sudah responsive atau belum, jadi ketahuan apabila belum responsive web/blog anda akan terlihat masih muncul scroll kanan kiri.
Baca Juga : Saldo GA bertanda minus, apa penyebabnya cek disini!

Berikut cara membuat template blogspot 100% responsive pada semua device, yuk disimak!

1. Tambahkan meta tag dibawah <head>

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

2. Beberapa ukuran layar tiap device yang perlu kita ketahui :

Ukuran lebar layar : 240px, 320px, 375px, 384px, 414px, 480px, 568px, 600px, 667px, 736px, 768px, 1024px.

3. Analisa Elemen Template blog

karena setiap template memiliki elemen template yang berbeda-beda, maka dari itu kita perlu memahami beberapa elemen berikut :

body{}
#outer-wrapper{}
#header-wrapper
#content-wrapper{}
#main-wrapper{}
#sidebar-wrapper{}
#footer-wrapper{}

lalu silahkan anda isikan ukuran-ukuran sesuai elemen menjadi seperti dibawah ini :

body{margin:0 auto} tanpa ukuran
#outer-wrapper{width:970px;}
#header-wrapper{width:960px;}
#content-wrapper{width:950px;}
#main-wrapper{width:620px;}
#sidebar-wrapper{width:300px;}
#footer-wrapper{width:970px;}

4. Taruh kode CSS dibawah ini dan diletakkan diatas </b:skin>.

@media screen and (max-width:768px)
{pengaturan ukuran elemen}

5. Atur ulang lebar elemen template masing-masing :

@media screen and (max-width:768px) and (min-width:761px)
{}
@media screen and (max-width:736px) and (min-width:670px)
{}
@media screen and (max-width:667px) and (min-width:605px)
{}
@media screen and (max-width:600px) and (min-width:570px)
{}
@media screen and (max-width:568px) and (min-width:485px)
{}
@media screen and (max-width:480px) and (min-width:415px)
{}
@media screen and (max-width:414px) and (min-width:385px)
{}
@media screen and (max-width:384px) and (min-width:376px)
{}
@media screen and (max-width:375px) and (min-width:325px)
{}
@media screen and (max-width:320px) and (min-width:245px)
{}
@media screen and (max-width:240px)
{}

6. Selesai

Demikian artikel mengenai Cara Membuat Template Blogspot 100% Responsive Pada Semua Device semoga bermanfaat ya!

4 Responses to "Cara Membuat Template Blogspot 100% Responsive Pada Semua Device"

Peraturan dalam berkomentar !
--------------------------------------------
1. Berkomentarlah yang relevan sesuai topik yang dibahas diatas.
2. Gunakan bahasa yang baik dan sopan.
3. Tidak Meninggalkan Link aktif.
4. Tidak berkomentar mengandung SPAM

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel