Additional styling is always a nice way to customize your blog with some simple yet unique features.
Text styling of your posts is fairly easy to do, but some things require a little extra knowledge.
I had a question from a reader asking how to make the first letter of the first paragraph larger and styled as they do in magazines, so I thought I’d help out!
Q:Hey, Dana! I was wondering, could you do a blog post about making the first letter of the paragraph in blogger different?
Like it is in magazines, where the first letter is bolder and bigger than the rest.
I couldn’t try any tutorials which work so this would be really helpful! Thank you. – Miglė
The technique or style is called a drop cap.
This can be done with some CSS work and customized however you like.
Drop caps draw attention to the paragraph and have more of an editorial or old storybook feel.
To achieve this look in Blogger, we’ll first create the basic styling that will look a little something like this:
Note: this will not work if you have a photo before the first paragraph of your post.
Your first paragraph needs to consist of text.
Step 1 – Head on over to the Template section of your Blogger dashboard then choose Edit HTML.
Click inside of the text box and press CTRL and F (or CMD and F on a Mac) to open the search box in the top corner. Search for:
<data:post.body/>
and hit enter. It should find the first instance, but that is for mobile view. Hit enter again to be brought to the second instance.
Step 2 – Right before and after <data:post.body/> add the following in red:
<p class='first'><data:post.body/></p>
Step 3– Right below that second instance of <data:post.body/> your template may include a third instance of it as well. Add the same code in red to that instance as well and save the template.
Step 4 – Now visit Template > Customize, and enter the CSS section (Advanced > Add CSS). Here is where we will style the letter.
In the CSS textbox, add the following code:
.post-body p.first:first-child:first-letter {
float:left;
padding:5px;
font-size: 50px;
font-family: Georgia;
font-weight:bold;
text-transform:uppercase;
}
You can change the red elements to reflect the font size you would like and the font name.
Tip: try using a Google Web Font for a totally custom look!
You should see the changes appear in the preview section and they should look like the preview above.
Unless you want to add some additional styling, you’re done!
Additional Styling
Let’s try something else. Let’s make the letter stand out a little more with a background color and rounded corners:
The CSS for this style is:
.post-body p.first:first-child:first-letter {
float:left;
padding:5px;
font-size: 50px;
font-family: Georgia;
font-weight:bold;
text-transform:uppercase;
background-color:#cccccc;
color:#ffffff;
border-radius: 5px;
margin-right:5px;
}
Once again you can update the elements in red.
Color is your font color, and border-radius is the size of the rounded corners (tip: try changing the border-radius to 20px to see what happens!).
Feel free to play around with various CSS styles and ideas to match your own template!
