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
belajar membuat template blogger responsive

 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 :)

Komentar

  1. Bagus banget!!! Ternyata kmu sudah tau banyak tentang blogger

    BalasHapus
  2. kayanya si akang ini lumayan berpengalaman juga bikin blogger tambah heboh :D hhihihi

    BalasHapus
  3. bermanfaat banget buat pemula kaya saya mass . . .

    salam kenal , , ,mampir diblog q massss

    BalasHapus
  4. Males bikin gan maunya tinggal pakai aja :D

    BalasHapus
    Balasan
    1. haha skrng dah bnyk yg tinggal pake :-D

      Hapus
  5. Wah diam diam jago koding juga ya... Cik atuh kucurkeun kadieu elmuna :)

    BalasHapus
    Balasan
    1. akh kang sami wae pas pas an abi mah :-D

      Hapus
  6. Mas sopyan emang juara banget..soal seputar blog ya.
    ..
    Sering2 kesini sy bisa jd pinter nih :)

    BalasHapus
    Balasan
    1. ah bisa aja cuma yang standar mas budi ga ada lebih nya :d hehehe saya juga masi belajar koq :d

      Hapus
  7. pengen bisa buat yang bgtu, tapi masih bocah yang belum tau apa-apa. jadi cuma bisa nyimak saja.
    smoga tmbah pinter setelah main-main ke blog ini,...

    BalasHapus
    Balasan
    1. sama sama blajar sob saya juga :-D
      makasi kunjungan na :-D

      Hapus
Posting Komentar

jangan berkomentar berbau sara dan spam :)