Cara membuat responsinator sendiri menggunakan CSS untuk keperluan blogging

Apa itu responsinator. Yaitu tool online untuk melihat tampilan halaman suatu web - termasuk halaman blog kita dong - dan untuk memastikan bahwa halaman tersebut sudah responsif dan mobile friendly tanpa harus membuka perangkat fisik dengan ukuran layar berbeda beda.

DEMO MOBILE

Sebaiknya Anda membuka link di atas melalui perangkat laptop, karena kalau pada perangkat mobil tampilannya ya sama saja..

Adapun standar ukuran layar perangkat yang di jadikan patokan biasanya adalah:

1. Perangkat mobile seperti hape yang ukurannya biasanya 4.5"-6".
2. Perangkat tablet seperti tablet Android, iPad yang ukurannya berkisar di antara 7"-10"
3. Perangkat PC desktop/Laptop yang ukuran layarnya berkisar 14"-24".

Kalau saya disini lebih suka memeriksa halaman web pada ukuran layar perangkat mobile, karena memang sudah zamannya 100% mobile, jadi pada kesempatan ini saya mencoba berbagi bagaimana caranya membuat perangkat virtual mobile saja.

1. CSS

Perhatikan kode CSS berikut:

/* perangkat dengan border */
.smartphone {
position: relative;
width: 360px;
height: 640px;
margin: auto;
border: 16px;
border-color: black;
border-top-width: 60px;
border-bottom-width: 60px;
border-radius: 36px;
}

/* lini horisontal bagian atas perangkat */
.smartphone:before {
content: "";
display: block;
width: 60px;
height: 5px;
position: absolute;
top: -30px;
left: 50%;
transform: translate(-50%, -50%);
background: #333;
border-radius: 10px;
}

/* bulatan bagian bawah perangkat */
.smartphone:after {
content: "";
display: block;
width: 35px;
height: 35px;
position: absolute;
left: 50%;
bottom: -65px;
transform: translate(-50%, -50%);
background: #333;
border-radius: 50%;
}

/* Layar yang menampilkan konten*/
.smartphone .content {
width: 360px;
height: 640px;
background: white;
}

2. HTML

Perhatikan URL link halaman web pada bagian HTML berikut:

<center><div class="smartphone">
<div class="content">
<iframe src="https://www.editblogtema.com" style="width:100%;border:none;height:100%" />
</div>
</div></center>

Klik Demo:

1. Tombol merah untuk tampilan mobile
2. Tombol hitam untuk tampilan tablet/iPad
3. Tombol warna indigo untuk tampilan PC/Laptop
4. Tombol putih 'DEMO' untuk tampilan seluruh perangkat pada halaman landing blogspot.

Contoh tampilan mobile »

Tampilan Tablet/iPad »

Tampilan PC/Laptop »

 

DEMO

Saya mempelajarinya dari halaman w3school dan mencoba menuliskannya di halaman editor HTML codepen. Namun model halaman landing blogspotnya dapat di temukan melalui tombol putih demo di atas.

Keren, bukan?

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share: