Welcome, everyone, to Techy DarshaN! Today, our tutorial focuses on enhancing the appearance of h1, h2, and h3 headings in Blogger posts. As you're aware, headings like h1, h2, h3, and h4 serve as primary titles for paragraphs. Bloggers strive to optimize the look of these headings to captivate users' attention and improve the overall SEO of their posts.
What are Headings?
Headings serve as titles or sub-titles within a text, typically appearing at the beginning of a paragraph or post content. They consist of phrases or short sentences aimed at summarizing the upcoming paragraph's topic. This organizational structure enhances longer texts, allowing readers to focus on specific sections of interest without needing to read the entire piece.
Have you considered enhancing your post with stylish headings? While WordPress users can easily integrate stylish headings using plugins, Blogger lacks this feature. Instead, you can add stylish headings through custom CSS. Read on to discover how to incorporate stylish h1, h2, and h3 headings into your Blogger posts.
Advantages;
- High visibility and readability.
- Optimized for mobile devices.
- Fresh heading designs.
- Enhances user experience and aids search engine comprehension of text.
- Headings are integral to blog post SEO.
How to Implement Attractive h1, h2, and h3 Headings in Your Blogger Post?
- Step 1: Begin by logging in to your Blogger Dashboard.
- Step 2: Navigate to the 'Theme' section.
- Step 3: Click the downward arrow icon next to the 'customize' button.
- Step 4: Select 'Edit HTML' to access the editing page.
- Step 5: Locate the code ]]></b:skin> and insert the following CSS Codes directly above it.
/* Stylish Headings By Alhankar */
.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: Create a new post or edit an existing one to incorporate these Stylish Headings.
- Step 7: Switch to 'HTML View' and 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 :)
1. This is a Stylish Heading
2. This is a Stylish Heading
3. This is a Stylish Heading
4. This is a Stylish Heading
5. This is a Stylish Heading
6. This is a Stylish Heading
7. This is a Stylish Heading
8. This is a Stylish Heading
9. This is a Stylish Heading
10. This is a Stylish Heading
11. This is a Stylish Heading
Code <>
<h2 class="TDheading-1" style="text-align: left;">This is a Stylish Heading </h2>
<h2 class="TDheading-2" style="text-align: left;">This is a Stylish Heading </h2>
<h2 class="TDheading-3" style="text-align: left;">This is a Stylish Heading </h2>
<h2 class="TDheading-4" style="text-align: left;">This is a Stylish Heading </h2>
<h2 class="TDheading-5" style="text-align: left;">This is a Stylish Heading </h2>
<h2 class="TDheading-6" style="text-align: left;">This is a Stylish Heading </h2>
<h2 class="TDheading-7" style="text-align: left;">This is a Stylish Heading </h2>
<h2 class="TDheading-8" style="text-align: left;">This is a Stylish Heading </h2>
<h2 class="TDheading-9" style="text-align: left;">This is a Stylish Heading </h2>
<h2 class="TDheading-10" style="text-align: left;">This is a Stylish Heading </h2>
<h2 class="TDheading-11" style="text-align: left;">This is a Stylish Heading </h2>
Conclusion;
This article provides a tutorial on incorporating stylish h1, h2, and h3 headings into Blogger posts. These headings are designed to be mobile-responsive and visually appealing, capturing users' attention effectively. They enhance the overall appearance of your post. If you found this article helpful, please share it with your friends and consider following our blog for more updates.
If you encounter any coding issues or have questions, feel free to ask in the comments section or join our Telegram Group for further discussion.
All our posts are protected by DMCA. Unauthorized reproduction or copying of our content is strictly prohibited and may result in legal action. © Alhankar | All Rights Reserved
Copyright © Alhankar
