Cara Membuat Drop Cap Seperti Median UI di Blog

Apakah kamu tau apa itu dropcap?, Drop Cap adalah salah satu tools dalam Microsoft Word untuk membuat huruf dalam paragraf pertama menjadi lebih besar dibandingkan dengan tulisan lainnya.

Tidak hanya Microsoft Word saja, Drop Cap juga bisa dibuat di Blogger maupun di WorsPrees kalian loh.

Cara membuat drop cap di blog pun bisa dibilang cukup mudah, hanya dengan membutuhkan sedikit kode CSS saja.

Dropped Capital atau yang biasa disebut drop cap adalah huruf besar yang biasa digunakan sebagai element dekoratif yang diletalan pada awal paragraf.

Ukuran dari drop cap juga tidak menentu, biasanya berkisar 2 sampai 5 baris yang dimakan.

Sebagai contohnya, kalian bisa melihat paragraf pembuka pada artikel yang saya tulis ini.

Drop cap sendiri bukanlah hal yang baru, karena drop cap sendiri sudah digunakan cukup lama dan pastinya sudah sangat lama.

Selain mempercantik tulisan di word, drop cap juga dipakai untuk menarik perhatian pembacanya.

Saya sendiri suka memakainya untuk membedakan paragraf pembuka dengan paragraf lain dalam sebuah artikel yang Saya tulis.

Dan bagusnya lagi, drop cap bisa mempercantik tampilan sebuah artikel tanpa harus mempengaruhi tampilan keseluruhan artikel.

Karena drop cap ini hanya mengubah satu huruf di awal paragraf pembuka.

Untuk kalian pengguna WordPress, kalian bisa memakai plugin block gutenberg, namun jika kamu ingin melakukannya secara manual kalian bisa memakai kode CSS.

Cara Membuat Drop Cap Seperti Median UI di Blog

Step 1 : Silahkan kalian masuk ke Dashbord Blogger kalian

Step 2 : Silahkan pilih menu Tema lalu pilih icon Drop bawah dan Pilih EDIT HTML

Step 3 : Pastekan kode CSS di bawah ini, tepat di atas kode ]]></b:skin>

.dropcap {
 float: left;
    margin: 4px 8px 0 0;
    font-size: 55px;
    line-height: 45px;
    opacity: .8;
}

Step 4 : Simpan template kalian.

Cara Mengaktifkan Drop Cap

Untuk mengaktifkan drop cap, kalian cukup menambahkan class .dropcap pada paragraf yang ingin kalian buat drop cap.

Contohnya silahkan lihat di bawah ini.

<span class="dropcap">L</span>

Sebagai catatan, jika tampilan drop cap tidak sesuai dengan apa yang kamu inginkan, ubah nilai font-size hingga margin di kode tersebut.

Jika kamu memiliki ukuran font yang berbeda di tampilan mobile, kamu juga mungkin perlu membuat kode CSS yang berbeda dan tampilannya lebih proporsional.