6 New & Cool Sub-heading Styles for Blogger Blogs!


#1

Some day ago, @Nafees had asked me to create some Sub-heading styles for blogger. Here are some styles that you can use on blogger.


How to Change the Style of Sub-heading on Blogger?

Here, I’ll show you how can you change the style of your current template’s Sub-heading… Let’s follow the steps:

Steps are following:

  1. Go to Blogger > Template > Edit HTML
  2. Search for ]]></b:skin>
  3. Above it, paste bellow code:

.post h3 {YOUR_CSS_HERE}

So, I have created some styles that you can apply on your blog!

Style No.1- Knife Style with Shadow!

For creating this one, I had used effects like box-shadow, border and many more… and at last, this design came as the result:

CSS CODE:

.post h3 {
  border: 1px dashed #C7C7C7;
  padding: 3px;
  box-shadow: 2px 2px 5px;
  padding-left: 10px;
  margin-bottom: 7px;
  border-radius: 10px;
  border-bottom-color: #000;
  background: rgba(218, 218, 218, 0.04);
  border-bottom-right-radius: 100px;
}

Style No-2 Black Theme with FontAwesome

While creating this style, I had used black background, text-shadow and font awesome icons to make it attractive. And at last, this was the result:

CSS CODE:

.post h3 {
  padding: 3px;
  text-shadow: -2px -1px 1px #060606;
  box-shadow: -3px 2px 3px #000;
  padding-left: 10px;
  margin-bottom: 7px;
  background: #303030;
  color: #F7F7F7;
}
.post h3:before {
  font-family: FontAwesome;
  position: relative;
  content: '\f054';
  font-size: 17px;
  padding-right: 10px;
}

Style No. 3 White Theme with Font Awesome

This is like Style No.2 but in this one, I have used different Font Awesome Icons and also different colors.

CSS CODE:

.post h3 {
  padding: 3px;
  text-shadow: -1px -1px 0px #000000;
  box-shadow: -2px 2px 3px #000;
  padding-left: 10px;
  margin-bottom: 7px;
}
.post h3:before {
  font-family: FontAwesome;
  position: relative;
  content: '\f02d';
  text-shadow: 0px 0px 0px #000;
  color: #000;
  font-size: 17px;
  padding-right: 10px;
}

Style No. 4- Playing With Some Gradient!

I think, you will like this last style too much because it have a shiny look with attractive colors.

CSS CODE:

.post h3{
  padding: 3px;
  padding-left: 10px;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-color: #FEBD17;
  border-radius: 9px;
  box-shadow: 2px 2px 2px;
  border: #000 1px solid;
}
.post h3:before {
  font-family: FontAwesome;
  position: relative;
  content: '\f061';
  font-size: 17px;
  padding-right: 10px;
}

Style No.5- By Nafees

Yes! Nafees has did awesome job and created a more style for you guys! Here’s the short snap!

CDD CODE:

.post h3 {
margin: 0px 0px 10px;
padding: 10px;
background-color: #00ABC5;
box-shadow: 0px 3px 0px #4ACCDF;
color: #FFF;
font-size: 16px;
line-height: 16px;
font-family: "Bree Serif",serif;
font-weight: normal;
text-decoration: none;
text-transform: uppercase;
}

###Style No. 6 Shadow & Background Mix - By Nafess Edited By Me.

CSS CODE:

.post h3 {
  background: transparent url("http://2.bp.blogspot.com/-jNxuEWNpGTk/UV7-6ovsE3I/AAAAAAAABYs/tXcNlEqxCwM/s1600/h2.jpg") repeat-x scroll 0px 0px;
  color: #FFF;
  font-size: 20px;
  font-weight: 200;
  letter-spacing: 0px;
  font-family: fantasy;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 0px 1px 6px 3px #000;
  padding: 10px 2px 10px 10px;
  text-shadow: 0px 1px #000;
  text-transform: uppercase;
}

END FOR NOW!

ATTENTION: In order to get FontAwesome Icons displayed, you have to install them first.

I hope you liked these Sub-heading styles… If you need any customization help, kindly leave your reply below. :smile:


How to create two lines above and below the sub title blogspot.com?
How to create two lines above and below the sub title blogspot.com?
Need help to show letter within heading
Need Help in Customizing Sub-heading using CSS
#2

WOW!!!

Thanks a lot brother These are great looking!

Now this is what I was looking from sometime to implement on my new blog :slight_smile: :slight_smile: :slight_smile:

Thanx Buddy Very Much :kissing_heart:


#3

Oh! I am glad that you liked them. :smile:


#4

@Shivansh They were really awesome, beautiful and good looking.


#5

Thank you @Shivansh For helping everyone and this post is surely a productive one. It will make it easy for everyone to customize Headlines in blogger :star2:


#6

@Shivansh You are always amazing for me … Thanks again


#7

Thanks @Mohammad & @MUHSIN_MOHAMED_PC for your kind words. :blush:


#8

:slight_smile:


#9

I have Created one more!

Please Correct any Mistakes

Demo

PS:- The Image is Not clear but the style is!

CSS:-

    .post h3 {
    margin: 0px 0px 10px;
    padding: 10px;
    background-color: #00ABC5;
    box-shadow: 0px 3px 0px #4ACCDF;
    color: #FFF;
    font-size: 16px;
    line-height: 16px;
    font-family: "Bree Serif",serif;
    font-weight: normal;
    text-decoration: none;
    text-transform: uppercase;
}

You Can Change Font and its weight,color and do some adjustments according to your needs :smiley:

Lemme Know if you liked it :smile:

Happy Blogging

~Nafees Khan


#10

Hi @Shivansh, Thanks for this post & Code Styles

I’m looking for this codes from soo long, Sure i’ll implement as soon as possible,


#11

I Used Style No-2 & Its looking Soooooooooo Coooooool.

I Love IT - Bit exited with this awesome code…!!!


#12

I am really happy @Sandhya that you liked that Style No.2

And thanks @Nafees for creating one more awesome style! I have included it too on that collection. See the Style No.5!


#13

Welcome bro :kissing_heart:


#14

Hi! Shivansh

Replace Post with sidebar and maked it my sidebar h2. Really amazing.


#15

Thanks @HassanTahir! :smile: I am glad that you felt it amazing.


#16