Cara Membuat Huruf Drop Cap di Blog - Hi friends, I hope you are all in good healthwallpaper, In the article you are reading this time with the title Cara Membuat Huruf Drop Cap di Blog, We have prepared this article well for you to read and take information in it. hopefully the contents of the post Artikel Blog, what we write you can understand. ok, happy reading.

Title : Cara Membuat Huruf Drop Cap di Blog
link : Cara Membuat Huruf Drop Cap di Blog

Cara Membuat Huruf Drop Cap di Blog

Pernahkah sobat memperhatikan beberapa website memiliki tampilan huruf pertama di awal paragraf berukuran lebih besar dibandingkan huruf setelahnya?

drop cap (jamak drop caps) - (Tipografi) Sebuah huruf awal besar yang turun di bawah baris pertama paragraf , biasanya digunakan pada awal bagian atau bab dari sebuah buku. Wikipedia

CatatanDroid sendiri menerapkan tampilan ini karena dirasa lebih enak dilihat dan sebagai tanda pembeda awal paragraf pada artikel.

Bagaimana Cara Membuat Drop Cap di Blog?

Hanya Bermain Kode Html dan CSS - Membuat tampilan huruf awal Drop Cap di artikel blog cukup mudah dilakukan, pada konsepnya kita cukup menambahkan class baru pada selector span.

Yang selanjutnya class baru tersebut kita isi dengan beberapa baris kode css yang untuk membuat tampilannya berubah sesuai dengan yang kita inginkan.

Tutorial Membuat Drop Cap Huruf Awal Lebih Besar

1. Buka Blogger.com dan login dengan akun sobat
2. Buka menu Template/Theme
3. Klik icon tanda panah kebawah disamping tombol Customize/Kostumisasi
4. Lanjut pilih Edit HTML
5. Masukan kode CSS berikut ini diatas /b:skin
   

   .first-letter { float: left; color: #636363; font-size: 47px; font-weight: 700; padding-right: 6px; line-height: 1em; }

6. Save template

Kode CSS first-letter telah berhasil kita pasang pada template blog kita, selanjutnya adalah tinggal menerapkannya kedalam artikel.

Yuk langsung praktek!

Penerapan Drop Cap di Artikel

1. Buat postingan baru / edit postingan yang sudah ada
2. Atur editor ke mode HTML view
3. Pada huruf awal bungkus dengan kode ini
   

   <span class="first-letter">(huruf pertama)</span>

   
   contoh kata awalnya Pernahkah :
   

   <span class="first-letter">P</span>ernahkah

4. Review/Publish artikel dan lihat hasilnya

Nantinya huruf P yang telah kita bungkus dengan span class first-letter diatas akan terlihat lebih besar sendiri seperti huruf pertama pada awal paragraf artikel ini.

Penjelasan Tambahan

Kata first-letter pada class="first-letter" dapat kalian ubah sesuka hati pada langkap CSS diatas.

Misal ingin kalian ubah menjadi dropcaps atau huruf-awal, contoh:

.dropcaps { float: left; color: #636363; font-size: 47px; font-weight: 700; padding-right: 6px; line-height: 1em; }

atau

.huruf-awal { float: left; color: #636363; font-size: 47px; font-weight: 700; padding-right: 6px; line-height: 1em; }

Dan jangan lupa, ubah juga kata "first-letter" pada baris <span sesuai dengan kata class yang telah kalian ganti ya!

Jika ingin merubah warna silahkan ganti kode hex warna #636363 diatas, dan jika ingin merubah ukuran silahkan ubah 47px.

Penutup dan Kesimpulan

Bagaimana sobat, cukup mudah bukan? dengan kode CSS sederhana diatas kita dapat membuat tampilan awalan huruf paragraf artikel kita menjadi tampil beda.

Cara ini CatatanDroid dapatkan dari beberapa kode yang terdapat di dalam template-template blogger keluaran Arlinacode/idntheme. Thanks to them.

Akhir kata semoga artikel tips blog cara membuat drop cap di artikel blog kali ini dapat bermanfaat bagi sobat pembaca. Terima kasih dan Selamat mencoba! CatatanDroid

That's the article Cara Membuat Huruf Drop Cap di Blog

That's it for the article Cara Membuat Huruf Drop Cap di Blog this time, hopefully can be useful for all of you. okay, see you in another article post.

You are now reading the article Cara Membuat Huruf Drop Cap di Blog with link address https://wallpapers-10.blogspot.com/2021/08/cara-membuat-huruf-drop-cap-di-blog.html