Home » blogging » dian_sunday » Membuat Tulisan Dropcap Pada Postingan

Kamis, 07 Februari 2013

Membuat Tulisan Dropcap Pada Postingan

Membuat Tulian Dropcap Pada Postingan Blogpot


Dropcap adalah huruf awal suatu paragrap yang diperbesar, seperti tulisan-tulisan koran pada umumnya!
Tujuannya agar bentuk paragrap cenderung lebih enak dilihat oleh pengunjung blog Anda! Untuk membuat tulisan dropcap pada postingan blog sangatlah mudah, ada beberapa cara yang dapat Anda terapkan! diantaranya, Anda bisa menyisipkan kode CSS pada file CSS yang sedang digunakan pada blog atau website Anda!

Untuk kali ini ada 3 cara yang akan saya share pada postingan ini! yaitu dengan cara Inline CSS, Internal CSS dan External CSS

  • Inline CSS

    • Untuk Inline CSS Anda menggunakannya langsung saat menulis artikel dengan kode sebagai beikut :
    <p><span style="float:left; margin-right:4px; font-size:2em; vertical-align:text-top;">I</span>ni adalah contoh tulisan dropcap dengan Inline CSS</p>
    huruf I pertama pada kata Ini akan lebih besar(dropcap)!

  • Internal CSS

    • jika menurut Anda cara pertama kurang efisien, Anda dapat menggunakan cara yang lebih simpel, yaitu Internal CSS! Anda hanya cukup menulis kode CSS diantara tag <head> dan </head> Contoh:
    <head>
    <style type="text/css">
    span.dropcap {
    float:left;
    margin-right:4px;
    font-size:2em;
    vertical-align:text-top;
    }
    </style>
    </head>
    Untuk menampilkan Dropcap dengan cara ini,Anpa dapat menambah elemen class pada tag <span> dengan value dropcap
    <p><span class="dropcap">I</span>ni adalah contoh tulisan dropcap dengan Inlternal CSS</p>

  • External CSS

    • Jika Anda mempunyai File CSS yang telah diupload pada hosting, Lebih baik Anda menggunakan cara ini! Anda cukup menambah kode dibawah pada file CSS Anda!
    span.dropcap {
    float:left;
    margin-right:4px;
    font-size:2em;
    vertical-align:text-top;
    }
    Untuk menampilkan dropcap dengan cara ini sama dengan cara yang kedua!
Sekian posting Cara Membuat Dropcap Pada Postingan! Anda dapat menggunakan salah satu cara diatas!
Posted by: dian_sunday
diansunday Updated at: 23.38