Cara Termudah Membuat Dropcap Di Blog Dengan Pseudo-element

Cara Termudah Membuat Dropcap Di Blog Dengan Pseudo-element

Bola Hero Gawai

Cara Termudah Membuat Dropcap Di Blog Dengan Pseudo-element

Cara Termudah Membuat Dropcap Di Blog Dengan Pseudo-element
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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×