Cara Mudah Membuat Drop Cap Pada Postingan Blog

Saat kita membuat postingan dalam blog kita, kita tentu ingin selalu berekplorasi lebih banyak lagi tentang cara apa yang bisa kita gunakan dalam menghasilkan tulisan yang selalu lebih baik dari waktu ke waktu. Bagi kita yang masih pemula dan baru saja belajar mengenai masalah tulis menulis, silakan baca kembali artikel berlabel tips menulis.


Ada beberapa cara atau teknik menulis dari menulis yang menggunakan Microsoft Word dan dapat kita aplikasikan saat kita menulis di sebuah blog. Selain cara itu dapat kita lakukan karena sudah ada menu-menu yang tersaji di bagian kotak pembuatan postingan/entri, kita juga dapat menggunakan cara itu melalui beberapa trik meski tidak ada menu yang tersaji guna melakukan perintah menu tersebut.
Contohnya adalah membuat tabel, membuat border/garis tepi, dsb.

Nah, pada kali ini kita akan membahas bagaimana cara membuat drop cap atau tulisan yang menampilkan satu huruf kapital saja pada awal paragraf. Manfaat drop cap adalah tulisan di blog akan menjadi lebih menarik untuk dilihat. Karena unsur estetika tetap terpelihara walau kita tidak harus menerapkannya.

Cara untuk membuat drop cap pada postingan blog adalah sebagai berikut:

Masuk ke dalam akun blogger kita masing-masing.
Klik rancangan.
Klik edit HTML.
Klik expand widget template.
Cari kode berikut.

]]></b:skin>

Letakan kode ini di atasnya.

/* huruf besar
----------------------------------------------- */
.besar {
float:left;
color: #000000;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
}

Klik simpan.

Selanjutnya, ketika kita ingin menambahkan tulisan yang akan muncul dengan gaya drop cap, maka tambahkan kode berikut ketika kita hendak menerbitkan tulisan di kotak posting. Kode ini ditambahkan di bagian edit HTML, bukan compose.

<span class="besar">Huruf yang ingin dijadikan huruf besar</span>

Keterangan:

  1. Ubah kode HTML warna pada color: #000000; dengan warna yang kita sukai.
  2. Ubah ukuran huruf drop capnya pada font-size:100px; sesuai selera kita.


Membuat drop cap pada postingan blog itu mudah bukan?
Setelah menerapkan trik ini, maka tulisan di blog kita akan terlihat lebih rapi dan enak dipandang.

Jika ada pertanyaan silakan sampaikan lewat kotak komentar ya.
Salam blogger!

