Really quick tutorial from me today that was requested a couple of times on how to change the first letter of your post title and post text on Blogger to be a different style giving a magazine effect like this sentence.
I’ve seen this technique used in some cool and creative ways. You could combine it with this tutorial on adding a custom font to Blogger or WordPress and add a custom font for the first letter.
Change the font style of the first letter of post title
Go to Template > Edit HTML and search for </b:skin>
. Paste one of the following codes above it
h3.post-title:first-letter { }
or
.post-title.entry-title:first-letter { }
or
h3.post-title a:first-letter { }
Add the CSS
Now you can customise the first letter by adding CSS in between the brackets. Here’s a list of some of the things you can change.
- Change font –
font-family: 'FONTNAME';
- Change font size –
font-size: #px;
- Underline the letter –
text-decoration: underline;
- Add line over letter –
text-decoration: overline;
- Add line/strike through –
text-decoration: line-through;
- Change font to uppercase –
text-transform:uppercase;
- Change font to lowercase –
text-transform:lowercase;
- Change font colour –
color: #HEXVALUE;
- Change font background colour –
background: #HEXVALUE;
Example of it in use
Here is an example, notice the H is different.
h3.post-title: first-letter { font-family: 'Cookie', cursive;; font-size: 12px; text-transform:uppercase; color: #ec008c; }
Change font style of the first letter of post text
Go to Template > Edit HTML and search for </b:skin>
. Paste the following code above it.
.post-body:first-letter { }
Then just like above add the css between the brackets to change the first letter of the body text in each blog post.