Teks Dummy CSS di Halaman Postingan Blogger

Teks Dummy CSS Blogger

Cara Membuat Teks Dummy dengan CSS di halaman postingan Blogger.

Tutorial

1. Masuk ke Dasbor Blogger

2. Masuk ke bagian Tema Langkah

3. Klik panah Drop down dan pilih Edit HTML

4: Cari ]]></b:skin> dan pilih Style Text Dummy yang diinginkan, kemudian tempelkan kode script CSSnya tepat di atas atau sebelum ]]></b:skin>.

Ada 2 pilihan Style CSS Teks Dummy, Anda dapat menggunakan salah satu dari style teks dummy tersebut.

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>

5. Simpan.

6. Kemudian buat halaman postingan.

7. Editor Model HTML, kemudian salin kode script di bawah ini dan tempelkan di halaman postingan tersebut.


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

Contoh Style 1 - Teks Dummy

8. Pratinjau

9. Publikasikan.

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>

Contoh Style 2 - Teks Dummy

Demikian semoga bermanfaat.

Tutorial Blogger