Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Friday, November 1, 2013

drop cap

Huruf kapital besar diawal paragraf disebut dengan drop cap, cara membuat drop cap ini sangat mudah, drop cap ini hanya mengandal fungsi css untuk menampilkannya. Buat teman teman blogger yang menginginkan design paragraf yang lebih unik, anda dapat mengandalkan sistem drop cap ini untuk memberi kesan elegan pada tulisan halaman blog kesayangan anda. Sistem Drop cap ini sangat sering kita jumpai pada majalah, koran dan beberapa buku jadi tidak ada salahnya bila kita memasangnya pada halaman blog kesayangan kita agar tulisan ari blog kita lebih unik. Untuk melihat demonya silahkan lihat huruf awal dari paragraf artikel postingan ini, dan jangan lupa simak tutorial dibawah ini bila anda tertarik untuk memasangnya pada halaman blog anda.

Install Program CSS


  1. Login ke dashboard anda
  2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  3. Cari code ]]></b:skin> 
  4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.


  5. /*****************************************
    Name : Drop Cap
    By : Rivai Silaban | Blog Design
    Update : Jumat, 01 November 2013
    ******************************************/
    .drop-cap {
    font-family: "Times New Roman", Times, serif;
    font-size : 70px;
    margin-bottom:-20px;
    color: #990000;
    font-weight: bold;
    line-height : 65px;
    float : left;
    text-shadow:-2px -2px 3px #666;
    margin-right:4px;
    }
    /* end css */



  6. Untuk menampilkan Drop Cap pada paragraf halaman blog anda atau tulisan anda, setiap penulisan kode html pada paragraf halaman blog, anda wajib menambahkan code <span class='drop-cap'> sebelum huruf pertama kalimat dan ditutup dengan code </span> pada tag htmlnya seperti contoh dibawah ini.

    Penulisan code text dengan sistem DIV

    <div >
    <span class='drop-cap'> T </span> ulisan atau kalimat anda yang muncul pada halaman blog kesayangan anda.
    </div>

    Penulisan code text dengan sistem P

    <p >
    <span class='drop-cap'> T </span> ulisan atau kalimat anda yang muncul pada halaman blog kesayangan anda.
    </p>

    Penulisan code text dengan sistem SPAN

    <span >
    <span class='drop-cap'> T </span> ulisan atau kalimat anda yang muncul pada halaman blog kesayangan anda.
    </span>


Kesimpulan

Code warna MERAH merupakan kode html untuk menampilkan drop cap pada suatu paragraf halaman blog anda.

Warna HIJAU merupakan huruf yang akan dibesarkan hingga ukuran 10 kali lipat dari huruf lainnya yang berada di awal paragraf. Gunakan huruf besar setiap anda ingin membuat drop cap.

Bila anda mengalami kesulitan pada pemasangan code drop cap ini atau menemukan kode yang tidak berpungsi, silahkan hubungi kami atau share bersama kami melalui form komentar dibawah ini. Pergunakan semua fasilitas pada halaman blog ini untuk mempermudah anda.

Drop Cap
Jumat, 01 Novenber 2013
Rivai Silaban | Blog Design

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 12:10 PM

8 comments :

  1. kalau untuk yang otomatis gimana mas ?

    ReplyDelete
    Replies
    1. kalo yg atomatis ada sih tapi tergantung kode html penulisan kalimatnya, ada yang memakai kode P, DIV dan SPAN , bila kita memakai kode otomatis untuk P atau paragraf pastinya semua paragraf akan menampilkan Drop Cap untuk keseluruhannya..

      silahkan ganti code CSSnya ( .drop-cap ) menjadi

      p:first-child:first-letter

      Tapi perlu di ingat mas, setiap kode P akan menampilkan hurup besar diawal paragrafnya.
      dan belum suport IE < 9 mas

      Delete
  2. keren boss, terima kasih sudah berbagi. Salam.

    ReplyDelete
  3. gan ane pakek template the fighter dari agan tapi drop copnya kok gk bisa di praktekin ya? jadi bingung ane gan... bisa di bantu gan

    ReplyDelete
    Replies
    1. masa ngak bisa sob, pasti bisa...
      simpan ulu CSSnya, terus bila ingin membuat postingan selalu sematkan kode dibawah ini.

      <span class='drop-cap'> C </span> ontoh tulisan anda.

      bila agan membuat suatu postingan baru, klik HTML lalu masukkan coenya, agan mengetik tulisan agan itu melalui HTML nya gan jangan dari compose...

      Delete
  4. Tutornya Keren Bang...Dapet Ilmu baru..hehehe

    ReplyDelete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog