How to Style Headings H1-H2-H3 in Blogger Post Using CSS And Html Code Script Tutorial

byR.Ganesh Kumar -
0




Hello Everyone My Name Is Ganesh Kumar today for tutorial Sure thing! CSS is a markup Heading used to style webpages, and you can use it to style headings H1-H3 in a Blogger post. All you need to do is add the following code to your post 

What Are Heading

Headings are text elements used to organize content into sections and provide structure to a document. They are usually formatted in larger and bolder text than the body text and can range from headings levels 1 to 6, with level 1 being the main heading and level 6 being the most specific subheading. Headings provide a visual hierarchy to the document, making it easier for the reader to understand the content and navigate through the document. They are commonly used in websites, articles, academic papers, and other types of documents.

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.
 

Pro futures

  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

Step1:First Login  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  free digital post */
.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

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>

Final instruction

I hope you will like this article and make your website more beautiful by using these lines.I have given you a tutorial above on how to integrate this into your blogger

Copyright Info:-Action will be taken if anyone does not copy past from the articles on my website

Tags:
Post a Comment (0)
Previous Post Next Post