Add Cool Style to Headings in Your Blogger Blog Posts

add-heading-styles-blogger-blog

 How to Add Styles to Headings in Blogger Posts

While browsing the Internet, you might have noticed on some blogs that they have different unique and beautiful styles for headings in their posts. One of the most used and beautiful of these styles is putting the headings in a CSS box by defining styles for the text. Once you add the CSS styles to your Blogger blog's template, later on, whenever you will put a heading on your blog post, it will be automatically decorated according the values which were defined in CSS. It not only makes your blog posts beautiful but also tells the visitors strongly that what has been discussed underneath these headings, because these headings attract much user attention as compared to the traditional heading styles.

I am going to provide a style code for H3 heading on your posts which will transform your H3 headings in posts automatically according to the defined values after you publish your posts. To add this style to your Blogger blog's template, follow below instructions:

1. Go to your Blogger dashboard, select your blog and edit its template's HTML
2. Press Ctrl+F and find ]]></b:skin>
3. Now paste below code just above ]]></b:skin>
.post h3 { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; border: 2px solid rgb(020208); clear: both; color: #1A1A1A; font-family: font-family: 'Yanone Kaffeesatz', sans-serif; font-size: 16px; letter-spacing: 1px; line-height: 22px; margin: 0px 0px 5px; padding: 3px 7px; text-transform: uppercase; text-align: center;
}
4. Customize the highlighted values the way you like by keeping below rules in your mind
Red highlighted text defines the font style for your headings
Blue highlighted number defines font size for your headings
Purple highlighted value defines spacing between letters in headings
 #1A1A1A defines color for your headings
 020208 define color of your heading box border line
 2px defines the width of heading box border line
5. These are the most common customizations
6. As I have set  Yanone Kaffeesatz font style for your heading text, so you will need to add this font to your template if it doesn't have it already. To check either the font is already added to the template or not, press Ctrl+F and search for Yanone Kaffeesatz. If you couldn't find it, then press Ctrl+F again, find <head> and add the below piece of code just after <head>

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'/>
You are all done!! Save your template. Now to add the styled headings to your Blogger posts, write headings as H3 in your blog posts as we have defined the style for H3. While writing headings in your posts in post editor, switch to HTML by pressing HTML button at the  top left corner of post editor and wrap your heading with h3 as shown below:

<h3>Your Heading</h3>

After wrapping your heading, switch back to Composer mode and complete the post by repeating the procedure when necessary/ Wrap your all headings with h3 and after your complete your post, it. You will see that headings are automatically transformed into a cool style. If you face any difficulty in applying the style, leave a response below. We will assist you in solving your issue.

View Demo Here

Labels: