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
- Easy to Notice and Read it.
- Mobile Responsive
- New Design for Headings
- Help users and Search Engines to read and understand text.
- Headings plays an important role in SEO of blog post.
Let's Begin
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 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