Membuat Dropcap / Huruf Besar di Awal Postingan Blog

Huruf besar di awal atau yang lebih dikenal dengan istilah "Dropcap" adalah huruf besar yang biasanya terletak di awal paragraf yang biasanya sering digunakan didalam sebuah buku-buku atau majalah. Namun, seiring dengan berkembangnya zaman, dropcap ini ternyata juga dapat diterapkan didalam postingan atau artikel dalam sebuah blog atau website dengan guna untuk mempercantik tampilan terutama didalam postingan yaitu dengan cara menambahkan beberapa kode-kode css didalamnya.

Dropcap atau huruf besar di awal tulisan


Cara membuat dropcap ini sangatlah mudah, silahkan ikuti dua langkah yang ada dibawah ini.

Langkah pertama yaitu yang paling penting untuk membuat huruf tersebut akan menjadi lebih besar dari sebelumnya yaitu meletakkan kode CSS dalam mode Edit HTML pada template blogger.

  1. Silahkan menuju mode Edit HTML pada template blogger kamu, lalu cari kode ]]></b:skin> atau </style> dengan cara menggunakan Ctrl + F
  2. Copy kode dibawah ini, lalu letakkan tepat diatas kode ]]></b:skin> atau </style> tadi.

    .dropcap{float:left;color:#000000;background:#fff;line-height:44px;padding-right:5px;font-family:Arial;font-size:40px;}


Silahkan simpan template. Langkah kedua yaitu penerapan dropcap itu sendiri pada artikel atau postingan dalam mode Edit HTML.
  1. Silahkan masuk ke dalam pembuatan postingan atau artikel lalu pilih mode HTML bukan mode Compose.
  2. Ini yang paling penting dalam pembuatan dropcap atau huruf besar diawal paragraf atau postingan blog. Kamu harus meletakkan kode ini diantara huruf pertama dalam artikel atau postingan kamu. <span class="dropcap">Huruf yang akan di Dropcap</span>

    Seperti contoh :
    <span class="dropcap">M</span>embuat gambar tampil lebih responsive merupakan salah satu hal wajib yang harus dilakukan. Sebab dengan tampilnya gambar lebih responsive maka gambar tersebut akan tampil dengan ukuran sesuai dengan besarnya ukuran device dari pengguna tersebut. Untuk menerapkan hal ini sangat mudah sekali karena dengan kamu cukup meletakkan kode CSS yang ada dibawah ini didalam mode Edit HTML untuk mendapatkan gambar yang akan tampil lebih responsive.

    Dalam contoh diatas, berarti yang dibuat besar hurufnya atau Dropcap adalah huruf "M"
  3. Selesai.

Begitulah mudahnya cara membuat Dropcap atau huruf besar di awal dalam sebuah postingan suatu blog. Demikianlah tutorial blog dari saya yaitu Membuat Dropcap / Huruf Besar di Awal Postingan Blog. Jika kamu masih kurang mengerti, kamu bisa bertanya pada saya melalui form komentar di bawah ini. Selamat mencoba.

Copyright © 2020

Irfan Syahputra