Hello Everyone! Welcome to AbdullahCoded Website. Today our tutorial is How to add Stylish Gradient Color 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 attract the users attentions and Headings h1, h2, h3 play an important role in overall SEO of blog post.
What are Headings?
Typically found at the start of a paragraph or the post's content, headings are a form of title or sub-title. Usually, these are brief lines or phrases that try to explain the topic of the next paragraph. This improves the structure of a lengthy document and enables readers to concentrate on the sections that most interest them if they choose not to read the entire thing.
Have you ever considered including eye-catching headers in your posts? With the aid of certain plugins, WordPress users may effortlessly incorporate stylish heads into their blog posts. However, Blogger lacks the plugin capability that allows you to use custom CSS to add eye-catching headings. To learn how to include stylish gradient color headings in a blogger post, read the entire article.
Benefit of it’s
- 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.
How to add Stylish Gradient Color Headings in Blogger?
Step 1: Go to 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 ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ */
.AbdullahCoded-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}
.AbdullahCoded-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}
.AbdullahCoded-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}
.AbdullahCoded-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}
.AbdullahCoded-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}
.AbdullahCoded-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}
.AbdullahCoded-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}
.AbdullahCoded-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}
.AbdullahCoded-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}
.AbdullahCoded-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}
.AbdullahCoded-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 :)
This is a Stylish Heading
<h1 class="AbdullahCoded-1" style="text-align: left;">This is a Stylish Heading </h1>This is a Stylish Heading
<h1 class="AbdullahCoded-2" style="text-align: left;">This is a Stylish Heading </h1>This is a Stylish Heading
<h1 class="AbdullahCoded-3" style="text-align: left;">This is a Stylish Heading </h1> This is a Stylish Heading
<h1 class="AbdullahCoded-4" style="text-align: left;">This is a Stylish Heading </h1>This is a Stylish Heading
<h1 class="AbdullahCoded-5" style="text-align: left;">This is a Stylish Heading </h1>This is a Stylish Heading
<h1 class="AbdullahCoded-6" style="text-align: left;">This is a Stylish Heading </h1>This is a Stylish Heading
<h1 class="AbdullahCoded-7" style="text-align: left;">This is a Stylish Heading </h1>This is a Stylish Heading
<h1 class="AbdullahCoded-8" style="text-align: left;">This is a Stylish Heading </h1>This is a Stylish Heading
<h1 class="AbdullahCoded-9" style="text-align: left;">This is a Stylish Heading </h1>This is a Stylish Heading
<h1 class="AbdullahCoded-10" style="text-align: left;">This is a Stylish Heading </h1>This is a Stylish Heading
<h1 class="AbdullahCoded-11" style="text-align: left;">This is a Stylish Heading </h1>Conclusion
This is all about making a Contact Form using Telegram Bot API. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in .
.png)