CARA MEMBUAT HURUF PERTAMA POSTINGAN BLOGGER dan WORDPRESS JADI BESAR DAN GAYA

Sebenarnya template blogger terbaru varian Notable sudah memiliki fitur dimana setiap huruf pertama yang kita tuliskan akan menjadi besar. Contohnya pada tulisan ini.

1. UNTUK BLOGGER BLOGSPOT

huruf pertama besar dan gaya

Tambahkan CSS.
Caranya sederhana saja:

1. Masuk ke pengaturan blog
2. Pilih tema (atau theme kalau bahasa Inggris)
3. Pilih "sesuaikan" (atau customize kalau bahasa Inggris)

Setelah sesuaikan dipilih maka kita masuk ke mode "Blogger Theme Designer" disana pilih "lanjutan" (atau advance kalau bahasa Inggris) begitu diklik disebelah kanan akan muncul list menu dropdown dari atas ke bawah, scroll hingga sampai ke menu paling bawah. Pilih "Tambahkan CSS" (atau add CSS kalau bahasa Inggris).

Ketika kotak blanko kosong CSS muncul, copy kode dibawah ini dan pastekan kedalam blanko kosong kotak CSS tadi:

.dropcap{float:left;color:blue;background:white;line-height:50px;padding-right:5px;font-family:Arial;font-size:90px;}

Silahkan robah:

1. Warna huruf yang saya sorot warna pink, sengaja saya pilih sintaksnya mirip bahasa manusia (inggris, misal: blue =biru; black=hitam; yellow=kuning; dst
2. Warna latar juga bisa dirobah silahkan robah warna "white" yang saya sorot kuning dengan warna menurut selera sobat sendiri.
3. Ukuran huruf juga bisa di robah, contoh saya menggunakan ukuran 90px

 Itu baru CSS pembentuk ya, agar huruf pertama menjadi gaya dan besar kita masih perlu menambahkan atribut dibawah untuk satu huruf pertama saja pada setiap postingan dengan cara:
ketika masuk ke mode "compose" untuk membuat postingan baru pindah ke mode "HTML" karena pada opsi menulis postingan keduanya bergandengan saja seperti terlihat pada gambar dibawah namun tentu saja harus dimulai menulis secara normal pada mode compose terlebih dahulu:

Nah ketika masuk ke mode HTML, Cari huruf pertama postingan misalnya kalimat begini:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa.

Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.
Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede.
Berarti huruf awalnya adalah 'L' maka dalam mode HTML kurung huruf tersebut dengan cara berikut:

<span class="dropcap">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa.

Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.
Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada 

Maka pragraf jadinya jika mengikuti tutorial singkat saya adalah menjadi sebagai berikut:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa.
Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.
Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede.


2. UNTUK WORDPRESS

Masuk ke file functions.php pada tema yang anda gunakan terserah mau dari cpanel hostingan ataupun dari dashboard. Jika dari dashboard, pilih appearance > theme editor > dan buka theme functions. Tambahkan kode berikut di bawah ini:

<?php
function FirstCapital ($content = '') {
return '<p class="caps">' . $content;}
add_filter('the_content', 'FirstCapital', 5);
?>

Jangan lupa save
Selanjutnya masih pada directori yang sama, buka file style.css, tambahkan style berikut:

.caps:first-letter {
font-size: 40px;
font-weight: bold;
float: left;
font-size: 40px;
font-weight: bold;
float: left;
margin: 5px 6px 0 0;}

Jangan lupa Save.

Untuk mengatasi agar kode berjalan pada beberapa tipe tema atau template wordpress yang menggunakan "excerpt" atau "post teaser" maka selanjutnya perlu menggunakan CSS rubah sedikit kode pada script css di atas dengan menambahkan parameter “Class ID” styling css, misalnya pada blockquote. Maka kode pada CSS menjadi seperti ini:

blockquote p :first-letter {
font-size: 40px;
font-weight: bold;
float: left;
margin: 5px 6px 0 0;}

Selamat mencoba...