Cara Membuat Huruf Pertama Besar (Dropcaps) di Blogger

Pada artikel kali ini kita akan belajar membuat huruf pertama kapital/besar secara otomatis. Huruf kapital/besar pertama di awal kata disebut juga dropcap. Masuk ke dashboard blogger sobat. Pergilah ke Template >> Edit HTML>> klik di dalam area kode >> tekan tombol Ctrl+F dan temukan tag ]]></b:skin> 

Sekarang copy kode (CSS) di bawah ini dan kemudian letakkan di atas/sebelum tag ]]></b:skin>

.capital:first-letter {
    color: #000000;
    float: left;
    margin:0px 5px 0 0;
    font-size: 38px;
    font-family: Times, serif, Georgia;
    display: block;
    padding:0 0 0 10px;
    }

Berikutnya temukan tag ini.

<data:post.body/>

Tambahkan tag berwarna merah sebelum dan sesudahnya sehingga jadinya seperti di bawah ini.

<div class='capital'><data:post.body/></div>

Klik tombol Save Template dan muat ulang blogsobat. Jika kode di atas tidak bekerja maka cobalah kedua baris kode di bawah ini untuk menggantikan baris kode di atas.

<p class="capital"><data:post.body/></p>

Dan atau coba yang ini,

<span class="capital"><data:post.body/></span>

Simpan perubahan dengan klik tombol Save Template atau Simpan Template.

Alternatif yang lebih mudah adalah menggunakan tag di dalam postingan. Cara ini lebih luwes karena kita bisa menentukan atau memilih artikel mana saja yang akan menggunakan "dropcaps", jadi tidak semua artikel dalam blog.

Cara pertama: Extra markup - Berlaku untuk semua browser

Cukup bungkus (wrap) huruf atau karakter pertama dalam paragraf dengan tag span, lalu bidik si span dengan CSS.

Tulis artikel dalam modus HTML seperti ini (tetapi blogger tidak membutuhkan tag <p>, anda bisa mengabaikannya):

<p>
<span class="firstcharacter">L</span> orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
</p>

Letakkan CSS ini dalam template Anda.

.firstcharacter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

Cara kedua: Cara CSS3 (tanpa extra markup)

Bidik huruf pertama pada paragfraf pertama menggunakan selektor pseudo class. Tidak dibutuhkan markup tambahan. Cara ini tidak berfungsi di IE < 9.

Tulis artikel seperti biasa atau seperti ini:

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
</p>

Letakkan CSS ini dalam template Anda.

p:first-child:first-letter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

DEMO

Selamat mencoba :)