Cara Membuat Dropcap Huruf Besar di Awal Paragraf Blogger Otomatis

Halo teman-teman blogger, pada pembahasan kali ini masih berkaitan seputar blogging. Saya akan berbagi tutorial cara membuat dropcap atau yang biasa kita jumpai di koran, majalah, dan undangan terkait penggunaan huruf besar atau kapital di awal kalimat. 

Drop Cap adalah huruf awal pada paragraf pertama yang memiliki ukuran yang berbeda atau diperbesar seperti digunakan pada surat kabar atau kamu juga bisa melihatnya pada artikel blog ini. 

Fungsi penerapan dropcap di blogger sebenarnya yaitu untuk mempercantik tampilan postingan artikel, sehingga bisa terlihat lebih menarik dan berbeda dengan blog-blog pada umumnya. 

Cara Membuat Dropcap Huruf Besar di Awal Paragraf

Pembuatan dropcap sebenarnya tidak hanya dikoran, majalah, atau undangan saja. Akan tetapi juga bisa dibuat di Blogger atau platform blog lain seperti WordPress. Cara membuatnya pun cukup mudah, hanya menggunakan CSS saja, simak langkah-langkahnya dibawah ini.

#Langkah pertama membuat Dropcap

Silahkan salin kode css dibawah ini, lalu tempel diatas kode penutup </style> atau ]]></b:skin>.

.post-body p:first-child:first-letter{
   float:left;
   line-height:50px;
   padding-right:5px;
   font-size:60px;
   align-items:center;
}

Caranya:

1. Masuk ke Dashboard Blogger
2. Pilih menu Tema / Template > pada tombol Sesuaikan pilih Edit HTML 
3. Selanjutnya cari </style> atau ]]></b:skin> (Gunakan CTRL+F untuk memudahkan pencarian kode)
4. Kemudian salin kode css diatas dan tempelkan kode tersebut diatas kode </style> atau ]]></b:skin>

Pada kode css diatas akan mengubah semua postingan diblog menjadi huruf besar pada awal kalimatnya. 

Sebagai catatan penting, jika tampilan drop cap tidak sesuai atau tulisannya tidak presisi dengan kalimat selanjutnya, kamu dapat mengubah line-height atau font-size agar bisa sesuai. 

#Langkah kedua penerapan Dropcap dipostingan blog

Untuk penerapan dropcap dipostingan blog sebenarnya tidak ada hal tambahan yang perlu dilakukan. Kamu cukup membuat artikel seperti biasanya, maka saat artikel dipublikasikan akan secara otomatis pada awal kalimatnya akan berubah menjadi huruf besar. 

Jadi kamu tidak perlu menambahkan class manual dipostingan blog, lalu memilih kata yang ingin diperbesar. Mungkin jika kamu menemukan tutorial cara membuat drop cap di blogger diluar blog auqri, kamu diminta untuk menambahkan class dropcap pada kata yang ingin diperbesar ukurannya.

***

Cara Alternatif Membuat Drop Cap dengan CSS

Selain menerapkan cara diatas terkait membuat dropcap huruf besar di awal kalimat postingan blog, kini ada alternatif cara lain menggunakan initial-letter. 

Dengan hal ini, kita tidak perlu mengatur line-height atau ukuran font, karena nantinya akan secara otomatis drop cap menyesuaikan ukuran huruf pada paragraf tersebut. Misalnya saya penggunaan kode css dibawah ini.

.post-body p:first-child:first-letter {
  initial-letter: 2;
}

Penggunaan css diatas akan membuat tampilan blog dan tulisan dipostingan blog lebih responsive baik di browser PC maupun mobile. Namun sayangnya penggunaan initial-letter ini masih belum banyak digunakan oleh browser-browser lain, hanya berfungsi di browser safari saja. 

Nah demikianlah tutorial cara membuat dropcap huruf besar pada awal kalimat atau paragraf postingan blogger secara otomatis. Jika ada pertanyaan atau kendala hal lain, silahkan berkomentar pada kolom dibawah. Semoga bermanfaat.