36 komentar:

  1. emang Sob...dengan mengunakan drop caps maka tampilan postingan kita kayak koran jaman dulu. terkesan unik dan menarik...nice share and happy blogging!

    BalasHapus
  2. Kerennnn...nyobain ah, makasih Ya.

    Salam

    BalasHapus
  3. dulu pernah coba tapi manual dipostingan langsung,,
    nice info sob :)

    BalasHapus
  4. Bagus nih, bisa memperindah tulisan dalam postingan. Sekaligus follow back nih sob

    BalasHapus
  5. @Iskaruji dot com:

    benar, drop cap bisa digunakan untuk mempercantik tampilan postingan blog, khususnya blog yang bertemakan sastra dsb.
    trims sudah berkunjunga ya. :)

    BalasHapus
  6. @Obrolan Blogger.com:

    silakan bro.
    semoga bermanfaat ya.

    BalasHapus
  7. @hanparan:

    oh, lalu bagaimana hasilnya?
    sama dengan teknik ini? :)

    BalasHapus
  8. @keyword terkenal:

    iya, semoga bermanfaat ya. kalau tulisan semakin bagus dan rapi akan mengundang perhatian pengunjung untuk membaca.
    trims atas folbaknya. :)

    BalasHapus
  9. sama seperti yg gw pake nih sob,, hehhe,, keren emg kyk model koran,, :D thx for sharing,,, :)

    BalasHapus
  10. dengan drop cap tulisan yg kita publikasikan akan terlihat lebih menarik untuk dibaca. ada nilai seninya daripada gaya konvensional. :)

    BalasHapus
  11. Ok sobat izin mencoba dulu ya.Sanagat manfaat sekali.Untuk masuk ke edit HTML agak takut sob hehehe

    BalasHapus
  12. ya ampyun keren sekali infonya... saya sangat ingin belajar utak atik blog, tapi kebentur sama waktu.
    terima kasih sharing nya ya...
    nice post.

    BalasHapus
  13. wah makasih infonya ,bisa dicoba :)

    BalasHapus
  14. nice share sobat,, sepertinya bisa diterapkan di blog saya sobat...

    BalasHapus
  15. @Bisnis Online Blog:

    tenang saja, yg penting kita download template kita terlebih dahulu sebagai backup kalau editing gagal. selamat mencoba. :)

    BalasHapus
  16. @Asis Sugianto:

    silakan dicoba dan semoga bermanfaat ya.

    BalasHapus
  17. wah kayak tulisan jaman dahulu kala ya , tulisananya jd profesioanl gt

    BalasHapus
  18. lebih tepatnya mirip dengan tulisan model surat kabar.

    BalasHapus
  19. @Gadget news:

    semoga bermanfaat dan silakan dicoba. :)

    BalasHapus
  20. salam kenal. semoga betah berkunjung terus ya.

    BalasHapus
  21. Artikel kita akan terlihat seperti majalah atau koran yach sob.Cuma ditemplate ane,tip ini ga bekerja,kenapa yach?Ane mohon pencerahan,makasih sebelumnya,happy blogging.

    BalasHapus
  22. perhatikan betul penempatan kode dalam edit HTMLnya.
    setelah itu, pastikan kita memasang kode untuk mengapit abjad yg dijadikan besar hanya pada edit HTML, bukan compose.
    gunakan kode ini untuk mengapit satu abjad saja, bukan kata atau kalimat.

    BalasHapus
  23. Jadi inget model2 koran tahun 90an. Btw itu contohnya apa tidak terlalu ekstrim ? Ukuran huruf 100px tu kan besar sekali. 72px aja udah 1 halaman penuh :p

    Salam Kenal,
    Kevin
    Blog : www.nostalgia-90an.com
    Nostalgia Segala Sesuatu Pada Tahun 90an

    BalasHapus
  24. hanya contoh, bisa dirubah sesuai selera dan kebutuhan. :)

    BalasHapus
  25. Wah keren ya... baru tau klu ada yang namanya DROP CAP...
    hihihih...
    ketiggalan Tutor BLogspot ni...
    Terus posts ya sob...

    BalasHapus
  26. silakan berkunjung lebih rajin lagi. :D

    BalasHapus
  27. lumayan Gan, buat bagusin tampilan blog... buat pengunjung lebih tertarik lagi untuk baca... unik! :)

    BalasHapus
  28. betul. variasi kadang dibutuhkan agar minat pengunjung untuk membaca artikel di blog kita semakin besar.

    BalasHapus
  29. ini dia Y lg ane cari
    makasih ya gan sangat membantu
    mantapp . . .

    BalasHapus
  30. senang bisa bermanfaat.
    ditunggu ya kunjungan berikutnya.

    BalasHapus
  31. numpang promote ya gan :D http://soft-gratis21.blogspot.com/

    BalasHapus
  32. makasih mas.. jadi nambah lagi nich ilmu CSSnya.. salam persahabatan..

    BalasHapus
  33. Langsung Saya coba .... :)
    Terimakasih Mas :D

    BalasHapus
  34. Informasi yang sangat bagus dan berguna. Ditunggu untuk informasi berikutnya. Thanks gan

    Silahkan berkunjung di intanqq

    BalasHapus