How to Change the Heading Style on Blogger: Step by Step Guide

Heading Style Change in Blogger by Easy Way. Step-by-Step Learning

Hello friends,

Welcome to in our blog "Future Duniya Wala" In this article we will talk about the "How to Change the Heading Style on Blogger".

Heading Style

Introduction

If you're a Blogger user, you may have observed that the default heading styles don't always match your chosen design or branding. Blogger, fortunately, lets you change the heading styles to make your material more aesthetically appealing and interesting for your viewers. We'll walk you through the process of altering the header style on Blogger, giving your blog a new and professional design.

Steps for Heading Style Change On Blogger

Logging in to Your Blogger Account and Go in Dashboard
Go to the "Theme" Section
Clicking on "Customise" then after "Edit HTML"
Now find the .post-body h by using short key of Ctrl + F
Below is some HTML code of heading style in this article, so now copy the HTML code and paste that code between { } which is .post-body h1 or .post-body h2 or .post-body h3 situated after etc. If you do not see this bracket, create this bracket manually.

What Are the Different Blogger Heading Styles?

Blogger has several header styles to help you customise the look of your blog entries. The following are the most regularly used styles:

Heading 1 (H1): The main heading, which reflects the most important content, should be used sparingly.
Heading 2 (H2): Use this for key subheadings or to divide the text into various sections.
Heading 3 (H3): Useful for subsections beneath H2 headings or further content separation.
Heading 4 (H4): Smaller subheadings used to organise content beneath H3 headings.
Headings 5 (H5) and 6 (H6): These are less usually used but can be used for further sub-sectioning.

Understanding the Importance of Heading Styles

1. The Importance of Heading Styles in Blogging

Heading styles are essential for improving the overall look and feel of your site. They facilitate the division of your content into digestible pieces, making it easier for readers to explore and absorb information. Well-structured headlines also contribute to a better user experience, encouraging readers to spend more time on your blog.

2. The SEO Benefits of Consistent Heading Styles

Heading style consistency not only improves readability but also helps with search engine optimisation (SEO). Headings are used by search engines to determine the hierarchy and relevancy of information. By using consistent heading styles, you send a clear message to search engines about the importance of each section, potentially improving your blog's SEO rankings.

Modifying Heading Tags [h1 h2 h3 h4 h5 h6] - All Steps

1. Accessing Your Blogger Dashboard (Login Into Blogger.com)

heading style change

2. Accessing the "Theme" Section

In this, first of all you have to go to your blogger and click on Theme there.

Locate and pick the "Theme" section from the sidebar menu in the Blogger dashboard.

3. Selecting "Edit HTML"

Edit HTML

After this you have to click on Edit HTML of your template

Locate and click the "Edit HTML" button in the "Theme" section. This will launch the HTML template editor, allowing you to make changes to the code of your blog.

4. Finding Heading Tags in HTML Code

The header tags are specified in the HTML template editor. These tags indicate the various header levels in your blog posts.

HTML Code

a) Search .post-body h

search key

In this step, after going to Edit HTML of the template, you will see some codes. You have to click anywhere on these codes and then press Ctrl+F to search .post-body h. .post-body h You will find it in yellow colour. After this you will see { } just after .post-body h tag, if it is not visible then create it yourself, now select one of the below many codes inside { } and paste that code , then click on the Save button. Save it by clicking on it.

Means when you search .post-body h in theme HTML you get some result-

.post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6

.post-body h1{font-size: 21px}

.post-body h2{font-size: 24px}

.post-body h3{font-size: 21px}

.post-body h4{font-size: 18px}

.post-body h5{font-size: 16px}

.post-body h6{font-size: 13px}

b) Copy the Code of Heading Style

Below some Heading style code is given so according to you copy one code.

Heading Style 1

