CARA MEMBUAT TAMPILAN DEMO LIVE MENGGUNAKAN CSS..

See Complete
10 Mar, 2020

CARA MEMBUAT TAMPILAN DEMO LIVE MENGGUNAKAN CSS..

Biasanya "demo" tema atau penjualan tema premium menggunakan dua tombol yakni DEMO dan DOWNLOAD,  kami akan mengemukakan cara berbeda berdasarkan referensi dari w3school bahkan demo jenis ini bisa kita buat dalam bentu 3 demo sekaligus yakni: Tampilan pada hape atau pada ponsel, tampilan pada tablet dan tampilan pada laptop. Contoh demo tema editblogtema: Tampilan ponsel warna kuning ini dapat menampilkan dan memperagakan template secara "live" dapat di eksplorasi dengan sentuhan layaknya pada hape sungguhan. Cara membuatnya:
  1. Masuk kepengaturan blogger
  2. Pilih postingan
  3. Pilih new entry atau Postingan baru
  4. Pada tool diatas blanko tempat kita biasa menulis konten atau artikel, pilih opsi HTML
Lalu kopi semua kode di bawah ini dan Save/publish.
<style>
/* The device with borders */
.smartphone {
  position: relative;
  width: 255px;
  height: 484px;
  margin: auto;
  border: 12px gold 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: 60px;
  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: -65px;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 50%;
}
/* The screen (or content) of the device */
.smartphone .content {
  width: 255px;
  height: 448px;
  background: white;
}
</style>
</head>
<body>
<div class="smartphone">
<div class="content">
<iframe src="/editblogcss/cobacobacss_templates_band.htm" style="border: none; height: 100%; width: 100%;">
</div>
</div>
</body>
</html>
Next Post Previous Post