Blogger Tutorial: How to Customize Post Body Font

You can customize post body font in any expect like color, size, style or family. First, you should know what is the default CSS code for post body and then we'll customize it according to our own taste. Go to Layout | Edit HTML and find this code:


The default code of posts!

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

Understand the default code!


1- margin:.5em 0 1.5em; is defining spacing between post and other elements in the blog like sidebar and header.

2- border-bottom:1px dotted $bordercolor; it very descriptive. It creates a dotted border at the bottom of the post with width 1px.

3- padding-bottom:1.5em; causes some space between posts and other elements at the bottom. The other elements could be labels, comments or date.


Make changes in the default code!


Now, I've given you some idea about the post body style definitions. By default, the font properties are not defined specifically for posts but we can easily do this by applying some simple CSS techniques.


1- How to change font size in post body!

You need to add font-size:15px; property in the default CSS code:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
font-size:15px;
}

Tip: Try increasing or decreasing 15px to increase or decrease font size.


2- How to change font color in post body!

You need to add color:#FFFFFF; in the default definitions:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
color:#FFFFFF;
}

Tip: #FFFFFF is the hex code for white color, you can capture any color you see on your computer or on web and get the hex code of that color through a free utility ColorPic.

Remember: This property will not effect hyperlinks (?) in the post body, I'll tell you about hyperlinks customization later in this article.


3- How to change the font family in post body!

Font family means that you can control which font will be used to display post body. You can have Arial, Times New Roman, Georgia, Serif and many many more. So, you'll need to apply font-family:"Times New Roman",Georgia,Serif; property for this purpose.

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
font-family:"Times New Roman",Georgia,Serif;
}

Tip: I've added 3 fonts in font-family:"Times New Roman",Georgia,Serif; property, why? Because my user might not have Times New Roman installed on his/her computer then the second font Georgia will be used and similarly Serif can also be used.

Tip: See following article about CSS font family properties for information.

http://www.w3schools.com/css/pr_font_font-family.asp


4- How to change the style of post body font!

Remember: You might not need this property but this is useful for better understanding of your fonts.

By style, I mean you can make your font italic through font-style:italic; property.

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
font-style:italic;
}

Remember: If you'll not add this property in default definitions then your post body font will be displayed normal.

Tip: Blogger post editor provides an easy way to make specific part of text italic. When creating a post, select your text and click the i icon which is the second icon on toolbar.


How to apply these properties on hyperlinks (?) in my post body!


Some of the above described properties will not effect hyperlinks (?) in the post body and there are no definitions in default Blogger CSS for hyperlinks (?) so lets add our own definitions.

This is the deafault code:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

Add some more juice in it:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post a {
color:#FF0000;
text-decoration:underline;
text-transform:uppercase;
}

Now, I'll explain all 3 properties added in .post a {} tag.

1- color:#FF0000; is the hex code for red color, you can hex code of some other color to change it.

2- text-decoration:underline; will make your post hyperlinks (?) underlined, you can change this to text-decoration:none; if you don't want to apply it.

3- text-transform:uppercase; will change your hyperlinks (?) to transform to uppercase. You can change it to text-transform:lowercase; if you want your hyperlinks to display in lowercase or you can change it to text-transform:none; to nullify this effect.


How to customize the hyperlinks (?) for mouse over event (hover effect)!


You can also further customize the font appearance when mouse comes over your hyperlinks. For example you might want to change the color of your hyperlinks on mouse over or make it underlined or maybe change the font size.

This is our default CSS + hyperlinks CSS we added in the previous steps:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post a {
color:#FF0000;
text-decoration:underline;
text-transform:uppercase;
}

Add even more juice in it:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post a {
color:#FF0000;
text-decoration:underline;
text-transform:uppercase;
}
.post a:hover {
color:#0000FF;
text-decoration:none;
text-transform:lowercase;
}

Now, I'll explain some changes I've made.

Note: All the properties in .post a:hover {} will be visible only when you'll move mouse over the link.

1- The color will change to blue (#0000FF).

2- There will be no decoration of text. Previously, we applied text-decoration:underline; property to make our hyperlinks underlined but when mouse will come over, it will not be underlined.

3- On mouse over, our hyperlinks will become lowercase.

Tip: "On mouse over" is called "hover effect" in CSS references.


Before you leave!


I've tried my best to share my knowledge with you, if this article has really helped you then you can comment or tell other people about it through social networking. Any question, comment or suggestion will be greatly appreciated, thanks.