:line-height: 21px;background: linear-gradient( 90deg, #dcfde5 0%, #ffffff00 100%);border-left: 5px solid #05cd00;padding: 3px 10px;border-radius: 15px;text-shadow: 1px 1px #fff, 2px 2px #b3bfcc;

Heading Style 2

:text-transform: uppercase; background: #fff; padding: 10px 15px; border-radius: 9px; border: 1px solid #ddd; border-bottom: 2px solid #1a73e8; box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;

Heading Style 3

margin-top:10px; max-width:95%; padding:6px 2px;
color: #000000; padding-left:10px; margin-bottom:10px; font-size:20px; font-family:'Oswald',sans-serif; background-color:#F8FAFD; text-decoration:none; border-left:10px solid #05A8FC; box-shadow:1px 1px 2px gainsboro;
transition: border-left .777s;
-webkit-transition: border-left .777s;
-moz-transition: border-left .777s;
-o-transition: border-left .777s;
-ms-transition: border-left .777s;

Heading Style 4

color:#222222; border-left:10px solid #222222; border-right:10px solid #222222; padding:3px 5px 3px  20px; border-radius:15px;
-moz-border-radius:15px; box-shadow:0px 0px 13px #222222;
-webkit-box-shadow:0px 0px 13px #222222;
-moz-box-shadow:0px 0px 13px #222222;

Heading Style 5

background: #F9F9F9; font-family:'Oswald',sans-serif; font-size: 120%; padding: 6px 12px; color: #333; text-shadow: 1px 1px 1px #AAA; border-bottom: 4px solid #03DA03;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
-webkit-box-shadow: 1px 1px 2px #AAA;
-moz-box-shadow: 1px 1px 2px #AAA; box-shadow: 1px 1px 2px #AAA; margin: 6px 3px; text-transform: capitalize; width: 95%; line-height:1.0em;

Heading Style 6

border-bottom-right-radius: 15px; border-top-left-radius: 15px; border: 3px solid rgb(251, 10, 38); padding: 0px 1px 4px 14px; box-shadow: rgb(251, 10, 38) 3px 3px3px; color: rgb(251, 10, 38); font-family:'Oswald',sans-serif; font-size:120%;
font-weight:400; margin: 0px 0px 1em; text-transform: uppercase; text-shadow: rgb(0, 0, 0) 1px 1px 0px;

Heading Style 7

border:3px dashed #000000; border-bottom:5px solid #000000; padding: 0px 1px 4px 14px; box-shadow: rgb(251, 10, 38) 3px 3px 3px;
color: rgb(251, 10, 38); font-family:'Oswald',sans-serif; font-size:120%; font-weight:400; margin: 0px 0px 1em; text-transform: uppercase; text-shadow: rgb(0, 0, 0) 1px 1px 0px;

Heading Style 8

background:#333; margin:5px 4px 5px 0; padding:9px 0 9px 10px;
border:0; color:white; font-size:120%; line-height:16px; font-family:'Oswald',sans-serif; text-decoration:none; text-transform:uppercase; box-shadow:4px 4px 0px rgba(33,33,33,0.45);

Heading Style 9

padding:5px; border:5px outset #000000;
color:#000000; font:140% 'Oswald',Sans-Serif;

Heading Style 10

padding:5px; border:5px dashed #000000;
color:#000000; font:140% 'Oswald',Sans-Serif;

Heading Style 11

padding:5px; border:5px dotted rgb(251, 10, 38);
color:#000000; font:140% 'Oswald',Sans-Serif;

Heading Style 12

padding:5px; border: 1px solid #cccccc;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2); box-shadow: 0 0 20px rgba(0, 0, 0, .2); color:#333333; font:140% 'Oswald',Sans-Serif; text-transform: uppercase;

Heading Style 13

font-weight: 600; font-size: 18px; background: #0194ff; color: #fff;
padding: 10px; line-height: 1.7em; box-shadow: 0 2px 10px 0 #cac9c9; text-align: center; user-select: none; cursor: pointer;

Heading Style 14

font-weight: 600;
font-size: 18px; background-image: linear-gradient(to right, #ff5f00, #ff782f, #ff8d4e, #fea26d, #fbb58c); color: #fff;
padding: 10px; line-height: 1.7em;  box-shadow: 0 2px 10px 0 #cac9c9; text-align: left; user-select: none; cursor: pointer;
border-left: 20px solid red;

Heading Style 15

font-weight: 600;
font-size: 18px; background: #fff; color: #000; padding: 10px; line-height: 1.7em; box-shadow: 0 2px 10px 0 #cac9c9; text-align: center; user-select: none;
cursor: pointer; border-left: 20px solid #ff5f00; border-right: 20px solid #ff5f00; border-radius: 5px 55px 5px 55px;

Heading Style 16

font-weight: 600; font-size: 18px; background: #fff; color: #000; padding: 10px; line-height: 1.7em; box-shadow: 0 2px 10px 0 #cac9c9; text-align: center;
user-select: none; cursor: pointer; border-left: 20px solid #ff0077; border-right: 20px solid #ff0077; border-radius: 55px;

Heading Style 17

background: rgb(101, 66, 237); border-left: 20px solid rgb(0, 0, 0); box-shadow: rgb(202, 201, 201) 0px 2px 10px 0px; color: white; cursor: pointer; font-size: 18px; font-weight: 600; line-height: 1.7em;
padding: 10px; text-align: center; user-select: none;

Heading Style 18

color:#0080ff; border-bottom:1px solid #289728; font-size: 12pt; padding:2px;

Heading Style 19

color:#0080ff; border-top:1px solid #289728; border-bottom:1px solid #289728; font-size: 12pt; padding:3px;

Heading Style 20

color:#0080ff; border:1px solid #289728; font-size: 12pt; padding:2px;

c) Paste the code

Now [ In 1st Step we search .post-body h in theme HTML ] Paste the code in between { } but careful if you paste code after h2 than the heading style change only h2 . so You will need to paste the code inside { } after to the heading you want to change the style of. and than do save. now check your blog post there you will see that your heading style changed.

For Example - If we want to change Heading Style of Heading h2

Before in Theme HTML - h2 OR h2 { font-size: 18px }

After in Theme HTML - h2 {:line-height: 21px;background: linear-gradient( 90deg, #dcfde5 0%, #ffffff00 100%);border-left: 5px solid #05cd00;padding: 3px 10px;border-radius: 15px;text-shadow: 1px 1px #fff, 2px 2px #b3bfcc;} OR h2 { font-size: 18px :line-height: 21px;background: linear-gradient( 90deg, #dcfde5 0%, #ffffff00 100%);border-left: 5px solid #05cd00;padding: 3px 10px;border-radius: 15px;text-shadow: 1px 1px #fff, 2px 2px #b3bfcc;}

Tips for Choosing the Best Heading Style

Take Your Blog's Niche and Audience into Account

Choose header styles that complement the topic and tone of your blog. Different market segments may necessitate varying degrees of formality and originality in heading design.

Aesthetics and Readability in Balance

While visually appealing heading styles are important, they should not be at the expense of readability. Simple headlines keep your readers interested.

Experimenting with Various Styles

Experiment with different header styles until you find one that best fits the identity of your site and resonates with your visitors.

Understanding the SEO Impact

SEO Headings Best Practises

Create headlines that appropriately reflect each section's content. Properly designed headlines might assist search engines in understanding the structure of your content.

Avoid Over-Optimization and Keyword Stuffing

Avoid stuffing keywords into header styles when optimising them for SEO. For the best outcomes, use keywords naturally and sparingly.

Using Semantic Markup for SEO Advantages

Use semantic markup, such as schema.org, to provide additional context to search engines and improve the SEO of your blog.

Conclusion

Changing the heading style on your Blogger blog is an efficient way to improve its look and feel and optimise it for both visitors and search engines. You may establish a professional and entertaining blog that stands out from the crowd by following this step-by-step tutorial and considering the advice provided. Experiment to find the heading style that best represents your blog's distinct personality.

FAQ

If I don't like the changes, can I revert to the default heading styles?

Yes, by deleting the custom CSS code from the editor and saving the changes, you may always revert to the default heading styles.

Do these heading style changes influence the SEO ranking of my blog?

No, these changes will not have a negative influence on your SEO ranking. Search engines will grasp the structure of your material as long as you employ suitable header tags.

Can I use multiple heading styles for different blog posts?

Yes, you can apply different heading styles to certain blog posts by using inline CSS or CSS classes.

Will these modifications to the header style be seen on mobile devices?

Yes, the changes to the heading style will be shown on both desktop and mobile platforms, ensuring that your readers have a consistent experience.

Do I need to know how to code to change the heading styles?

While some basic CSS knowledge is beneficial, you do not need to be an expert coder to make easy heading style changes on Blogger.

How Do I Change the Heading Style in Blogger Editor?

It is simple to change the heading style in the Blogger editor:

Sign in to your Blogger account and go to the "Posts" area.
Select the blog post to edit or create a new one by clicking "New Post."
Highlight the text you wish to change into a header in the post editor.
Select the desired heading style from the dropdown menu in the formatting choices toolbar. The selected text will now be displayed as the desired heading style.

Can I Change Blogger's Heading Styles?

While Blogger has a number of standard heading styles, you can further customize them with CSS (Cascading Style Sheets). CSS heading styles need some technical knowledge, but they allow you to design distinctive and eye-catching headings to match your blog's layout and branding.

Can I Include Pictures or Icons in My Headings?

While you can't directly place images or icons into headlines in Blogger, you can get the same effect with HTML and CSS. You can integrate images or icons with text by building a custom HTML heading and applying CSS styles, giving your headers a visually pleasing touch.

Future Duniya Wala

यह ब्लॉग खोजें