23
Cara Membuat Drop Cap (Huruf Besar) Pada Awal Postingan Blog - Banyak sekali tutorial yang membahas tentang adanya Drop Cap (Huruf Besar) pada awal postingan blog. Drop Cap (Huruf Besar) ini sangatlah populer di dunia blogger ini, banyak sekali para blogger yang menggunakan Huruf besar pada awal penulisan artikel mereka sobat. Untuk memasang fitur Drop Cap di blog tidaklah sulit sobat,karena hanya menambahkan sedikit saja sebuah ramuan di template sobat. Nah,sebuah ramuan tersebut adalah ramuan yang dibuat dengan menggunakan kode CSS (Cascading Style Sheet) .


Cara Membuat Drop Cap (Huruf Besar) Pada Awal Postingan Blog

Fitur Drop Cap ini pada awal postingan akan membuat tulisan atau artikel blog memiliki style koran atau majalah karena banyak koran/majalah yang menggunakan style Drop Cap ini. Jadi, Drop Cap ini adalah suatu teknik dalam memperindah tampilan blog pada umumnya dan khususnya pada tampilan postingan sobat.

Tapi, tutorial Membuat Auto Drop Cap Pada Postingan di Blog ini auto otomatis. Jadi, sobat gak perlu lagi buat heading susah payah. Karena setiap sobat menulis artikel di postingan, akan secara otomatis muncul drop cap nya atau huruf besar. Nah, cara membuat Drop Cap sebagai berikut :


Cara membuat Drop Cap di dalam artikel blog :



1. Sobat harus Sign-In terlebih dahulu ke blogger.
2. Pilih template dan pilih tombol costumize untuk menuju halaman blogger template designer.
3. Klik advanced dan klik add css
4. Copy-paste kode dibawah ini pada kolom yang tersedia :


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


5. Lalu klik Apply to blog.

Nah, mudahkan sobat memasang tampilan Drop Cap ini? Tetapi, sobat juga harus ingat tentang satu hal ini. Tampilan Drop Cup tidak akan langsung muncul di postingan blog sobat. Untuk memunculkan Drop Cup pada awal postingan,sobat perlu menyisipkan sedikit kode saat menulis artikel sobat. Kode yang disisipkan sebagai berikut :


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

Ingatlah :


Kode tersebut disisipkan saat sobat menulis dalam mode Edit HTML dan bukan dalam mode Compuse ya sobat. Drop Cap tidak akan muncul jika sobat menulis dalam mode Compuse.


Tambahan :


#000000 adalah warna font dari Drop Cap dan #ffffff adalah warna background. Untuk melihat kode warna,sobat bisa mengunjungi Kode Warna

Post a Comment

  1. Kalo dibesarin manual lewat editornya aja gimana gan ? sama nggak ? hehehe :D
    Nice tutorial gan , Dalon sih sedikit ngerti masalah CSS , tapi lupa fungsi padding itu apaan yak ? :o

    ReplyDelete
  2. nambah ilmu lg nihh klo kya gini :D ijun praktek gan . ntr klo masih ada yg blum ngerti saya balik lagi ke mari :)

    ReplyDelete
  3. html yah,,,
    belum paham bener tapi bagus buat belajar
    :D

    ReplyDelete
  4. nah ini yang saya cari, trimakasih :)
    www.fajaralrahmansyah.web.id

    ReplyDelete
  5. Keren, jadi kayak artikel-artikel profesional nih thx gan infonya

    ReplyDelete
  6. Dulu nya ane lupa sama kode ini tapi sekarang udah ingat karna baca post ini
    Nice share bro :)

    ReplyDelete
  7. kebetulan ane lagi cari ini.. nice share gan..

    ReplyDelete
  8. Thanks gan, bermanfaat. Jadi, kalo ndak disisipin kode huruf awal dropcapnya ndak muncul?

    ReplyDelete
  9. alhamdulillah , nambah ilmu nih tentang dropcap :) ijin coba sob , :)

    ReplyDelete
  10. Jadi gitu yah gan, ane terapin ah nanti diartikel biar tambah menarik :D hehe

    ReplyDelete
  11. keren artikelnya nih perl dicoba :D

    ReplyDelete
  12. coleh dicoba tapi pengen yg auto ya

    ReplyDelete
  13. waa. makasi yaaa, membantu banget. nanti saya apply lngsng di blog saya.
    bole mampir donk, www.seldivo.blogspot.com

    ReplyDelete
  14. Gan, lha script keduanya itu diletakkan dimana ya waktu ngepost? mohon dijelaskan
    Makasih

    ReplyDelete
  15. izin mau coba ke pakai di blog sya mas.

    ReplyDelete
  16. menarik sekali mas, saya tertarik ingin memakainya

    ReplyDelete

 
Top