Responsive Style Template Thesis For Blogspot

Tutor Responsive Thesis Blogger Template ini hanyalah sekedar ujicoba untuk mengkaji Template Thesis For Blogspot ini sememangnya User Friendly. Setiap bagian dari template ini mudah dikenali dan dimodifikasi hanya dengan CSS sederhana tanpa memerlukan kemampuan khusus dalam bidang coding.

Saya telahpun mencoba untuk menjadikan template thesis ini menjadi responsive yang dapat menyesuaikan tampilan blog sesuai dengan ukuran layar browser.

DEMO : Muslim Blog

SCREENSHOT:

Standart View

Responsive View

Untuk membuat Template Thesis For Blogspot Anda menjadi Responsive, silahkan bubuhkan script CSS ini diatas ]]></b:skin>

Coding CSS ini hanyalah "UJICOBA" semata, dan masih belum sempurna. Bagi Anda yang mencoba coding ini, Kami tidak bertanggung jawab terhadap segala hal yang disebabkan oleh coding ini.

@media screen and (max-width:959px){
body{width:100%;margin:0 auto}
.headerleft{width:90%;float:none;margin:0 auto;display:block}
.headerright{width:90%;float:none;margin:0 auto;display:block}
.nav-wrap,#header-wrapper{width:100%;margin:0 auto;text-align:center}
#header-wrapper{height:150px}
#sidebar-wrapper{width:32.75%;float:right;margin:0 auto}
#main-wrapper{width:60.025%;float:left;margin:0 auto;padding-left:0}
#head,.menuhorizontal,#content-wrapper,#outer-wrapper,#footer-wrapper,#credit{width:87.25%;margin:0 auto}
.comment-form{max-width:100%}
.comments{width:100%;margin:0 auto;padding:0 auto}
.credit span{display:block;text-align:center}
.credit .cr{float:none;margin-left:0}
.credit .dev{float:none;margin-right:0}
}

@media screen and (max-width:758px) {
#main-wrapper{width:100%;float:none;margin:0 auto;border-right:none}
#sidebar-wrapper{width:100%;float:none;margin:0 auto}
#menuhorizontal li a{border:1px solid #ccc;display:inline-block;float:none;width:100%;text-align:center;padding: 10px 0;font-size:2.5em}
.iklan-kanan{display:none}
}

@media screen and (max-width:524px) {
#commentBodyField{width:94.5%}
}