Cara Menulis Huruf Awal pada Paragraf Lebih Besar di Blog
Hallo semua, pada halaman ini saya akan membagikan cara menulis huruf awal pada paragraf lebih besar dari huruf yang lain. Contoh seperti huruf awal pada paragraf ini.
Huruf kapital yang ada pada bagian awal paragraf atau yang biasa disebut Dropcap adalah sebuah teknik tipografi untuk menambah daya tarik visual dan memberikan kesan profesional pada artikel.
Dropcap biasanya memiliki ukuran dua baris lebih besar atau lebih. Nah saya sendiri mengunakan dua baris karena tidak terlalu besar ataupun kecil. Awalnya penulisan seperti ini saya terinspirasi ketika sedang mengunjungi blog nya mas Wendy.
Sebagai orang yang tidak terlalu mengerti tentang coding, saya kesusahan mencari cara bagaimana supaya tulisan bisa seperti itu. Apalagi saya gak tahu apa nama dari teknik penulisan seperti itu, hal tersebut yang membuat saya kesulitan untuk mencari informasi dan tutorialnya.
Namun tak kehabisan akal saya menggunakan ChatGPT untuk mencari tahu dengan mengetikan kata kunci secara asal beberapa kali dan benar saja usaha tidak akan mengkhianati hasil. Dari situ saya jadi tahu dan saya mencoba memodifikasi kode yang saya dapatkan.
Setelah berhasil, jadi saya memutuskan untuk membagikan cara ini supaya dapat membantu kalian yang masih pemula agar tidak kebingungan seperti yang saya alami.
Jika kamu tertarik, langsung aja yuk simak dan ikuti langkah-langkahnya dibawah ini:
Cara Menulis Huruf Awal pada Paragraf Lebih Besar di Blog
Buka dashboard blogger > tema > edit html lalu salin css dibawah ini dan letakan diatas kode ]]</b:skin> atau </style>
/* Style untuk dropcap */
.dropcap {
font-size: 3em; /* Ukuran huruf besar pertama */
float: left; /* Mengapung di kiri teks */
margin-right: 0.1em; /* Jarak antara huruf besar dan teks */
line-height: 1; /* Mengatur tinggi baris */
}
Jika sudah silahkan simpan, dan untuk menerapkannya pada html kamu bisa menuliskan seperti dibawah ini:
<p><span class="dropcap">H</span>allo semua, selamat datang di Media903.</p>
Pada contoh di atas, huruf "H" akan menjadi lebih besar. Kamu dapat menyesuaikan font-size, margin-right, dan line-height sesuai dengan kebutuhan desain yang kamu inginkan.
Sebagai tambahan saya juga akan membagikan cara memodifikasi tag <kbd> , walaupun cara yang saya bagikan ini cukup mudah namun tak dipungkiri masih banyak pemula yang baru terjun ke dunia blogging.
Tampilan dari tag kbd yang akan dimodifikasi tampilan akan seperti ini
Cara Memodifikasi tag <kbd>
Buka dashboard blogger > tema > edit html lalu salin css dibawah ini dan letakan diatas kode ]]</b:skin> atau </style>
kbd{
background-color: #eee;
border-radius: 3px;
border: 1px solid #b4b4b4;
box-shadow: 0 1px 1px rgba(0,0,0,.2),0 2px 0 0 rgba(255,255,255,.7)inset;
color: #333;
display: inline-block;
padding: 2px 2px 1px;
line-height: 1.5em
}
Jika sudah silahkan simpan, dan untuk menerapkan nya cukup mudah yaitu dengan mengetikan <kbd>teks disini</kbd>
Mungkin sekian pembahasan kali ini, jika ada yang ingin ditanyakan jangn ragu untuk menuliskannya pada kolom komentar. Baca juga artikel lainnya untuk mendapatkan informasi dan tips seputar blogging.
Post a Comment