Teks Dummy CSS di Halaman Postingan Blogger

Tutorial membuat widget Teks Dummy CSS Blogger

Teks Dummy CSS Blogger

Teks Dummy

Dummy berasal dari bahasa Inggris yang artinya contoh, tiruan, atau palsu. Dalam KBBI, maka arti dummy tersebut merupakan seluruh atau sebagian dari barang yang mempunyai jenis, macam, rupa, atau keadaan yang sama dengan barang aslinya. Dummy merupakan sampel atau contoh yang sangat membantu ketika mengembangkan aplikasi saat membutuhkan data percobaan.

Teks Dummy adalah suatu elemen yang ditempatkan untuk mendemostrasikan elemen grafis atau presentasi visual seperti tata letak, font, atau tipografi, dari suatu halaman. Maksud penggunaan teks dummy yaitu agar yang melihat tidak terlalu berkonsentrasi kepada arti dari kalimat yang dituliskan, tetapi lebih kepada elemen desain dari teks dummy yang ditampilkan.

Tutorial

Bagaimana cara membuat teks dummy?. Cara membuat Teks Dummy dengan CSS dan HTML di halaman postingan Blogger, ikuti langkah-langkah berikut di bawah ini.

Kode Script Teks Dummy

1. Pertama masuk ke Dashboard Blogger.
2. Kemudian buat halaman postingan.
3. Dalam tampilan editor pos, klik ikon di kiri bawah nama judul.
4. Dua opsi akan muncul: 'Tampilan HTML' dan 'Tampilan menulis'.
5. Pilih' Tampilan HTML. '.
6. Kemudian Copy paste kode script di bawah ini, di halaman postingan.
7. Ada 2 pilihan Style CSS Teks Dummy, Anda dapat menggunakan salah satu dari style teks dummy tersebut.
8. Terakhir Pratinjau dan Simpan.

---

Teks Dummy Style #1

<style>
/* Dummy Text Style 1 */
.dummy-text{display:block}
.dummy-text i{display:block;height:16px;margin-bottom:8px;background:#f2f1f7;border-radius:2px;}
.dummy-text i.img{margin:0 auto;max-width:85%;height:180px;border-radius:10px}
.dummy-header{position:relative;background:#fff;border-radius:6px;padding:15px 15px;box-shadow:0 2px 4px 0 rgba(0,0,0,.05)}
.dummy-header .flex{display:flex;display:-webkit-flex}
.dummy-header .flex i{width:60px;margin:0 10px 0 0}
.dummy-header .flex i:last-child{margin:0}
</style>
  
<p class="dummy-text">
  <i style="margin-left: 10%;"></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i style="width: 30%;"></i>
</p>
<p class="dummy-text">
  <i style="margin-left: 10%;"></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i style="width: 30%;"></i>
</p>
<p class="dummy-text">
  <i style="margin-left: 10%;"></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i style="width: 30%;"></i>
  </p>

Demo contoh tampilan teks dummy style #1

---

Teks Dummy Style #2

<style>
/* Dummy Text Style 2 */
.dummyText i{display:block;background-color:rgba(0,0,0,.05);margin-bottom:10px;height:1.5em}
.dummyText i.img{height:auto;min-height:200px;margin:2rem 10%}
</style>

<p class="dummyText">
  <i style="margin-left: 10%;"></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i style="width: 30%;"></i>
</p>
<p class="dummyText">
  <i style="margin-left: 10%;"></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i style="width: 30%;"></i>
</p>
<p class="dummyText">
  <i style="margin-left: 10%;"></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i style="width: 30%;"></i>
</p>

Demo contoh tampilan teks dummy style #2

---

Demikian cara membuat widget teks dummy di halaman postingan blog, semoga bermanfaat.

Go to Link