Cara Buat Dummy Text Content di Blogger

Cara Membuat Dummy Text Content menggunakan CSS di Blogger.
Cara Membuat Dummy Text Content di Blogger

Dummy Text Content di Blogger - Apa itu dummy text content? Dalam desain grafis dummy text sering digunakan sebagai contoh teks sementara dalam sebuah layout desain.

Nah, dalam dunia blog pun sama, dummy text dapat digunakan untuk menampilkan sampel font, menghasilkan teks untuk pengujian atau contoh konten tulisan di blog.

Blog dengan konten tutorial HTML, CSS dan Javascript atau Widget pasti sudah tidak asing dengan Dummy Text. Menyediakan Demo widget dengan teks dummy. Lalu bagaimana cara membuatnya?

Table of Contents

Cara Membuat Dummy Text Content di Blogger

Dummy text content biasanya berisi teks atau kalimat Lorem Ipsum. Tapi pada postingan kali ini saya akan berbagi bagaimana cara menambahkan Dummy Text menggunakan CSS di Blogger.

Cara Membuat Dummy Text dengan CSS di Blogger

  1. Masuk ke halaman draft.blogger.com
  2. Lanjut Klik Tema > klik Drop down > Edit HTML
  3. Cari kode ]]></b:skin>
  4. Lanjut Copy lalu Paste kode kode berikut tepat di atasnya

  5. /* 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}
    /* 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%}

  6. Jika sudah Klik Simpan

Cara Menerapkan Dummy Text di Postingan atau Halaman Blogger

  1. Masuk ke halaman draft.blogger.com
  2. Buat postingan atau halaman baru
  3. Ubah ke tampilan HTML
  4. Kemudian Copy lalu Paste kode HTML berikut
  5. /* Gunakan HTML Dummy Text berikut untuk CSS Style 1 */
      <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>
    /* Gunakan HTML Dummy Text berikut untuk CSS Style 2 */
      <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>
  6. Jika sudah Klik Simpan atau Publikasikan

Demo Dummy Text Content

Penutup

Nah itu tadi Cara Membuat Dummy Text Content di Blogger. Semoga artikel ini bisa bermanfaat. Kamu juga bisa share dan rekomendasikan ke teman-teman yang membutuhkan.

Hi. Lets connect and be friends!
Gabung dalam percakapan

Subscribe Now!

Get the email newsletter and grab early access to latest contents and updates.

Kebijakan Privasi Mailchimp.