Untuk merubah template blogspot menjadi responsive sebenarnya caranya cukup simple. Tidak diperlukan kode-kode yang aneh-aneh atau kode yang njlimet. Tentu anda juga tahu alasan kenapa template website layak dirubah menjadi responsive.
Seiring dengan berkembangnya dunia teknologi termasuk didalamnya dalam dunia Smartphone, jika tampilan website kita tidak menyesuaikan pada tampilan smartphone, tentu saja pengunjung lama-kelamaan akan beralih ke website yang tampilannya sudah menyesuaikan dengan media yang digunakan untuk mengaksesnya.
Tabiat orang itu pengennya dimanjakan, apa maksudnya? Jika website anda yang belum responsive dikunjungi katakanlah si A. Si A ini tidak mungkin bisa membaca secara langsung dari artikel pada website anda, karena website anda belum responsive, maka tampilan akan diperkecil. Mau tidak mau pengunjung harus memperbesar tampilan website anda. Dalam hal ini bisa dikatakan tidak user friendly.
Nah untuk memanjakan pengunjung website anda, sudah selayaknya website anda langsung bisa dibaca manakala pengunjung klik website anda. Salah satu caranya ya harus merubah template yang anda gunakan menjadi responsive. Untuk itu silahkan simak cara merubah template blogspot menjadi responsive dibawah ini.
Cara mudah merubah template blogspot menjadi Responsive
Bagi anda yang pernah membeli template blogspot tetapi belum responsive, atau anda suka dengan template tertentu tetapi belum responsive, mungkin beberapa poin ini bisa anda coba praktekkan untuk merubah template tersebut menjadi responsive.
1. Meta Viewport
Silahkan tambahkan kode dibawah ini :
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
Catatan : Kode diatas dipasang diantara tag <head> dan </head>
2. Image responsive code
Silahkan tambahkan kode CSS dibawah ini :
img{display-block; max-width:100%;height:auto;}
Catatan : Kode diatas dipasang diantara tag <b:skin><![CDATA[ dan ]]></b:skin>
3. width dirubah menjadi max-width
Silahkan anda cari #outer-wrapper atau #outer dan cari properti "width", kemudian rubah menjadi "max-width"
4. @media responsive
ini digunakan untuk menyesuaikan tampilan pada media seperti desktop, IPAD, Smartphone, dll.
Biasanya yang dipakai adalah seperti beberapa dibawah ini :
@media(max-width:1200px){
CSS Code
}
@media(max-width:768px){
CSS Code
}
@media(max-width:480px){
CSS Code
}
@media(max-width:360px){
CSS Code
}
Pada huruf merah diatas yaitu pada kata CSS Code, adalah tempat untuk meletakkan CSS kodenya.
Minimal ada 4 poin penting untuk merubah template blogspot menjadi responsive. Dan tentunya kode suatu template sangatlah berjibun, ratusan, ribuan dan bahkan jutaan dengan kode-kode yang berbeda. 4 poin diatas hanyalah dasarnya saja, silahkan sesuaikan dengan template yang akan anda rubah menjadi responsive.
1. Meta Viewport
Silahkan tambahkan kode dibawah ini :
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
Catatan : Kode diatas dipasang diantara tag <head> dan </head>
2. Image responsive code
Silahkan tambahkan kode CSS dibawah ini :
img{display-block; max-width:100%;height:auto;}
Catatan : Kode diatas dipasang diantara tag <b:skin><![CDATA[ dan ]]></b:skin>
3. width dirubah menjadi max-width
Silahkan anda cari #outer-wrapper atau #outer dan cari properti "width", kemudian rubah menjadi "max-width"
4. @media responsive
ini digunakan untuk menyesuaikan tampilan pada media seperti desktop, IPAD, Smartphone, dll.
Biasanya yang dipakai adalah seperti beberapa dibawah ini :
@media(max-width:1200px){
CSS Code
}
@media(max-width:768px){
CSS Code
}
@media(max-width:480px){
CSS Code
}
@media(max-width:360px){
CSS Code
}
Pada huruf merah diatas yaitu pada kata CSS Code, adalah tempat untuk meletakkan CSS kodenya.
Minimal ada 4 poin penting untuk merubah template blogspot menjadi responsive. Dan tentunya kode suatu template sangatlah berjibun, ratusan, ribuan dan bahkan jutaan dengan kode-kode yang berbeda. 4 poin diatas hanyalah dasarnya saja, silahkan sesuaikan dengan template yang akan anda rubah menjadi responsive.
Tidak ada komentar:
Posting Komentar