10 stylish Sub-Heading Design for Blogger Blog Post (H3 Design)

How to Customize Heading And Sub heading For Post In Blogger Theme? If you need a subheading to give your readers a bit more information about what they can expect from your Blogger blog, you have several options within your Blogger theme to make this Design.
h3 tag

When a author write content in Blogger Blog post then s/he use sub-headline to isolate some important part. It always break a monotonousness of readers while reading a big article. In Blogger it is often default sub-headline which is tailored with bit large font and dark color. But we can easily use custom sub-heading by using CSS. 

Though using Image will affect the loading time so we will just play with some CSS code to add some spice on your Blog Post sub-heading.

10 New and Cool Sub-heading Styles for Blogger Blogs! 

Lets dive into the Sub-Heading Design tutorial. Please follow the below steps to add your desire style. 

Step #1: Log in to your Blogger Account  and Go to your Blogger Dashboard

Step #2: Click on Now click on -> Theme -> Edit HTML

Step #3: Now find the </b:skin> by pressing Ctrl+F  

Step #4: Copy any code from below and Paste the code above/before </b:skin> 

Style 1

Code for Style 1 are below-

subheadline design

.post h3{
    padding:6px 2px;
color: #000000;
    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

Code for Style 2 are below-

hover style

.post h3 {
border-left:10px solid #222222;
border-right:10px solid #222222;
padding:3px 5px 3px  20px;
box-shadow:0px 0px 13px #222222;
-webkit-box-shadow:0px 0px 13px #222222;
-moz-box-shadow:0px 0px 13px #222222;
.post h3:hover {
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

Code for Style 3 are below-

bottom border style
.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

Code for Style 4 are below-

radius style
.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

Code for Style 5 are below-

dazed style
.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

Code for Style 6 are below-

.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

Code for Style 7 are below-

.post h3 { padding:5px; border:5px outset #000000; color:#000000; font:140% 'Oswald',Sans-Serif; }

Style 8

Code for Style 8 are below-

super head tag

.post h3 { padding:5px; border:5px dashed #000000; color:#000000; font:140% 'Oswald',Sans-Serif; }

Style 9

Code for Style 9 are below-

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

Style  10

Code for Style 10 are below-

header 3 tag
.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; }
Step 5 Finally hit the Save template button.


  • You can change the Font family according to your own desire.
  • To change the font size alter 120% with other value.
  • To change the color simply replace the code from .

How to Use the Code in Blog Post?

Just go for new post and write article with Sub-Headline and minor headlines. Now block the line and click on Sub-Headline or minor headlines like below image. That’s it.


Hope you have successfully added the custom sub heading in your blogger template. For further support feel free to write in comment  section. 

You may like these posts


  1. Nahid
    I can't style my blog's H1, H2, H3, H4 or anything with this code, i am trying time and time but still doesn't happen. What should i do ? please help me !!
    • BloggerSpice
      Hi Nahid, I think your template already containing custom H3 and H4 tag. For this reason the above scripts are not working. First find code line .post h3 { ......} then remove it and use any code from above. I think it will work now.

      alternatively some templates has different code for this reason you have to use

      .post-body h3{ ......}

      instead of .post h3 { ......}

      let me know is it working or not? ;)
  2. Nahid
    Hello Fazle Rabbi Brother,
    Apnar kothai thik, amar template a problem ase, ami onno akta blog a try kore dekhsi sekhane hoise. kintu amar Main blog template a kaj kore na.
    kintu ami to amar template ar code khuje passi na, tobe ki kore old code remove korbo ??
    Please akta poremorsho den Vai...
    • BloggerSpice
      Apni MKR er Flat template use korcen. aai template er CSS code highly minify kora. :w ekta script remove korte gele arekta script kaj korbe na. Aai template ta akaronei popularity pay nai. apnake only aai template er feature e use korte hobe. customize korte parben na. parleo olpo koyek jaygay custom script use korte parben.
  3. Nahid
    Thanks brother, tobe apni ki amar template ta change korte bolsen ?? Kintu ai template ta j amar khub posondo hoi !! Apni amake valo & sundor kono template ar khoj dite parben vai. Please !!!
    • BloggerSpice
      Vai sodho ekta headline design er jonno template change korar kono mane hoy na. Age dekhen pageview kemon hoy. Jodi pageview think thake tahole change korar dorkar nai.

  4. Tech Admin
    Hello, Sir Very Nice article , I want to know that, In this Article, You Show Keys With a Button Icon, How i can create or find like this plz tell Me,
    My Blog - www.ankk.in
    • BloggerSpice
      I didn't understand. Wheres the keys? can you please send me screenshot? :t
    • BloggerSpice
      oh understood... for keyboard shortcut please follow the tutorial by visiting below URL :up

  5. Google work bro. Its really work...
    • BloggerSpice
      Hi Vishal :)
      nice to hear that it is working on your site.
  6. Tesston
    its not working even changing the .post h3 to .post-body h3 here's my website https://www.tesston.club
    • BloggerSpice
      :w Your site is not ready..how did you said that this widget is not working?
  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
Go Up