Blogger Css Heading Design - H1, H2, H3, H4

Greetings, everyone! Welcome to sbjzon. In today's tutorial, we'll explore how to incorporate stylish h1, h2, and h3 headings into your Blogger posts. As you're aware, headings like h1, h2, h3, and h4 serve as the main titles for paragraphs. Every blogger strives to enhance the visual appeal of these headings to captivate their audience. Moreover, these headings (h1, h2, h3) play a vital role in optimizing the overall SEO of a blog post. Let's dive into the details!

What are Headings?

Certainly! Headings serve as titles or sub-titles within a text, typically found at the beginning of a paragraph or post content. They provide a brief preview of the upcoming content, allowing readers to navigate the text more effectively. Incorporating stylish headings enhances the visual appeal of your post. While WordPress users can use plugins for this purpose, Blogger users need to rely on custom CSS due to the absence of plugin support. By adding stylish h1, h2, and h3 headings, you can create a more engaging and organized reading experience. These headings are essential for SEO, as they assist both users and search engines in understanding the content. Ensure your headings are easy to notice, mobile responsive, and designed for optimal readability. Happy blogging!

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 sbjzon */
.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've created a tutorial on incorporating stylish h1, h2, and h3 headings in Blogger posts. These headings are not only mobile responsive but also designed to capture users' attention effectively. By using these stylish headings, you can enhance the overall appearance of your post, making it more visually appealing. I hope you found this article helpful. Don't forget to share it with your friends and follow our blog for more updates.

If you encounter any issues with the code or have questions, please don't hesitate to ask in the comments section or join our Telegram Group for discussions. Your feedback and queries are always welcome!

All of our posts are safeguarded by DMCA. Copying or reproducing our content in any manner is strictly prohibited. Legal actions will be pursued against any violations. © sbjzon | All Rights Reserved. Your understanding and cooperation are appreciated.