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. 

Cara Membuat Dropcap Huruf Besar di Awal Paragraf Blogger Otomatis

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. 

12 Comments

Tambahkan komentar Anda disini..

  1. Wah, jadi tahu sekarang nih cara membuat dropcap :) Mesti copas link tersebut ya mas? Jadi lebih nyeni deh tulisannya. TFS :D

    ReplyDelete
  2. Wahhh harus dicoba semua nihh triknyaa

    ReplyDelete
  3. ini diaa yang aku carii, biar keliatan lebih profesional artikelkuu :D

    ReplyDelete
  4. langkahnya masih applicable buat saya yang ga terlalu paham detail mengenai coding, bisa dicobaa. helpful banget tipsnyaa kalau mau build artikel seperti newsletter professional yaa. thank you!

    ReplyDelete
  5. Kalau melihat koran dan surat kabar. Emang rasanya menarik ya kalau huruf pertama di paragraf awal tuh gedhe.
    Cuma memang aku agak susah sih kalau harus edit CSS di blogspot.
    Kurang teliti aja bisa bikin template berantakan soalnya.
    Harus trial and eror dulu di blog lain yang saya pikir bodo amat kalau rusak tampilannya. Makanya aku punya beberapa blog gratisan buat praktik hal-hal begini nih. Bikin dropcap misalnya. Hehehe

    ReplyDelete
  6. Aiih aku selama ini cari cari loh, sampe pake manual saking pasrah sama dropcap yang ga berhasil juga diterapkan! Makasih yaaa

    ReplyDelete
  7. Ulasan yang bermanfaat dan patut dicoba.

    ReplyDelete
  8. Ooh ini berarti ngetik tulisannya langsung di blog ya? Kalau misal ngetiknya di Ms word lalu dicopas ke blog juga bisa kah nanti hasil font -nya kayak gini?

    Alhamdulillah kalau di blogspot bisa soalnya kadang baca tutorial ngeblog mau dipraktekkan eh ternyata khusus WP wkwkwk.

    Thank you mas entar aku praktekkan caranya. Semangat nulis dan ngeblog ya.

    ReplyDelete
  9. Dropcap ini seperti perubahan sederhana yang dampaknya besar ya. Orang yang baca artikel mungkin awalnya nggak sadar, tapi begitu notice, oh ada yang berbeda. Artikel kita jadi punya nilai estetik sendiri.

    Siap dicoba tutorialnya, Kak!

    ReplyDelete
  10. Oh namanya dropcap ya..
    Aku suka dengan penulisan blog yang aesthtetic karena membuat blog menjadi lebih menarik dan jadi betah berlama-lama membaca blog tersebut.

    ReplyDelete
  11. Oh ini untuk blogspot yah mas? Aku wordpress eui dan penasaran juga itu gimana bikinnya. Tampilan dropcap emang bikin orang fokus ke kalimat pertama dan mudah-mudahan lanjut baca sampai selesai.

    ReplyDelete
  12. Bang andri itu bisa bikin dua di atas, kata-kata hallo dan drop. gimana tuh n_n

    ReplyDelete

Post a Comment

Tambahkan komentar Anda disini..

Previous Post Next Post

Ads