Cara membuat template blogger menjadi 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
1. 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