Trik ini mudah dibuat jika sobat ingin menguji apakah tema atau template web yang soba buat sudah responsive dan mobile tanpa perlu memiliki ponsel, kok bisa?
Nah kalau kebetulan sobat menggunakan perangkat lebar layar sentuh cobalah eksplorasi layar virtual dibwah ini dengan sentuhan jari anggaplah seolah dia layar ponsel beneran, ini sering saya lakukan maka itu saya membuat berbagai model layar virtual seperti ini di laman yang sengaja saya sembunyikan di halaman editblogtema ini.
Caranya sebagai berikut:
Nah kalau kebetulan sobat menggunakan perangkat lebar layar sentuh cobalah eksplorasi layar virtual dibwah ini dengan sentuhan jari anggaplah seolah dia layar ponsel beneran, ini sering saya lakukan maka itu saya membuat berbagai model layar virtual seperti ini di laman yang sengaja saya sembunyikan di halaman editblogtema ini.
Caranya sebagai berikut:
- Masuk ke dasbor blogger
- Pilih postingan
- Pilih Entri atau postingan baru
- Pilih HTML (jangan pilih "Compose") perhatikan gambar:
- Lalu copy dan pastekan kode dibawah ini kedalam halaman entri HTML (bukan edit HTML ya..):
<html>
<head>
<style>
/* The device with borders */
.smartphone {
position: relative;
width: 330px;
height: 578px;
margin: auto;
border: 15px silver solid;
border-top-width: 50px;
border-bottom-width: 50px;
border-radius: 26px;
}
/* The horizontal line on the top of the device */
.smartphone:before {
content: '';
display: block;
width: 40px;
height: 5px;
position: absolute;
top: -30px;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 10px;
}
/* The circle on the bottom of the device */
.smartphone:after {
content: '';
display: block;
width: 34px;
height: 34px;
position: absolute;
left: 50%;
bottom: -55px;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 50%;
}
/* The screen (or content) of the device */
.smartphone .content {
width: 330px;
height: 560px;
border-radius: 10%;
margin: auto;
background: white;
}
</style>
</head>
<body>
<div class="smartphone">
<div class="content">
<iframe src="/editblogtema_css/cobacoba_css_templates_band.htm" style="border: none; height: 100%; width: 100%;">
</div>
</div>
</body>
</html>
</iframe></div>
</div>
</body></html>
Save tema.
Perhatikan nilai yang saya beri sorotan warna kuning, sobat bisa menggantinya dengan nilai yang lebih kecil jika menginginkan ukuran layar yang lebih kecil dan merubahnya menjadi lebih besar jika menginginkan layar yang lebih lebar, sedangkan kode yang saya sorot merah adalah untuk mengganti warna bingkai body ponsel atau perangkat.
<head>
<style>
/* The device with borders */
.smartphone {
position: relative;
width: 330px;
height: 578px;
margin: auto;
border: 15px silver solid;
border-top-width: 50px;
border-bottom-width: 50px;
border-radius: 26px;
}
/* The horizontal line on the top of the device */
.smartphone:before {
content: '';
display: block;
width: 40px;
height: 5px;
position: absolute;
top: -30px;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 10px;
}
/* The circle on the bottom of the device */
.smartphone:after {
content: '';
display: block;
width: 34px;
height: 34px;
position: absolute;
left: 50%;
bottom: -55px;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 50%;
}
/* The screen (or content) of the device */
.smartphone .content {
width: 330px;
height: 560px;
border-radius: 10%;
margin: auto;
background: white;
}
</style>
</head>
<body>
<div class="smartphone">
<div class="content">
<iframe src="/editblogtema_css/cobacoba_css_templates_band.htm" style="border: none; height: 100%; width: 100%;">
</div>
</div>
</body>
</html>
</iframe></div>
</div>
</body></html>
Save tema.
Perhatikan nilai yang saya beri sorotan warna kuning, sobat bisa menggantinya dengan nilai yang lebih kecil jika menginginkan ukuran layar yang lebih kecil dan merubahnya menjadi lebih besar jika menginginkan layar yang lebih lebar, sedangkan kode yang saya sorot merah adalah untuk mengganti warna bingkai body ponsel atau perangkat.