Cara Membuat Drop Cap Otomatis untuk Semua Postingan Blog

Cara Membuat Drop Cap Otomatis untuk Semua Postingan Blog
Daftar Isi Artikel
Drop Cap sering kita buat atau jumpai di Word. Tidak hanya itu, sebenarnya kita bisa membuat Drop Cap di blog Wordpress maupun Blogger.

Dropped Capital (Drop Cap) adalah Huruf besar yang berada di awal paragraf yang biasa digunakan untuk menghias gaya tulisan agar lebih menarik. Kebanyakan Drop Cap berukuran 2 sampai 5 baris, tergantung pengaturan kita.

Cara membuat drop cap di blog

Untuk membuat Drop Cap di blog ternyata tidak sesulit yang kita bayangkan. Untuk Anda yang sering bergulat dengan dunia code CSS mungkin dapat dengan mudah membuat Drop Cap sendiri. Namun, untuk orang awam dan tidak mengerti tentang code, tenang disini saya akan membagikan cara membuat drop cap di blog.

Cara Membuat Drop Cap di Blogger

Disini saya akan menggunakan CSS untuk membuat Drop Cap. Cara ini sudah saya coba di beberapa template blogger dan berhasil. Jadi kemungkinan juga cara ini bisa digunakan di template Anda.

Anda bisa meng-copy code dibawah ini dan tempelkan di atas </style> atau </b:skin>.
.post-body:first-letter,
.post-body .dropcap:first-letter {
 font-weight: bold;
 font-size: 65px;
 float: left;
 padding: 0;
 margin: -4px 5px 0px 0px;
 position: relative;
 background-color: none;
 line-height: 0.9;
}
:first-letter = huruf pertama.

*Catatan: Drop Cap ini berfungsi jika di awal artikel Anda merupakan text. Jika di awal artikel Anda berupa gambar, kode ini tidak akan berfungsi.

Jalan satu-satunya jika di awal semua artikel sudah terlanjur berupa gambar, Anda dapat memindahkan gambar tersebut dibawah paragraf pertama atau menambahkan drop cap secara menual dengan menggunakan code:
<span class="dropcap">Ini adalah paragraf pertama</span>

Bagi Anda pengguna Wordpress untuk, menambahkan Drop Cap Anda bisa menggunakan plugin Block Gutenberg.

Apakah cara diatas berjalan dengan baik di blog Anda masing masing? Mungkin iya. Namun jika tidak, silahkan berkomentar di bawah.

Itulah tutorial cara membuat dropcap otomatis di semua postingan blog. Sekarang, artikel Anda menjadi lebih menarik dengan menambahkan drop cap. Semoga bermanfat, terimakasih.
Nando
By Nando

Anda di sini hanya untuk persinggahan yang singkat. Jangan terburu, jangan khawatir. Yakinlah bahwa Anda menghirup wangi bunga sepanjang perjalanan.

Subscribe

  1. Untuk membuat judul komentar, gunakan <i rel="h2">Judul Komentar</i>
  2. Untuk membuat kotak catatan, <i rel="quote">catatan</i>
  3. Untuk membuat teks stabilo, <i rel="mark">mark</i>
  4. Untuk membuat teks mono, <i rel="kbd">kbd</i>
  5. Untuk membuat kode singkat, <i rel="code">shorcode</i>
  6. Untuk membuat kode panjang, <i rel="pre"><i rel="code">potongan kode</i></i>
  7. Untuk membuat teks tebal, <strong>tebal</strong> atau <b>tebal</b>
  8. Untuk membuat teks miring, <em>miring</em> atau <i>miring</i>

Konten Unggulan