Cara Membuat Template Responsive

Responsive memang dibutuhkan untuk membuat mata nyaman
berikut caranya
cari ]]></b:skin>
dan taruh kode dibawah ini diatasnya

@media screen and (max-width:ukuranlayar) {
kode css
}

yang tulisan merah itu ganti dengan kode css yang akan disesuaikan dengan lebar layar yang dituliskan
Misal

@media screen and (max-width:1024px) {
#main-wrapper {max-width:90%}
}

Anda bisa sesuaikan sendiri
itu untuk layar dengan max-width 1024px..
Sobat bisa menambahkan lagi dengan ukuran layar yang berbeda misal

@media screen and (max-width: 960px) {
.ct-wrapper{    padding:0 15px;  }
#header-bottom {display:none}
.main-wrapper, .opt-in .opt-in-wrap{    margin-right:0;    width:100%;  }
.sidebar-wrapper{  float: left; width: auto;  margin-left: 20px;  }
.nav-menu ul { text-align: center; }
.nav-menu ul li { float: none; }
.opt-in .inner .ct-wrapper {  padding: 0 48px; }
.opt-in .info {  text-align: center;   }
.opt-in .signup-form {  margin-top: 30px;  width: 95%;  float: left;  }
#subbox {  width: 60%;  }
}
@media screen and (max-width: 768px){
#header p.description { margin: 0; }
.header-right { display: none; }
#comment-editor { margin:10px; }
.footer { width: 50%; }
#header-bottom {display:none}
}
@media screen and (max-width: 500px){
#header img { width:100%; }
.opt-in .inner .ct-wrapper {  padding: 0 10px; }
}
@media screen and (max-width: 420px){
.comments .comments-content .datetime{    display:block;    float:none;    }
.comments .comments-content .comment-header {    height:70px;    }
}
@media screen and (max-width: 320px){
.footer { width: 100%; }
.ct-wrapper{ padding:0; }
.post-body img{  max-width: 230px; }
.comments .comments-content .comment-replies {    margin-left: 0;    }
}

Silahkan utak-atik agar blog anda responsive :)

Sumber : http://rishad-harisdias.blogspot.com/2014/05/membuat-template-responsive.html