Make Live on Blog use CSS3

Kenal dengan istilah responsive design? Berapa sering kita melihat tampilan blog sendiri dalam mode desktop atau mobile Sadar atau tidak sadar sebenarnya tampilan blog versi desktop & mobile bisa disaksikan secara live :-/ Momen ini dapat dirasakan ketika di home/dashboard blog, klik opsi Template. Jika bingung, berikut screenshot
Live On Blog sami sareung versi desktop/komputer. Terlihat jelas blog gue amat sangat tidak responsive >:) Kalau mau melihat-lihat resource mengenai issue responsive sobat bisa tengok di alamat ini responsive bikin repot. Ternyata kita dapat membuat tampilan seperti itu dengan keajaiban kode CSS3 :))

.desktop {
width: 240px;
height: 160px;
overflow: hidden;
border: 1px solid #999;
box-shadow:0 1px 5px #111;
}
.desktop iframe {
width: 750px;
height: 500px;
transform: scale(0.3181);
-webkit-transform: scale(0.3181);
-o-transform: scale(0.3181);
-ms-transform: scale(0.3181);
-moz-transform: scale(0.3181);
transform-origin: top left;
-webkit-transform-origin: top left;
-o-transform-origin: top left;
-ms-transform-origin: top left;
-moz-transform-origin: top left
}
iframe {
margin: 0;
padding: 0;
position: relative;
background-color: #fff;
transform: scale(0.219);
-webkit-transform: scale(0.219);
-o-transform: scale(0.219);
-ms-transform: scale(0.219);
-moz-transform: scale(0.219);
transform-origin: top left;
-webkit-transform-origin: top left;
-o-transform-origin: top left;
-ms-transform-origin: top left;
-moz-transform-origin: top left;
}
.mobile {
width: 120px;
height: 160px;
top: 375px;
overflow: hidden;
border: 1px solid #999;
box-shadow: 0 1px 5px #111;
}
.mobile iframe {
width: 550px;
height: 750px;
}

Planing HTML<table align="center" cellpadding="5">
<tbody>
<tr>
<td>Live on Blog</td>
<td>
Mobile
</td>
</tr>
<tr>
<td><div class="desktop">
<iframe src="ADD LINK HERE"></iframe>
</div></td>
<td><div class="mobile">
<iframe src="ADD LINK HERE"></iframe>
</div></td>
</tr>
</tbody>
</table>

DEMO

Live on Blog	Mobile

Percaya sekarang! Jika sobat kepengen mencoba fitur live on blog, silahkan mencobanya live on blog tools. Tampilan desktop dan mobile tidak lain indikasi untuk mengetahhui apakah responsive atau tidak sebuah site terhadap perangkat!
Resource: ami.responsivedesign.is
Happy blogging \m/