19
Cara membuat template Responsive
Untuk cara yang lebih lengkap, silahkan buka Membuat Template menjadi Responsive Part 2
Nah apa itu Reponsive Template ? Reponsive template adalah template yang sangat kontibel dengan mobile. Biasanya jika dilihat di PC dan mobile tampilannya berbeda? Mengapa kita harus memakai template Reponsive ? Karena pertumbuhan mobile saat ini pesat sekali, sehingga agar pengunjung yang menggunakan mobile, akan puas dengan blog anda. Bagaimana cara membuat template menjadi Reponsive ? Akan saya ajarkan.
Pertama-tama lebih baik, anda menonaktifkan template default mobile anda
Cara mengganti template soluler1. Pergi ke Blogger > Template
2. Di bagian seluler, sesuaikan template seluler menjadi seperti di samping
3. Ganti menjadi khusus

Selanjutnya, kita akan otak-atik sedikit HTML
1. Pergi ke Blogger > Template > Edit HTML
2. Masukkan kode berikut diatas ]]></b:skin>
@media screen and (max-width: 1230px){ #header { float:none; max-width:none; text-align:center; } #header-inner { margin-bottom:0px; } #header h1 { margin-right:0px; } #header p.description { margin:0; } #header-right { position:relative; right:0; text-align: center; margin : 0 !important; } .header-right-inner { margin: 0 30px ! important; } .main-nav-top{ clear:both; float:none; } .main-nav-main { margin:10px 0 0 0; } #nav-search { float:none; margin:0; } } @media screen and (max-width: 960px) { .sidebar-wrapper{ position:relative; top:auto; right:auto; clear:both; left:auto; width:auto; margin: 0 -15px; background: none; } .subscribe_outer { margin: 0 -20px; } .main-wrapper{ margin-right:0; width:100%; min-height: 0px; } .ct-wrapper{ padding:0 15px; } #content { padding: 5px; clear: both; border-radius: 0; } .sidebar-wrapper .sidebar{ margin: 15px; } .sidebar-wrapper .widget{ border: none; margin: 0px auto 10px auto; padding: 10px 20px; } } @media screen and (max-width: 768px){ .header-wrapper { margin-right: 0; min-height: 0; width: 100%; } #header { text-align: center; width: 100%; max-width: none; } #header-inner { margin:30px 0 0; } #header h1 { font-size:35px; } .main-nav-top, .main-nav-main, .main-nav-top ul, .main-nav-main ul{ text-align:center; } .related-post { width:auto; } #comment-editor { margin:10px; } .footer { margin:15px; width:auto; } .footer-credits .attribution{ display:none; } } @media screen and (max-width: 500px){ #header img { width:100%; } } @media screen and (max-width: 420px){ #header h1 { font-size: 30px; margin: 10px; } .main-nav-main ul li{ margin:4px 10px; float:none; } .comments .comments-content .datetime{ display:block; float:none; } .comments .comments-content .comment-header { height:70px; } } @media screen and (max-width: 320px){ .ct-wrapper{ padding:0; } .footer .footer-inner { padding: 45px 10px 10px 10px; } .comments .comments-content .comment-replies { margin-left: 0; } }
Jika berhasil, coba cek di mobile anda bagaimana tampilan blog anda
Jika gagal, dalam soluler, jangan gunakan khusus tetapi nonaktifkan

Posting Komentar Blogger

  1. Pengetahuan dasar merubah template blog menjadi responsive template, mantap ......

    http://duniabloggerku67.blogspot.com

    BalasHapus
  2. cuma gtu doank?
    saya cek di web responsive, gk ada perubahan nya.

    BalasHapus
    Balasan
    1. Maaf ini sebenarnya pos lama, kalau pingin yang lebih lengkap dan jelas silahkan buka http://www.trikblogger.net/2013/06/membuat-template-menjadi-responsive.html

      Hapus
  3. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  4. makasih mas infonya sangat bermanfaat kunjungan perdana saya mas disini salam kenal mas :D

    BalasHapus
  5. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  6. aku di blog ,ngak ngefek bos ?

    BalasHapus
    Balasan
    1. silahkan buka yang part 2 :
      http://idbloggertrick.blogspot.com/2013/06/membuat-template-menjadi-responsive.html

      Hapus
  7. Salam kenal Mas ijin simak artikel nya tentang responsive sangat
    Bermanfaat nih, tapi kodenya cuma itu doang yah Mas mudah sekali katanya :)

    BalasHapus
  8. Oke gan langsung meluncur ke bagian 2 aja deh...

    BalasHapus
  9. masih belum paham masalah ginian gan belajar satuharian belum bisa bisa puyeng kepala hehe

    BalasHapus
  10. saya setuju dengan pendapat anda, karena blog kita akan disukai pengunjung dan mesin pencari karena tampilannya yang cocok dengan ukuran perangkat, sehingga laman dapat dirender dengan benar di semua perangkat. Jawaban tersebut bukanlah pendapat saya, melainkan langsung dari "Google devolevers PageSpeed Insights". Untuk itulah saya menyarankan agar anda benar-benar peduli terhadap tampilan blog anda di semua sistem operasi. sumber : cara membuat template blog responsive

    BalasHapus
  11. mungkin tutorialnya perlu diupdate mas gan ... biar bisa work. ini di blog sy ga ngefek > http://orangbiasjai.net

    BalasHapus
  12. iya gan tolong di update .. http://profesor-gerobak.blogspot.com

    BalasHapus
  13. cocok sekali gan ada yang bisa bantu ga?
    http://www.markaspoker.club
    http://punyapoker.blogspot.com

    BalasHapus

 
Top