Membuat Template Menjadi Responsive

Seiring dengan perkembangan saat ini ,kebanyakan orang sekarang lebih sering mengakses internet melalui smartphone atau sebagainya, oleh karena itu blog juga membutuhkan penampilan yang dinamis guna memudahkan pengguna mobile dalam mengakses konten yang ada di blog kita .

salah satunya yaitu dengan membuat tampilan blog kita menjadi responsive .

Apa itu responsive template ? template yang responsive adalah template yang kompatibel dengan mobile screen. Tampilan responsive akan membuat tampilan blog sobat antara di PC dengan versi mobile terlihat berbeda ( walaupun hanya beda-beda tipis … J ),dan kali ini kita akan membahas tentang bagaimana cara membuat tampilan blog menjadi responsive .

Oke langsung saja kita mulai ,pertama-tama sobat  nonaktifkan template default mobile sobat

Pergi ke Blogger > Template

• Di bagian seluler, sesuaikan template seluler 
• Ganti menjadi khusus

Selanjutnya,

• Pergi ke Blogger > Template > Edit HTML
• Sesuaikan Script Di Bawah ini dengan Script di Blog Sobat
• Kemudian Pastekan tepat 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; } }

• klik pratinjau , jika tidak ada yang error langsung saja di Save
• coba ubah ukuran browser sobat dari maxime ke restore down , jika tampilan blog sobat mengikuti ukuran browser itu tandanya blog sobat sudah menjadi responsive …

oke sob ,sekian dari saya ,semoga sukses