Cara Membuat Dummy Text di Blogger

Arsipbiru.com - Selamat datang kembali di Arsipbiru. Pada kesempatan kali ini, saya akan membagikan tutorial bagaimana cara membuat Dummy Text di Blogger. Tahukah Anda apa itu Dummy Text? Dummy Text adalah teks yang ditempatkan untuk mendemonstrasikan elemen grafis atau presentasi visual seperti tata letak, font, atau tipografi, dari suatu halaman. Dummy Text biasanya dijumpai di blog dengan niche tutorial coding.

Terdapat setidaknya dua jenis Dummy Text, yaitu Lorem Ipsum dan Dummy Text dengan CSS. Lorem Ipsum merupakan Dummy Text yang berupa untaian kalimat dalam bahasa Latin. Lorem Ipsum biasanya dijumpai pada setiap demonstrasi elemen grafis, seperti template baru. Fungsi Lorem Ipsum sendiri agar pengunjung tidak terlalu fokus pada kalimat tersebut ketika mendemonstrasikan elemen grafis tersebut.

Sedangkan, Dummy Text dengan CSS adalah Dummy Text yang murni dibuat dari barisan kode CSS. Fungsinya sama dengan Lorem Ipsum. Hanya saja memiliki tampilan yang berbeda. Jika Lorem Ipsum terdiri dari untaian kalimat dalam bahasa Latin, maka Dummy Text dengan CSS ini terdiri dari barisan kotak-kotak yang mempresentasikan suatu kata, kalimat, atau paragraf. Umumnya Dummy Text jenis ini banyak dijumpai pada blog dengan niche tutorial coding.

Nah, dari kedua Dummy Text tersebut, saya hanya akan membagikan tutorial membuat Dummy Text jenis kedua, yaitu Dummy Text dengan CSS. Bagi Anda yang memiliki blog dengan niche tutorial coding, tidak ada salahnya mencoba Dummy Text ini untuk mempresentasikan suatu elemen di blog Anda.

Baik langsung saja, jika Anda ingin menambahkan Dummy Text di blog Anda, silahkan simak langkah-langkah berikut ini dengan seksama.

Cara Membuat Dummy Text di Blogger

Untuk membuat Dummy Text di Blogger, caranya sangat mudah dan sederhana. Hanya menambahkan kode CSS pada template dan kode HTML pada postingan. Di bawah ini terdapat 2 style Dummy Text yang dapat Anda pilih sesuai dengan keinginan Anda.

Cara Membuat Dummy Text Style 1

1. Pertama, masuk ke dasbor Blogger Anda.

2. Selanjutnya, pilih blog mana yang ingin Anda tambahkan Dummy Text.

3. Kemudian, pilih menu Tema > klik ikon panah bawah di samping menu Sesuaikan > klik Edit HTML.

4. Cari kode ]]</b:skin> dan tambahkan kode CSS berikut ini di atas kode ]]</b:skin>.

.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}

Cara Menambahkan Dummy Text Style 1 di Postingan

<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>

Cara Membuat 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%}

Cara Menambahkan Dummy Text Style 2 di Postingan

<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>