Wednesday

Membuat Huruf Awal lebih Besar (Drop Cap)

Membuat tulisan bergaya koran pastinya sudah banyak yang mengetahui dan menggunakannya, tapi bagaimana dengan para pemula seperti Saya untuk menggunakan gaya menulis tersebut ? Setelah berkelana kesana kemari tanpa kenal lelah akhirnya saya mendapatkan ilmu tersebut dan dengan penuh keikhlasan saya buatkan cara-caranya supaya lebih banyak lagi blogger Indonesia yang memahami dunia blogging.

Penggunaan Drop Cap bisa dijadikan alternative agar blog kelihatan lebih menarik dan expressive, karena gaya penempatannya bisa bervariasi terserah mau ditaruh dimana posisinya (mau dikepala kek, dicelana kek, di jidat kek.. .. pokoknya suka-suka kita deh )

Sudahlah daripada berpanjang lebar nulisnya berikut urutannya yang harus ditempuh :

1. Login di blogger dengan ID anda (ya iyalah... masak pake ID orang lain)

2. Klik menu Layout (Tata Letak bukan Tata Dado )

3. Klik Tab Edit HTML

4. Jangan lupa kasih centong eh centang Expand Templates Widgets

5. Copy kode dibawah ini dan paste kan persis di atas kode ]]></b:skin>


/* kode untuk hurup awal
----------------------------------------------- */
.awal {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
}


6. Jika ingin memakai drop cap pada postingan, maka diawal huruf anda harus mengetikan:

<span class="awal">Huruf awal</span>

Contohnya seperti di awal tulisan Saya ini :

<span class="awal">M</span>embuat tulisan bergaya koran pastinya sudah banyak yang mengetahui dan menggunakannya, tapi bagaimana dengan para pemula seperti Saya untuk menggunakan gaya menulis tersebut ? Setelah berkelana kesana kemari tanpa kenal lelah akhirnya saya mendapatkan ilmu tersebut dan dengan penuh keikhlasan saya buatkan cara-caranya supaya lebih banyak lagi blogger Indonesia yang memahami dunia blogging.

Jadinya seperti ini :

Membuat tulisan bergaya koran pastinya sudah banyak yang mengetahui dan menggunakannya, tapi bagaimana dengan para pemula seperti Saya untuk menggunakan gaya menulis tersebut ? Setelah berkelana kesana kemari tanpa kenal lelah akhirnya saya mendapatkan ilmu tersebut dan dengan penuh keikhlasan saya buatkan cara-caranya supaya lebih banyak lagi blogger Indonesia yang memahami dunia blogging.

Catatan :
M = adalah huruf yang ditampilkan pada awal kalimat,ganti sesuai hurufnya.

.awal --> ini adalah penamaan saja, mau di ubah jadi begin, start, atau apa saja boleh, cuma jangan lupa untuk membubuhkan tanda titik (dot) di awal tulisan.

float:left; --> ini adalah kode agar tulisan awal di letakan pada posisi kiri alias mepet ke kiri, jangan di rubah kalau yang ini.

color: #000000; --> ini adalah kode untuk warna tulisan, kode #000000 adalah kode warna hitam, jika anda ingin warna yang lain boleh aja. oh ya untuk teks code warna anda bisa lihat disini http://free-7.blogspot.com/

background:#ffffff; --> ini adalah kode untuk warna latar belakang, kode #ffffff adalah kode warna putih, jika anda ingin warna yang lain silahkan di ganti sesuai keinginan.

line-height:80px; --> ini adalah kode untuk jarak baris, sebaiknya jangan di ganti.

padding-top:1px; --> ini adalah kode untuk jarak sela antara tulisan dengan bagian atasnya, sebaiknya jangan di ganti.

padding-right:5px; --> ini adalah kode untuk jarak sela antara tulisan awal dengan tulisan selanjutnya sebesar 5 pixel, jika anda berniat mengganti jaraknya, silahkan ganti nilainya saja.

font-family:times; --> ini adalah kode jenis hurup, yang di pakai adalah jenis times, jika tidak suka dengan times bisa di ganti dengan yang lain, mau Georgia, Verdana, sans-serif atau yang lainnya silahkan saja.

font-size:100px; --> ini adalah kode untuk besarnya hurup, jika mau di ganti silahkan ganti nilainya saja

