Heading and subheading are very important parts of an article. If you are a blogger you want to customize your heading and subheading automatically, this article is for you. You have come to the right site to get the customization CSS for heading and subheading. I saw online that some writers are already discussing heading and subheading customization. They actually showed a manual option for customizing heading and subheading. But you can easily design your heading and subheading with simple CSS. So, in this article, we will show you the automatic way of designing your heading and subheading.
10 cool Heading and Subheading designs for Blogger.
Actually, using the header tag style is only for attracting attention from visitors. When we use a Heading or Subheading without style it looks very ugly with the bold effect and the visitors also get bad impression of the post. If we use the style on heading and subheading it looks very professional and we will get a user impression. With CSS we can do the style easily because its need a few lines of code for styling your heading and sub-heading. In this article, we will share 10 CSS style for your heading and subheading style.
How to create an animated button in Blogger?
Create Responsive Contact us Page By HTML Code
Why Heading and Sub-Heading style is needed?
Heading and subheading styles are needed in an article for several reasons the reasons are given below:
Organization and structure: Headings and subheadings help break down content into smaller, more manageable sections. This makes it easier for the writer to organize their thoughts and for the reader to follow the article’s main points and arguments.
Hierarchy of information: Headings and subheadings establish a hierarchy of information, enabling readers to understand the relative importance of different sections. Main headings represent primary topics or ideas, while subheadings represent related or supporting information.
Readability and scanning: Many readers prefer to skim or scan an article before reading it in depth. Headings and subheadings make this process easier by providing visual cues and signposts, allowing readers to locate the sections most relevant to their interests quickly.
Accessibility: For readers with visual impairments or those using screen readers, headings and subheadings can improve accessibility by providing a clear structure to navigate the content.
Search engine optimization (SEO): Headings and subheadings containing relevant keywords can help improve an article’s ranking. Search engines often give more weight to keywords in headings, making the article more likely to appear in search results for those terms.
Consistency and professional appearance: A consistent heading and subheading style throughout an article (and across multiple articles) creates a polished, professional appearance. This can enhance the reader’s experience and increase the credibility of the content.
Easier editing and updating: A clear structure with headings and subheadings makes it easier for writers and editors to review and update an article. It’s simpler to locate specific sections and make necessary changes, saving time and effort.
How to use Heading and Subheading CSS Style on Blogger?
To using the automatic heading and subheading style you must follow the steps given below:
Step 1: First, login to your Blogger Account and goto your Blogger Dashboard.
Step 2: After that click on Theme and from the drop-down option press Edit HTML.
Step 3: Now find </b:skin> by pressing CTRL+F.
Step 4: Copy the Style CSS code from the below and past style code above </b:skin> tag and save the theme.
Style-1
.post h3{
margin-top:10px;
max-width:95%;
padding:6px 2px;
color: #000000;
padding-left:10px;
margin-bottom:10px;
font-size:20px;
font-family:’Oswald’,sans-serif;
background-color:#F8FAFD;
text-decoration:none;
border-left:10px solid #05A8FC;
box-shadow:1px 1px 2px gainsboro;
transition: border-left .777s;
-webkit-transition: border-left .777s;
-moz-transition: border-left .777s;
-o-transition: border-left .777s;
-ms-transition: border-left .777s;
}
.post h3:hover {
border-left:10px solid #FC2B2C;
}
Style-2
.post h3 {
color:#222222;
border-left:10px solid #222222;
border-right:10px solid #222222;
padding:3px 5px 3px 20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #222222;
-webkit-box-shadow:0px 0px 13px #222222;
-moz-box-shadow:0px 0px 13px #222222;
}
.post h3:hover {
color:#219DFC;
border-left:10px solid #219DFC;
border-right:10px solid #219DFC;
box-shadow:0px 0px 13px #219DFC;
-webkit-box-shadow:0px 0px 13px #32A4FC;
-moz-box-shadow:0px 0px 13px #32A4FC;
}
Style-3
.post h3{
background: #F9F9F9;
font-family:’Oswald’,sans-serif;
font-size: 120%;
padding: 6px 12px;
color: #333;
text-shadow: 1px 1px 1px #AAA;
border-bottom: 4px solid #03DA03;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: 1px 1px 2px #AAA;
-moz-box-shadow: 1px 1px 2px #AAA;
box-shadow: 1px 1px 2px #AAA;
margin: 6px 3px;
text-transform: capitalize;
width: 95%;
line-height:1.0em;
}
.post h3:hover {
border-bottom: 4px solid #003F80;
}
Style-4
.post h3 {
border-bottom-right-radius: 15px;
border-top-left-radius: 15px;
border: 3px solid rgb(251, 10, 38);
padding: 0px 1px 4px 14px;
box-shadow: rgb(251, 10, 38) 3px 3px3px;
color: rgb(251, 10, 38);
font-family:’Oswald’,sans-serif;
font-size:120%;
font-weight:400;
margin: 0px 0px 1em;
text-transform: uppercase;
text-shadow: rgb(0, 0, 0) 1px 1px 0px;
}
Style-5
.post h3 {
border:3px dashed #000000;
border-bottom:5px solid #000000;
padding: 0px 1px 4px 14px;
box-shadow: rgb(251, 10, 38) 3px 3px 3px;
color: rgb(251, 10, 38);
font-family:’Oswald’,sans-serif;
font-size:120%;
font-weight:400;
margin: 0px 0px 1em;
text-transform: uppercase;
text-shadow: rgb(0, 0, 0) 1px 1px 0px;
}
Style-6
.post h3 {
background:#333;
margin:5px 4px 5px 0;
padding:9px 0 9px 10px;
border:0;
color:white;
font-size:120%;
line-height:16px;
font-family:’Oswald’,sans-serif;
text-decoration:none;
text-transform:uppercase;
box-shadow:4px 4px 0px rgba(33,33,33,0.45);
}
Style-7
.post h3 {
padding:5px;
border:5px outset #000000;
color:#000000;
font:140% ‘Oswald’,Sans-Serif;
}
Style-8
.post h3 {
padding:5px;
border:5px dashed #000000;
color:#000000;
font:140% ‘Oswald’,Sans-Serif;
}
Style-9
.post h3 {
padding:5px;
border:5px dotted rgb(251, 10, 38);
color:#000000;
font:140% ‘Oswald’,Sans-Serif;
}
Style-10
.post h3 {
padding:5px;
border: 1px solid #cccccc;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
color:#333333;
font:140% ‘Oswald’,Sans-Serif;
text-transform: uppercase;
}
You can easily use the style on h1,h2,h3,h4 by changing .post h3 to .post h1 or .post h2.
Conclusion
This CSS code will easily and automatically design your Heading and Subheading with a smart and professional style. You won’t need to do that design when writing your article. It will automatically catch your style from CSS.
The post Automatic Heading and Subheading Design for Blogger post appeared first on Tech Edu Byte.
We Love Cricket
We Love Cricket
