Sunday

Memasang Dropcaps

Dropcaps pernah aku gunakan dulu, ia memang cantik jika kamu benar-benar kreatif.

Ini adalah sebahagian tutorial yang pernah aku buat pada blog aku yang sebelum ini. Insya'Allah kesemua tutorial lain akan siap dipindahkan ke sini selepas aku memperbaiki cara tulisan aku.

Sebenarnya Dropcaps adalah huruf yang dibesarkan pada awalan perkataan. Nama dropcaps diambil setelah ia diperkenalkan dalam Microsoft Word. Dan ia banyak digunakan dalam surat khabar satu ketika dahulu. Buat masa sekarang ia telah digunakan dalam beberapa majalah dan terus menular ke dalam blog.

Tapi itupun kalau kamu rajin nak buat.

Memasang Dropcaps

01. Pilih Template > Edit Html.

02. Cari kod ini :

]]></b:skin>


03. Tambahkan kod ini diatasnya :

.dropcaps {
color:#445566;
float:left;
font-family: Times, serif, Georgia;
font-size:100px;
line-height:70px;
padding-top:2px;
}


04. Pilih Save.

05. Pilih Setting > Formatting > Post Template.

06. Tambahkan kod ini :

<span class="dropcaps">P</span>enulisan bermula disini

Kod ini akan tertera setiap kali kamu membuat Dropcaps, masukkan saja bahagian huruf yang kamu ingin besarkan kedalam kod tersebut.

07. Pilih Save.

36 comments:

  1. matkapak22.3.09

    rembat laa tunggu lgi,tq!

    ReplyDelete
  2. salam...
    haha, sape la yang rajin sangat nak customize entry cenggini...hehe, mmg tabik spring la...
    tp kan...mmg byk lagi benda2 html script ni kalau explore kan...mcm2 boleh buat...hehe...
    neway, good tutorial...

    ReplyDelete
  3. mmg best..
    bleh dipraktikkan kat blog peribadi aku nanti

    hoh ..

    ReplyDelete
  4. Sat.. aku rasa aku dah komen dah tadi. Ke itu ilusi aku semata-mata.

    Btw, cara penulisan ko oke je bagi aku, teruskan memberi tutorial =)

    ReplyDelete
  5. Teruskan memberi tutorial.
    Windu banget sama Blog Menjerit. :D

    ReplyDelete
  6. Mende ruumates tu? iklan? aku terkonpius dgn tutorial ko

    ReplyDelete
  7. Alamak boss... tak jadi lah.... ada perubahan... macam tak jadi je... kod yg kat bawah b:/skin tu dah ada kat atas header pulak

    ReplyDelete
  8. @4952399754699876716.0
    sudah diperbetulkan, terima kasih.

    ReplyDelete
  9. @matkapak
    rembat jangan tak rembat.

    ReplyDelete
  10. @MK
    dulu lembut sikit tutorial, sekarang kasar sikit tutorial. saja nak jadikan trademark.

    ReplyDelete
  11. @EiNS
    klik je iklan tu baru tahu.

    ReplyDelete
  12. @5117272503358866940.0
    yang penting kena rajin, tu je.

    ReplyDelete
  13. aku pun penah guna gak.. bleh membuatkan visitor tertarik baca entry korang.hehe..

    slepas ni, wat tutorial cmna hide-menghide comment tu plak.hehe

    ReplyDelete
  14. @8742244094131772187.0
    sabar dik oi!

    ReplyDelete
  15. camne ko buat thread comment neh? :)

    ReplyDelete
  16. thanks marzuki, aku dah rembat dengan jayanya tutorial ini.

    Aku juga dah link kan blog kau ini pada blog aku, so pepaham je ye.heehe.Tq.

    ReplyDelete
  17. @2464092716066963063.0
    Nantilah aku tutorkan. Sabar ek!

    ReplyDelete
  18. hahaha...

    satu satunya tutorial yang ma bolah faham dan baca samapi abes.

    lalala...

    ReplyDelete
  19. @608112032410190256.0
    Ini yang kacang je. Nanti pa bagi yang durian plak.

    ReplyDelete
  20. Erm nilah aku dok cari2..sbb aku tulis ebook percuma aku tu nampak sengal jerk..nak gak creativiti..hahahah

    ReplyDelete
  21. gempak la brader hackers.

    ReplyDelete
  22. @1916261910604240939.0
    hekhek...

    ReplyDelete
  23. @6185905025476474332.0
    Sumpah tak faham, ahahaha.

    ReplyDelete
  24. @8952794832533738151.0
    Ebook apa? Bagilah aku baca.

    ReplyDelete
  25. Dah implement threaded comment ek, boleh style tak dia punya colour?

    ReplyDelete
  26. Salam...
    Kenapa saya buat tak menjadi?
    Huruf awal entry saya tak jadi besar pun...
    : (

    ReplyDelete
  27. Saya buat di blog baru saya...
    http://resepistimewa4u.blogspot.com/

    ReplyDelete
  28. @2024065824812085527.0
    bubuh kod no 3 atas body ( kalau tak jadi.

    ReplyDelete
  29. Salam...
    body ada banyak... Nak letak atas body yg mana satu nih?

    ReplyDelete
  30. aku nak buat untuk WP ada tak juki?

    ReplyDelete
  31. @2714430361491838499.0
    Plugin tak ada kot tapi boleh je guna tutorial ni. Asalkan paste ditempat yang betul menjadilah.

    ReplyDelete
  32. @1217446908366368273.0

    Letak bawah kod ini :

    #navbar-iframe {
    height:0px;
    visibility:hidden;
    display:none
    }

    ReplyDelete
  33. @3342188855729552194.0
    Yang tu cuma edit Css saja.

    ReplyDelete
  34. ok ! jadi dah...
    Terima Kasih bro Juki..

    ReplyDelete
  35. U are so good.. Terima kasih kerana sudi memberi pelbagai ilmu.. to all nation.. Keep it up..

    ReplyDelete