Cara Edit Template Agar Responsive

Untuk sahabat blogger pemula yang ingin merubah penampilan blog agar menjadi responsive disini caranya, sobat tidak perlu mengganti template baru karena selain ribet dengan urusan edit ini itu keseringan mengganti template blog juga akan membuat pengunjung setia kebingungan dan berpengaruh kurang baik terhadap SEO.

Sekedar informasi template responsive adalah sebuah template yang penampilanya kontibel dengan berbagai ukuran layar dimana tampilan tatap muka menyesuaikan dengan ukuran layar yang kita gunakan seperti dekstop (komputer, laptop dan sejenisnya), mobile (HP, smartphone dan sejenisnya) dan tablet.
Seperti yang kita ketahui sekarang ini jaman sudah sangat canggih dimana akses internet tidak lagi terbatas pada komputer atau laptop, tapi perangakat lain seperti HP, smartphone, blackbarry, tablet dan lainya bisa berselancar di dunia maya yang tak kenal batas waktu dan jarak.

Sobat tidak perlu mengganti template responsive yang baru  yang akan merepotkan dan membuat pikiran sobat pusing, solusinya sangat sederhana sobat cukup melakukan beberapa langkah edit HTML agar blog menjadi responsive, berikut cara sederhana edit template agar penampilan blog lebih responsive :

• Yang pertama adalah masuk ke pengaturan Template
• Klik Edit HTML
• Tambahkan kode berikut diatas kode ]]></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; } }

• Simpan template sobat

Cara di atas adalah cara yang saya dapatkan dari blog sahabat idbloggertrick. Jika sobat mengalami permasalahan sobat bisa langsung tanyakan ke sumbernya.
Terimakasih semoga bermanfaat..