×
Langsung ke konten utama

Unggulan

LOREMIPSUM6

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede.
Blockquote: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc v…

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>
Dan hasilnya adalah tampilan gambar atau image atau "gambar hidup" dibawah ini

Barangkali anda suka:

Komentar

this is SOHO template we make it over and even no people believe that it was SOHO

We are dedicated to make over all new default templates (All variants with layout version 3) to be cooler

original Theme: Soho

Re-designed by: Sofyan

HTML Editor: Anissa Auliasari

kontak

Nama

Email *

Pesan *

Subscribe to my Newsletter

Copyright © 2018 - NavTrial. All rights reserved.