OprexMedia | Template Blogspot Responsive

Kelebihan responsive dibandingkan dengan template statis lainnya adalah lebih mudah di buka dan di baca oleh media screen dengan resolusi hingga 240 x 320 (small phone) tanpa scroll. Begitu juga jika di buka dengan monitor model sekarang yang melebar kesamping, maka blog kita akan tetap serti yang anda lihat sekarang dan tidak mengecil seperti blog Iskaruji dot com.

Untuk mengecek tampilannya pada resolusi layar yang berbeda silahkan di coba di http://mattkersley.com/responsive/. Bisa juga dengan mengecilkan browser sobat hingga selayar handphone atau iPhone. Bandingkan dengan tampilannya dengan Blog sobat atau Blog Iskaruji dot com.

Responsive ini dimungkinkan karena penggunaan kode berikut di dalam CSS-nya:

@media handheld, only screen and (max-width:767px){
#header-wrapper {font-size:10px;}
#main-wrapper, #header img, #sidebar-wrapper, #footer, #sidebar2-wrapper, #footer1-wrapper, #footer2-wrapper, #footer3-wrapper {clear:both;width:98%;float:left;}#footer2-wrapper{margin-left:0}
#outer-wrapper, #main-wrapper, #sidebar-wrapper, #sidebar2-wrapper, #footer1-wrapper, #footer2-wrapper, #footer3-wrapper {word-wrap:break-word;font-size:medium;font-family:"Arial"; }
.post img{width:100%;height:100%;float:center;}
}

@media screen and (min-width:768px) and (max-width:1023px){
#sidebar-wrapper, #sidebar2-wrapper, #footer1-wrapper, #footer2-wrapper, #footer3-wrapper{margin-top:20px;}
}

Dan ini kode pembentuk tampilan responsive pada halaman post.

@media handheld, only screen and (max-width:767px){#header-wrapper {font-size:10px;}#main-wrapper, #header img, #sidebar-wrapper, #sidebar2-wrapper {clear:both;width:98%;float:left;}#outer-wrapper, #main-wrapper, #sidebar-wrapper, #sidebar2-wrapper{word-wrap:break-word;font-size:medium;font-family:Georgia}.post img{width:100%;height:100%;float:center;}}
@media screen and (min-width:768px) and (max-width:1023px){#sidebar-wrapper, #sidebar2-wrapper{margin-top:20px;}}

Kode-kode tersebut baru bisa berjalan jika semua satuan pixel [px] dalam kode diatas kamu ganti dengan persentase [%]

Responsive ini tidak terjadi saat di buka dengan IE 8 seperti yang sudah saya coba. Selain itu untuk banner iklan berukuran melebihi 240px juga akan terpotong saat di buka.