Cara Membuat Template Blogspot Responsive - 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.
 |
| Contoh blog responsive |
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.
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 Responsive .
ConversionConversion EmoticonEmoticon