Follow us to get updates regarding Latest posts Follow Now!

How to add Stylish h1, h2 ,h3 Headings in Blogger Post

In this article I have made a tutorial on How to add Stylish h1, h2 ,h3 Headings in Blogger Post. These Stylish Headings

In this article I have made a tutorial on How to add Stylish h1, h2 ,h3 Headings in Blogger Post. These Stylish Headings

how-to-add-stylish-h1-h2-h3-headings-in-blogger-post


Hello Everyone! Welcome to Techy DarshaN. Today our tutorial is How to add Stylish h1, h2 ,h3 Headings in Blogger Post.  You Guys already know very well that The Headings h1, h2, h3, h4 indicates the the Main Title of Paragraphs. Every blogger wants to give the best look for Headings in their post so that can can attract the users attentions and Headings h1,h2,h3 play an important role in overall SEO of blog post. 

What are Headings?

Headings are a type of Title or Sub-title within a text that usually appear in the beginning of a paragraph or the Post content. They’re usually phrases or short sentences that aim to describe what the upcoming paragraph is about. This gives a longer text better organization and allows readers to focus on the parts that particularly interest them if they don’t want to read the whole thing.

    Have you ever thought of adding Stylish Headings to your post? WordPress users can easily integrate Stylish headings in their blog post with the help of some plugins. But, Blogger doesn't have the feature of Plugins you need to add stylish headings through custom CSS. So read the full post to know How to add Stylish h1, h2 ,h3 Headings in Blogger Post.

Pros

  1. Easy to Notice and Read it.
  2. Mobile Responsive
  3. New Design for Headings
  4. Help users and Search Engines to read and understand text.
  5. Headings plays an important role in SEO of blog post.
Let's Begin

Demo

How to add Stylish h1, h2 ,h3 Headings in Blogger Post? 

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On your  Blogger Dashboard, click 'Theme'.

Step 3:Click on the arrow down icon next to 'customize' button.

Step 4:Click on Edit HTML, you will be redirected to editing page.

Step 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.

/* Stylish Headings By Techy DarshaN */
.TDheading-1{background-image:linear-gradient(to right,#eb3941,#f15e64,#e14e53,#e2373f);box-shadow:0 5px 15px rgba(242,97,103,.4);Color:white;padding:10px;border-radius:7px}

.TDheading-2{background-image:linear-gradient(to right,#25aae1,#40e495,#30dd8a,#2bb673);box-shadow:0 4px 15px 0 rgba(49,196,190,0.75);Color:white;padding:10px;border-radius:7px}

.TDheading-3{background-image:linear-gradient(to right,#f5ce62,#e43603,#fa7199,#e85a19);box-shadow:0 4px 15px 0 rgba(229,66,10,0.75);Color:white;padding:10px;border-radius:7px}

.TDheading-4{background-image:linear-gradient(to right,#667eea,#764ba2,#6B8DD6,#8E37D7);box-shadow:0 4px 15px 0 rgba(116,79,168,0.75);Color:white;padding:10px;border-radius:7px}

.TDheading-5{background-image:linear-gradient(to right,#fc6076,#ff9a44,#ef9d43,#e75516);box-shadow:0 4px 15px 0 rgba(252,104,110,0.75);Color:white;padding:10px;border-radius:7px}

.TDheading-6{background-image:linear-gradient(to right,#0ba360,#3cba92,#30dd8a,#2bb673);box-shadow:0 4px 15px 0 rgba(23,168,108,0.75);Color:white;padding:10px;border-radius:7px}

.TDheading-7{background-image:linear-gradient(to right,#009245,#FCEE21,#00A8C5,#D9E021);box-shadow:0 4px 15px 0 rgba(83,176,57,0.75);Color:white;padding:10px;border-radius:7px}

.TDheading-8{background-image:linear-gradient(to right,#6253e1,#852D91,#A3A1FF,#F24645);box-shadow:0 4px 15px 0 rgba(126,52,161,0.75);Color:white;padding:10px;border-radius:7px}

.TDheading-9{background-image:linear-gradient(to right,#29323c,#485563,#2b5876,#4e4376);box-shadow:0 4px 15px 0 rgba(45,54,65,0.75);Color:white;padding:10px;border-radius:7px}

.TDheading-10{background-image:linear-gradient(to right,#25aae1,#4481eb,#04befe,#3f86ed);box-shadow:0 4px 15px 0 rgba(65,132,234,0.75);Color:white;padding:10px;border-radius:7px}

.TDheading-11{background-image:linear-gradient(to right,#ed6ea0,#ec8c69,#f7186a,#FBB03B);box-shadow:0 4px 15px 0 rgba(236,116,149,0.75);Color:white;padding:10px;border-radius:7px}
Step 6: Crete a new post or edit a existing post to add these Stylish Headings

Step 7: Switch to 'HTML View' Then, paste the following HTML codes 

I have designed 10+ Stylish Headings you can use can of them you like and don't forget to change the Title :)

This is a Stylish Heading

 <h1 class="TDheading-1" style="text-align: left;">This is a Stylish Heading </h1>   

This is a Stylish Heading

  <h1 class="TDheading-2" style="text-align: left;">This is a Stylish Heading </h1>  

This is a Stylish Heading

  <h1 class="TDheading-3" style="text-align: left;">This is a Stylish Heading </h1>  

This is a Stylish Heading

  <h1 class="TDheading-4" style="text-align: left;">This is a Stylish Heading </h1>  

This is a Stylish Heading

 <h1 class="TDheading-5" style="text-align: left;">This is a Stylish Heading </h1>   

This is a Stylish Heading

  <h1 class="TDheading-6" style="text-align: left;">This is a Stylish Heading </h1>  

This is a Stylish Heading

  <h1 class="TDheading-7" style="text-align: left;">This is a Stylish Heading </h1>  

This is a Stylish Heading

 <h1 class="TDheading-8" style="text-align: left;">This is a Stylish Heading </h1>   

This is a Stylish Heading

   <h1 class="TDheading-9" style="text-align: left;">This is a Stylish Heading </h1> 

This is a Stylish Heading

 <h1 class="TDheading-10" style="text-align: left;">This is a Stylish Heading </h1>   

This is a Stylish Heading

   <h1 class="TDheading-11" style="text-align: left;">This is a Stylish Heading </h1> 

Conclusion

In this article I have made a tutorial on How to add Stylish h1, h2 ,h3 Headings in Blogger Post. These Stylish Headings which are very Mobile responsive and attractive to drive the users attention. These stylish Headings give a better look to your post. I Hope you have liked this article and please do share with your friends and follow up blog for more.

If you face any problems in code or have any questions please feel free to ask in comments section or join our Telegram Group for discussion.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © Techy DarshaN | All Rights Reserved 

 © Copyright: Techydarshan.eu.org

Getting Info...

About the Author

Student | Developer | Blogger

Post a Comment

Techy DarshaN's Rules : Leave your opinion or any doubt about this article And is you have any queries please feel free to ask. Don't try to spam, our team reviews every comment.
Have a Cookie!
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.