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.

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. 

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

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-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%;
.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);
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);
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 {
margin:5px 4px 5px 0;
padding:9px 0 9px 10px;
box-shadow:4px 4px 0px rgba(33,33,33,0.45);

Style 7

Code for Style 7 are below-


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

Style 8

Code for Style 8 are below-

super head tag

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

Style 9

Code for Style 9 are below-

h3 tag

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

Style  10

Code for Style 10 are below-

header 3 tag

.post h3 {
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);
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.
Nahid says: 2/28/2016

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 says: ADMIN 2/29/2016

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? ;)

Nahid says: 2/29/2016

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 says: ADMIN 3/01/2016

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.

Nahid says: 3/01/2016

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 says: ADMIN 3/01/2016

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.


Tech Admin says: 4/07/2016

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 says: ADMIN 4/07/2016

I didn't understand. Wheres the keys? can you please send me screenshot? :t

BloggerSpice says: ADMIN 4/07/2016

oh understood... for keyboard shortcut please follow the tutorial by visiting below URL :up


Vishal Jaiswal says: 5/10/2017

Google work bro. Its really work...

BloggerSpice says: ADMIN 5/10/2017

Hi Vishal :)
nice to hear that it is working on your site.

Vishal Jaiswal says: 5/16/2017
This comment has been removed by a blog administrator.
MD IMRAN HASAN says: 10/31/2017

Thanks For sharing. Its look there are new & very Formative Post Here.
Go Ahead, we are always with You. and Share More & More Updates Like This.

BloggerSpice says: ADMIN 11/05/2017

Thank you Imran :)

Tesston says: 5/12/2018

its not working even changing the .post h3 to .post-body h3 here's my website https://www.tesston.club

BloggerSpice says: ADMIN 5/12/2018

:w Your site is not ready..how did you said that this widget is not working?

Contact Form


Email *

Message *