How To Hide Powered by Blogger Footer Attribution from Your Blog

 How to add Stylish H1 H2 H3 Headings in Blogger Post

© Copyright 2024 'Tecky AaryaN

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.

                                Demo

How to add Stylish H1 H2 H3 Headings in Blogger Post.

Step 1: First of all Login to yourBlogger 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 HTML editing page.

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

/* Stylish Headings By Tecky AaryaN */

.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 :)

Style Heading 1

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

Style Heading 2

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

Style Heading 3

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

Style Heading 4

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

Style Heading 5

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

Style Heading 6

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

Style Heading 7

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

Style Heading 8

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

Style Heading 9

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

Style Heading 10

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

Style Heading 11

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

 

To appreciate our works, consider keeping the credits in codes. We don't allow to rewrite this post in any manner. Don't copy this post, codes or any part from this article without Permission, it is strictly prohibited. If you do so, Legal Actions will be taken.

Copyright

TeckyAaryaN

Telegram

Go to Link