Kenal dengan istilah responsive design? Berapa sering kita melihat tampilan blog sendiri dalam mode desktop atau
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
mobileSadar 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 HTMLwidth: 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;
}
<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
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/
Live on Blog | Mobile |
Resource: ami.responsivedesign.is
Happy blogging \m/
Loading... |
3 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...