belajar membuat template blogger responsive
diminggu pagi ini saya mau menuliskan pengalaman saya pada edit template blogger khusus nya pada css di blog ini agar template blogger responsive atau pas di semua layar , mungkin sudah banyak yang membahas tetapi biarlah buat catatan saya sendiri biar tidak search lagi hanya tinggal membuka blog saya :)
pada dasar nya sih template blogger yang sekarang ini sudah banyak yang sudah menjadi mendukung di semua layar tetapi bila sudah sayang sama template nya and nggak mau diganti lagi tapi belu responsive ya sudah lah edit saja cuma menambah css saja tidak merubah struktur kode template.
pertama tama yang harus diperhatikan adalah kode css yang mengatur lebar layar , ditemplate blogger untuk mengatur lebar layar yang standar adalah
#main-wrapper { . . . }
#sidebar-wrapper { . . . }
#header-wrapper{ . . . }
#footer-wrapper { . . . }
tapi mungkin saja ditemplate lain berbeda beda tapi pada template saya ini yang mengatur lebar layar yang standar adalah ke empat kode css tersebut
dan ini ada beberapa ukuran layar pada hape ataupun ipad yang sudah saya coba css nya
/* Smartphones (portrait dan landscape) ----------- */
@media only screen and (min-device-width : 320px) { /* isi Css anda */ }
/* Smartphones (landscape) ----------- */
@media only screen and (min--width : 321px) { /* isi Css anda */ }
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {/* isi Css anda */}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* isi Css anda */ }
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* isi Css anda */ }
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {/* isi Css anda */ }
/* Media untuk layar komputer atau laptop ----------- */
@media only screen and (min-width : 1224px) { /* isi Css anda */ }
/* layar besar ----------- */
@media only screen and (min-width : 1824px) { /* isi Css anda */ }
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* isi Css anda */}
dengan syarat template blogger anda sudah ada kode seperti dibawah ini dibawah <head>
<meta content='text/html;charset=UTF-8' http-equiv='Content-Type'/><meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
kita contoh kan pada tampilan hape saya yang memiliki tampilan layar 300px kita akan membuat template blogger pas pada layar tersebut pada css anda silahkan tambah kan kode untuk kode css yang template standar biasanya diantara b:skin kalo yang sudah di modif silahkan simpan setelah kode <style type='text/css'> atau sebelum </style> sama saja lah yang penting penyimpanan nya diantara dua kode itu dan tidak membuat anda pusing yang gampang diingat saja nyimpen nya
untuk kode nya yang akan kita masukkan ini
@media only screen and (min-width : 300px) { /* isi Css anda */ }
kita akan mencoba memasukkan css nya seperti ini
@media only screen and (min-width : 300px) {
#main-wrapper { width:100% }
#sidebar-wrapper {width:100% }
#header-wrapper{ width:100% }
#footer-wrapper { width:100% }
}
saya lebih menyukai memakai persen karena sudah pasti didalam bayangan saya sendiri hasil lebar nya segitu misal width:100% maka tampilan lebar nya akan sepanjang layar bila menggunakan px saya harus ngukur lagi :d
bila diartikan pada css diatas maka tampilan mulai dari header hingga footer maka akan selebar layar hape yang berukuran layar 300px silahkan sesuaikan sesuai selera anda kadang bila selebar layar tampilan nya menjadi jelek
keterangan :
- anda bisa menambahkan css apa saja kedalam media only tersebut mulai 300px sampai 1200px misal css comment atau apa aja lah
- bila di biarkan kosong seperti ini @media only screen and (min-width : 300px) { } maka css yang diambil adalah css inti nya pada tampilan tersebut
- bila ingin menghilangkan widget pada tampilan tersebut kita contoh kan anda mempunyai template blogger 3 kolom pada tampilan tersebut akan terlalu panjang bila di muat semua maka coba hilangkan salah satu widget nya dengan kode css responsive tersebut contoh nya seperti ini
@media only screen and (min-width : 300px) {
#main-wrapper { width:100% }
#sidebar-wrapper {width:100%}
#header-wrapper{ width:100% }
#footer-wrapper { width:100% }
#right-sidebar { display:none }
}
artinya diatas maka sidebar yang ada dikanan pada tampilan hape 300px akan hilang
- bila ingin merubah rubah warna pada setiap tampilan bisa saja misalkan ingin merubah rubah atau warna warni pada tampilan tertentu kita contohkan dua saja kita coba pada header agar tampilan warna nya berbuah pada tampilan tertentu
@media only screen and (min-width : 300px) {
#main-wrapper { width:100% }
#sidebar-wrapper {width:100%}
#header-wrapper{ width:100% overflow: hidden; background-color:#ffffff; }
#header-wrapper { overflow: hidden;}
#header{ float: left;}
#footer-wrapper { width:100% }
#right-sidebar { display:none }
}
@media only screen and (min-width : 520px) {
#main-wrapper { width:100% }
#sidebar-wrapper {width:100%}
#header-wrapper{ width:100% overflow: hidden; background-color:#eeeeee; }
#header-wrapper { overflow: hidden;}
#header{ float: left;}
#footer-wrapper { width:100% }
#right-sidebar { width:30% }
}
arti css diatas maka background header pada tampilan 300px akan berwarna putih dan pada tampilan 520px background nya akan berwarna abu abu
lalu silahkan belajar sendiri dengan membayangkan atau mencoba mengedit nya pada blog percobaan :)
pada dasar nya sih template blogger yang sekarang ini sudah banyak yang sudah menjadi mendukung di semua layar tetapi bila sudah sayang sama template nya and nggak mau diganti lagi tapi belu responsive ya sudah lah edit saja cuma menambah css saja tidak merubah struktur kode template.
pertama tama yang harus diperhatikan adalah kode css yang mengatur lebar layar , ditemplate blogger untuk mengatur lebar layar yang standar adalah
#main-wrapper { . . . }
#sidebar-wrapper { . . . }
#header-wrapper{ . . . }
#footer-wrapper { . . . }
tapi mungkin saja ditemplate lain berbeda beda tapi pada template saya ini yang mengatur lebar layar yang standar adalah ke empat kode css tersebut
dan ini ada beberapa ukuran layar pada hape ataupun ipad yang sudah saya coba css nya
/* Smartphones (portrait dan landscape) ----------- */
@media only screen and (min-device-width : 320px) { /* isi Css anda */ }
/* Smartphones (landscape) ----------- */
@media only screen and (min--width : 321px) { /* isi Css anda */ }
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {/* isi Css anda */}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* isi Css anda */ }
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* isi Css anda */ }
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {/* isi Css anda */ }
/* Media untuk layar komputer atau laptop ----------- */
@media only screen and (min-width : 1224px) { /* isi Css anda */ }
/* layar besar ----------- */
@media only screen and (min-width : 1824px) { /* isi Css anda */ }
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* isi Css anda */}
dengan syarat template blogger anda sudah ada kode seperti dibawah ini dibawah <head>
<meta content='text/html;charset=UTF-8' http-equiv='Content-Type'/><meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
kita contoh kan pada tampilan hape saya yang memiliki tampilan layar 300px kita akan membuat template blogger pas pada layar tersebut pada css anda silahkan tambah kan kode untuk kode css yang template standar biasanya diantara b:skin kalo yang sudah di modif silahkan simpan setelah kode <style type='text/css'> atau sebelum </style> sama saja lah yang penting penyimpanan nya diantara dua kode itu dan tidak membuat anda pusing yang gampang diingat saja nyimpen nya
untuk kode nya yang akan kita masukkan ini
@media only screen and (min-width : 300px) { /* isi Css anda */ }
kita akan mencoba memasukkan css nya seperti ini
@media only screen and (min-width : 300px) {
#main-wrapper { width:100% }
#sidebar-wrapper {width:100% }
#header-wrapper{ width:100% }
#footer-wrapper { width:100% }
}
saya lebih menyukai memakai persen karena sudah pasti didalam bayangan saya sendiri hasil lebar nya segitu misal width:100% maka tampilan lebar nya akan sepanjang layar bila menggunakan px saya harus ngukur lagi :d
bila diartikan pada css diatas maka tampilan mulai dari header hingga footer maka akan selebar layar hape yang berukuran layar 300px silahkan sesuaikan sesuai selera anda kadang bila selebar layar tampilan nya menjadi jelek
keterangan :
- anda bisa menambahkan css apa saja kedalam media only tersebut mulai 300px sampai 1200px misal css comment atau apa aja lah
- bila di biarkan kosong seperti ini @media only screen and (min-width : 300px) { } maka css yang diambil adalah css inti nya pada tampilan tersebut
- bila ingin menghilangkan widget pada tampilan tersebut kita contoh kan anda mempunyai template blogger 3 kolom pada tampilan tersebut akan terlalu panjang bila di muat semua maka coba hilangkan salah satu widget nya dengan kode css responsive tersebut contoh nya seperti ini
@media only screen and (min-width : 300px) {
#main-wrapper { width:100% }
#sidebar-wrapper {width:100%}
#header-wrapper{ width:100% }
#footer-wrapper { width:100% }
#right-sidebar { display:none }
}
artinya diatas maka sidebar yang ada dikanan pada tampilan hape 300px akan hilang
- bila ingin merubah rubah warna pada setiap tampilan bisa saja misalkan ingin merubah rubah atau warna warni pada tampilan tertentu kita contohkan dua saja kita coba pada header agar tampilan warna nya berbuah pada tampilan tertentu
@media only screen and (min-width : 300px) {
#main-wrapper { width:100% }
#sidebar-wrapper {width:100%}
#header-wrapper{ width:100% overflow: hidden; background-color:#ffffff; }
#header-wrapper { overflow: hidden;}
#header{ float: left;}
#footer-wrapper { width:100% }
#right-sidebar { display:none }
}
@media only screen and (min-width : 520px) {
#main-wrapper { width:100% }
#sidebar-wrapper {width:100%}
#header-wrapper{ width:100% overflow: hidden; background-color:#eeeeee; }
#header-wrapper { overflow: hidden;}
#header{ float: left;}
#footer-wrapper { width:100% }
#right-sidebar { width:30% }
}
arti css diatas maka background header pada tampilan 300px akan berwarna putih dan pada tampilan 520px background nya akan berwarna abu abu
lalu silahkan belajar sendiri dengan membayangkan atau mencoba mengedit nya pada blog percobaan :)