Cara Buat Dummy Text Content di Blogger

Cara Membuat 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 sering 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?

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

    /* 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%}
    Jika sudah Klik Simpan
    /* 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%}
    Jika sudah Klik Simpan
  5. 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

    <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>
    <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="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>
  5. Gaya alternatif

    <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="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>
  6. Jika sudah Klik Simpan atau Publikasikan

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.

Anda mungkin menyukai postingan ini
0 comments