28
responsive template blogger
Beberapa hari yang lalu, saya pernah mengshare cara membuat template menjadi Responsive. tetapi celakanya saya lupa mengajarkan cara-caranya mengeditnya. Tetapi sekarang akan saya ajarkan cara mudah membuat template menjadi responsive. Pertumbuhan Mobile yang sangat pesat dibanding perangkat keras lainnya membuat kita harus memberi perhatian khusus kepada pengunjung blog kita yang berasal dari HP, SmartPhone, Tablet dan lainnya.
Part 1 : Cara membuat template Responsive
Part 2 : Membuat template menjadi Responsive : Part 2 Sedang anda baca
Part 3 :Pending
Jika anda mengenal sedikit ilmu CSS dan HTML, sangat mudah melakukannya. Apalagi dengan CSS3 Media Queries.

Apa itu tampilan responsive

Adalah tampilan yang sangat kontibel dari berbagai ukuran layar. Tampilannya yang ditampilkan sangat berbeda dari dekstop view (komputer, laptop dan sejenisnya ), mobile view ( HP, Smartphone dan sejenisnya ) dan tablet view ( tablet dan sejenisnya ).
1. Untuk Blogger
Sebenarnya, Blogger sudah menyediakan tampilan khusus untuk pengguna perangkat keras jenis mobile tetapi desainnya yang sederhana membuatnya tidak banyak digunakan. Saya pun masih menggunakan tampilan khusus mobile.
2. Mengecek tampilan blog anda di berbagai ukaran
Jika kita ingin mengatahui tampilan blog kita di berbagai ukuran layar, dapat membuka link berikut 
Buka link ini : Link 1 | Link 2

Mengdisable tampilan Mobile

Alasan dibuat template menjadi responsive adalah karena blogger tidak mengijinkan template khusus untuk mobile, kecuali = buatan mereka sendiri ( dari pihak blogger )sendiri.Jadi, pertama-tama kita harus mengdisable dulu tampilan mobilenya.
1. Buka blogger > Template > Seluler
2. Pilih,
 
 

Memasang Meta Tag

Terlebih dahulu kita pasang Meta Tag.
1. Buka blogger > edit HTML
2. Masukkan Meta tag berikut dibawah <head>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/><meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>

Menggunakan CSS3 Media Queries

Media Queries dapat mengetahui ukuran layar digunakan. Kegunaannya Media Queries hampir sama dengan IF.  Misalnya kita buat contoh Media Queries untuk HP dan Tablet.
@media screen and (max-width : 480px) { /* Jika ukuran layar digunakan dibawah 480px ( maskimal 480px )*/ /* Apa yang harus dilakukan*/ } @media screen and (max-width : 768px) { /* Jika ukuran layar digunakan dibawah 768px ( maksimal 768px ) */ /* Apa yang harus dilakukan */ }
Apa yang harus diingat

  1. Gunakan pixel ( px ) untuk mendefinisikan ukurannya
  2. Gunakan 3 ukuran yiatu 480px/768px/1024px ( Rekomendasi ) atau 240px/320px/480px/768px/1024px ( Lebih baik tapi ribet nanti mengkostuminasinya.

Anda dapat mengedit berbagai widget saat ukuran layar berbeda, misalnya
@media screen and (max-width : 480px) { .popular-post{aturannya widget popular post} } @media screen and (max-width : 768px) { .popular-post{aturannya widget popular post} }

Butuh bantuan ?
Jika anda bingung dengan penjelasan kami, anda dapat menanyakan, mengkritik atau memberi saran dengan berkomentar. Harap tidak menyertakan link hidup. Terima kasih.

Posting Komentar Blogger

  1. masih agak melayang-layang ni mas :D

    BalasHapus
  2. Kayaknya masih ga berhasil gan...!!! apakah penyebabnya...?? Atau mungkin saya menggunakan template bawaan blogger??

    BalasHapus
    Balasan
    1. harusnya bisa ,coba anda beri paragaf baru setelah media screen and (max-width : 480px){

      Hapus
    2. Maksudnya beri paragraf baru apa kang? :/

      Hapus
  3. apakah ini hanya bisa untuk template blog atau template cms lain bisa ????

    BalasHapus
  4. apakah ini hanya bisa untuk template blog atau template cms lain bisa ????

    BalasHapus
    Balasan
    1. kalau cms lain pengaturannya berbeda ( peletakannya ) tapi @media screen adalah css , jadi dapat dimasukkan di semua css tapi lokasinya penempatan aja yang berbeda atau dapat dimasukkan antara style pembuka dan penutup .

      Hapus
  5. wwah ,, TUTOR nya kurang mendalam mas,,, bahasan nya....he he maaf nih maklum blogger pemula saya. tapi thank u bwt infonya

    BalasHapus
    Balasan
    1. Hehehe , bagaimana kalau buka yang part 2, lebih mendalam tu

      Hapus
    2. Saya benar2 kurang faham gan... Bisa dijelaskan lebih detail ? Cara menggunakan ini "Menggunakan CSS3 Media Queries" bagaimana?

      Hapus
  6. terima kasih ya kk atas inforasinya, melody sangat terbantu sekali atas artikel kakak , jangan lupa mampir di blog melody ya kk http://memolodys.blogspot.com/2013/08/cara-booting-shutdown-komputer-cepat.html

    BalasHapus
  7. Lumayan susah..juga bikin template jadi responsive...

    BalasHapus
    Balasan
    1. kalau susah, enakan download template sudah jadi kan ? saya sedang membuat template moga moga responsive

      Hapus
  8. matur nuwus sedoyo inpormasinipun pak dhe.

    BalasHapus
  9. sangat membantu tutorial ini.
    cuma ada satu pertanyaan dari saya.

    Untuk menyusun script css di atas harus di tulis secara langsung pada template htmlnya atau bisa di @import-kan?

    terima kasih :)

    BalasHapus
    Balasan
    1. ditulis langsung bisa , kalau dimport gak pernah coba :smile: karena katanya bikin lambat

      Hapus
  10. maksih gan ilmunya ini yang aku cari..jangan lupa untuk melihat tampilan handphone untuk web saya di www.bursa-baju-murah.com makasih gan udah berbagi ilmu semoga makin sukses selalu amin...

    BalasHapus
  11. Emmm kalau blog saya ini sudah responsive belum mas? Mohon bimbingannya, saya baru bikin blog 1 bulan mas... :/

    BalasHapus
  12. yang edit beberapa widget itu ukurannya dimasukkan semua atau dimasukkan salah satu mas?

    yang ini
    @media screen and (max-width : 480px) { .popular-post{aturannya widget popular post} } @media screen and (max-width : 768px) { .popular-post{aturannya widget popular post} }

    BalasHapus
  13. Bagaimana jika ingin menghilangkan efek java script pada tampilan mobile ?

    BalasHapus
  14. Tarr saya coba gan. Makasih infonya... CTRL+d dulu deh...

    BalasHapus

 
Top