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. tuk penulisan huruf awalnya terlalu panjang..coba liat tutorialnya o-om.com..

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

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

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

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

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

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

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

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

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

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

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

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

    ReplyDelete
  20. 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
  21. bisa berlaku di wordpress ga ya? ntar di coba deh tips nya

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

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

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

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

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

    ReplyDelete