Skip to main content
KOMPI AJAIB

follow us

Berbuat khilaf adalah sifat. Meminta maaf adalah kewajiban. Dan kembalinya Fitrah adalah tujuan. Saya, Adhy Suryadi admin blog Kompi Ajaib MEMOHON MAAF LAHIR DAN BATHIN. Minal Aidin Wal Faidzin Taqabalallahu minnaa wa minkum. Selamat hari raya Idul Fitri, 1 Syawal 1439 H.

×

Cara Termudah Membuat Dropcap Di Blog Dengan Pseudo-element

Baca juga:

Sebenarnya sudah banyak yang memposting cara membuat dropcap ini di blog. Dropcap adalah huruf awal pada paragraf pertama diperbesar seperti yang biasa digunakan pada surat kabar atau seperti pada gambar di atas.

Namun kebanyakan tutorial-tutorial tersebut membuat dropcap dengan menambahkan class pada huruf pertama paragraf. Tentunya ini membuat sedikit kerja ekstra ketika membuat postingan. Nah kali ini saya akan share cara termudah membuat dropcap dengan pseudo-element yang akan merubah secara otomatis semua huruf pertama paragraf pertama postingan blog menjadi dropcap.

Silahkan copy kode css di bawah ini dan simpan di atas kode </head>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.post-body::first-letter {
    color: red;
    font-size: 70px;
    float:left;
    font-weight:bold;
    line-height:.9em;
}
</style>
</b:if>

Silahkan sesuaikan size hurufnya pada kode font-size.

Nah mudah-mudahan sharing ringan ini bisa bermanfaat untuk kita semua, selamat mencoba.

You Might Also Like:


Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar