Cara Membuat Dropcap atau Huruf Besar di Awal Postingan

Cara Membuat Dropcap atau Huruf Besar di Awal Postingan

Cara Membuat Dropcap atau Huruf Besar di Awal Postingan - Dropcap adalah huruf pertama dalam paragraf yang ditampilkan lebih besar dan mencolok. Biasanya kita melihat dropcap di koran, majalah, novel dan lainnya. Fungsi dari dropcap adalah untuk memperindah tampilan suatu halaman, dengan begitu akan lebih enak dipandang.

Nah, Dropcap sendiri bisa diterapkan di tiap postingan atau artikel dalam suatu blog. Dengan begitu tampilan postingan atau artikel yang kamu buat jadi sedikit lebih menarik. Untuk menerapkannya ke dalam artikel, kita hanya perlu menambahkan sedikit CSS yang akan mimin tuliskan caranya dibawah ini. Simak baik-baik ya.

Cara Memasang Kode Dropcap

  1. Pertama dan yang paling utama tentu kamu harus login dulu ke akun Blogger milikmu.
  2. Kemudian meluncur ke mode Edit HTML dengan klik Template => Edit HTML.
  3. Lalu kamu cari kode ]]></b:skin> atau </style>. Agar lebih mudah mencarinya silahkan tekan tombol CTRL dan F secara bersamaan.
  4. Copy kode dibawah ini lalu pastekan di atas kode ]]></b:skin> atau </style>.
  5. Terakhir Simpan Template.
.dropcap{float:left;color:#0A0A0A;background:#fff;line-height:44px;padding-right:5px;font-family:Arial;font-size:50px;}


Cara Membuat Dropcap di Awal Postingan

Nah, untuk menerapkan di dalam postingan silahkan masuk ke editor postingan. Jangan lupa untuk masuk ke mode HTML (bukan Compose). Untuk membuat dropcap kamu hanya perlu meletakkan kode ini diantara huruf pertama yang ingin dibuat lebih besar dan menonjol.
<span class="dropcap">Huruf yang akan di Dropcap</span>
Contoh:
<span class="dropcap">J</span>ika melindungi kapten saja tidak bisa, ambisi apapun tidak ada artinya! - Roronoa Zoro (One Piece)
Dalam contoh diatas mimin membuat huruf J menjadi lebih besar alias Dropcap. 
loading...
Share This :

Related Post

avatar

Tips yang sangat mudah dipahami dan diterapkan..
kebetulan ane belum pernah mencoba dan insya allah akan saya coba terapkan..
terima kasih gan..

delete 8/1/17
avatar

wah cocok nih gw di kasih tugas buat artikel bisa di pake tutor ini

delete 8/1/17
avatar

Wih.. gampang banget!
Cukup taruh kode di bawah style dan ubah mode menjadi compose.. ternyata mudah juga ya?

Tapi kalau ganti tenplate berarti settingannya ilang ya gan?

Enak di wp nih, tinggak install plugin.. jhehehe

delete 8/1/17
avatar

Ternyata di Blogger juga bisa ya? Kalau di wordpress, beberapa theme bisa menggunakan shortcode untuk menampilkan dropcap, jadi tidak perlu repot-repot input htmlnya.

Saya pribadi belum pernah pakai dropcap, tapi akan mempertimbangkannya.

Terima kasih infonya gan.

delete 8/1/17
avatar

sampai sekarang sih belum pakai cara ini sih gan, tapi patut nih buat dicoba, lanjutkan tips triknya

delete 8/1/17
avatar

Hehehehe saya baru tau

delete 8/1/17
avatar

makasih gan, bermanfaat

delete 8/1/17
avatar

Silahkan dicoba gan.. semoga bermanfaat :)

delete 9/1/17
avatar

Boleh tuh boleh :)

delete 9/1/17
avatar

Gampang dong gan :D Iya gan kalau ganti template settingannya ilang, tapi bisa ditambahin ulang kok gan ga ribet :)
Kalo di wp emang tinggal install plugin, tutorial ini memang ditujukan utk pengguna blogspot hehe..

delete 9/1/17
avatar

Iyaa gan justru saya ga tau kalo di WP semudah itu.. belum pernah nyoba wp sih hehe.

delete 9/1/17



sentiment_satisfied Emoticon