Discover the Benefits of Canva Pro for Free and Elevate Your Designs | Get it for Free

Stylish Headings

How to Add Stylish h1, h2, and h3 Headings to Blogger Posts is the topic of our tutorial today. You are all well aware that the headings (h1, h2, h3, h4) designate the main title of each paragraph. Headings (h1, h2, and h3) are crucial to the overall SEO of a blog article, and every blogger aims to present their Headings in the best possible way to draw readers in. 

Let's Begin

How can I add fashionable headings to my 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.

.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 

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

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

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

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

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

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

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

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

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

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

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

Go to Link

Go to Link