atau kalo mo lihat contoh yang lain ada juga Disana

Semoga Bermanfaat bagi khalayak ramai...

43 comments:

  1. tips yang perlu dicoba neh.... thanks..

    ReplyDelete
  2. dah dicoba tapi tapi belum jalan nih..
    Copy kode dibawah ini dan paste kan persis di atas kode b:skin<------ini belum terlalu jelas buat AMATIR seperti saya..:P

    ReplyDelete
  3. Thanks sob.....aku mau nyoba ah......biar tampilannya kayak gitu....Tapi kalau waktu mosting span spannya nggak dipakai hurufnya tetap kecil kan?

    ReplyDelete
  4. @ yudie : sama-sama
    @ bisbi : pelan-pelan aja mas semoga berhasil
    @ buwel : betul..

    ReplyDelete
  5. dapet ilmu lagi disini...

    mo caba ah..apa bisa ntuk theme WP kayak saya..??

    ReplyDelete
  6. itu huruf M-nya besar sekalii...., eh itu dia yaah yang dinamakan dropCap...., tapi di blogspot kan? Kalau di wordpress bagaimana? Risti, bisa bantu sayahhh?

    ReplyDelete
  7. Di cobaa ah....keren juga.. keep share

    ReplyDelete
  8. NICE INFO... KEEP SHARE>>>....

    ReplyDelete
  9. tuk penulisan huruf awalnya terlalu panjang..coba liat tutorialnya o-om.com..

    ReplyDelete
  10. wajib nyoba ah biar variasi di postingannya..thanks infonya ya

    ReplyDelete
  11. sip bro......nice posting
    thanks dan salam kenal

    ReplyDelete
  12. wah keyennnn, nanti coba saya praktekan mas, biar blog saya ada gregetnya gituh ...

    ReplyDelete
  13. wah..., bole dicoba nie...

    ReplyDelete
  14. Makasih broo tutorialnya

    ReplyDelete
  15. Sip tutorialnya kang....

    ReplyDelete
  16. Nice Tutorial.... hehehe... Mampir ya:
    http://andryanseekyou.blogspot.com

    ReplyDelete
  17. ok thax's infonya.........

    ReplyDelete
  18. Saya coba nanti tips huruf besar di entri berikutnya.

    ReplyDelete
  19. Hemm.. oke juga ya klo membuat tulisan bergaya koran, jadi mau coba
    thnks ya infonya :)

    ReplyDelete
  20. Sering lihat gaya tulisannya ...tapi nggak pernah tahu kok bisa seperti itu...
    makasih banget tipsnya :D

    ReplyDelete
  21. nice...realy nice...

    ReplyDelete
  22. Update ur info....comment & LINK back tonight

    ReplyDelete
  23. keren banget nih blog..;)

    ReplyDelete
  24. coba dulu deh
    klo pake kode itu warna nya biru ya??
    klo mau di ganti warna ny gimana cara nya?

    ReplyDelete
  25. bagus nih jadi kaya di koran hehehehe...
    bookmarks dulu ah, ntar di coba..

    ReplyDelete
  26. boleh deh kapan2 nyoba... ^___^

    ReplyDelete
  27. mantap infonya.. bikin class buat drop cap..
    bisa aku praktekin gak ya..
    hehehe... :D

    ReplyDelete
  28. bagus juga tuh
    kapan2 boleh dicoba nih
    makasih buat tips-nya

    ReplyDelete
  29. Dulu di blog saya yang blogspot juga pake huruf awal lebih besar seperti itu, tapi lama2 sering kelupaan jadi ya udah gak diterusin lagi hehe...

    Makasih ya udah mampir... boleh kok tukeran link.. :)

    ReplyDelete
  30. bisa berlaku di wordpress ga ya? ntar di coba deh tips nya

    ReplyDelete
  31. >Everyone : Terima kasih teman-teman atas komentarnya.

    ReplyDelete
  32. Wah nice info niy... thanks uda sharing ^^

    ReplyDelete
  33. nice post ... langsung ke tkp deh

    ReplyDelete
  34. yang otomatis ada ga kayak gw pake readmore dibawah postingan yang otomatis jadi ga repot lagi

    ReplyDelete
  35. Klau untuk wordpress bisa ga ya...? Blog saya pake wordpress nih...

    ReplyDelete