Skip to main content
FANCYBLOGGERTRICKS

follow us

Redesign Your Blog Sub-heading And Minor Heading In 5 ways on Blogger Blog



For a post to be neat and easy for readers to understand, headings must be used to differentiate the content. In my previous blog review, I discovered that many bloggers are victims of writing blog content in plain text, so I decided to share how to customize and use header, sub-heading, minor heading tags.

There are totally 6 heading tags starting from H1 to H6. Blogger has made things alot more easier by enabling users to use a specific header tag straight from the Post editing section. Only H2 to H4 is available on the blogger post section, you can add the rest manually though.

Using header tags are very important in adding beauty to a blog. Implementing this will not only ease in reading for users but also fasten content crawling by search engine bots. Search engine spiders can easily understand your content with the aid of header tags.

Basic Knowledge

  • H2 - Heading
  • H3 - Sub-heading
  • H4 - Minor Heading

Today I will be giving out 5 amazing styles for customizing your sub-heading(H3) and minor heading (H4) tags. I bet this will make your blog looks more professional and clean. Below is an example of my h3 and h4 tag.

My Subheading Sample, Hold To See Hover Effect

My Minor Heading  Sample, Hold To See Hover Effect


It's cool isn't it? Kindly follow the below procedures to redesign your sub-heading and minor heading tags on a blogger blog 

5 Styles To Redesign Your Sub-heading And Minor Heading Tags


Below I will be sharing how you can change your blog heading tags in 5 styles. Follow the below procedures.

1. Login to your Blogger Dashboard 

2. Goto Templates >>Edit html

3. Search for </b:skin>

4. Now paste the below codes just above </b:skin>

Style 1

Copy all the below codes and paste it above </b:skin>


.post h3{
margin-top:10px;
    max-width:95%;
    padding:6px 2px;
color: #000000;
    padding-left:10px;
    margin-bottom:10px;
    font-size:30px;
    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;
}
.post h4{
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 h4:hover {
  border-left:10px solid #FC2B2C;
}

Style 2

Copy all the below codes and paste it above </b:skin>


.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;
}
.post h4{
background: #F9F9F9;
font-family:'Oswald',sans-serif;
font-size: 100%;
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 h4:hover {
border-bottom: 4px solid #003F80;
}

Style 3


Copy all the below codes and paste it above </b:skin>


.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);
}
.post h4 {
background:#333;
margin:5px 4px 5px 0;
padding:9px 0 9px 10px;
border:0;
color:white;
font-size:100%;
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 4


Copy all the below codes and paste it above </b:skin>



.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;
}
.post h4 {
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:120% 'Oswald',Sans-Serif;
text-transform: uppercase;
}

Style 5

Copy all the below codes and paste it above </b:skin>


.post h3 {
padding:5px;
border:5px dotted rgb(251, 10, 38);
color:#000000;
font:140% 'Oswald',Sans-Serif;
}
.post h4 {
padding:5px;
border:5px dotted rgb(251, 10, 38);
color:#000000;
font:120% 'Oswald',Sans-Serif;
}

Customization


  • You can change the color to suite your blog by replacing the color codes with yours
  • You can increase or decrease the font by making changes to font-size.

How To Use Sub-heading and Minor heading In Posts 

1. Login to your Blogger Dashboard
2. Create a New Post with with headings.
 3. Now highlight the text and click either sub-heading or minor heading. Below is a picture illustration;

Now you have successfully redesigned your sub-heading and minor heading tags.

Do you face a problem?  Let us know through the comment section. Don't forget to drop a comment and keep sharing with your friends.

Cheers..... 

You Might Also Like:

Comment Policy: Please write your comments in accordance with the topic of this page post. Comments that contain links will not show up before they are approved
Open Comment