Need Help in Customizing Sub-heading using CSS


#1

Hi Guys

I have a question in the MBT’s Blog in every Subheading there are two lines obove and one beneath it how is this possible? Can anyone please tell me how to do this? on my blogger blog. Thank you


#2

They simply used common css. You can also do this by applying border css, padding css and margin css in your blog’s h3 headings. To do this, kindly use bellow steps:

  1. Go to blogger Dashboard > Template > Edit HTML
  2. Now, search for ]]></b:skin> and paste below code above it:
.post h3 {
color:#4E555A;
border-top:1px dotted #4E555A;
border-bottom:1px dotted #4E555A;
padding:3px
}
  1. Now save your template and all done!

UPDATE: I have updated the CSS Code. You can use it now. :smile:

P.S.- Changed topic title.


#3

Thanks for the help :slight_smile: ill try to add it now and see what happens


#4

You can try other effects too by changing some css codes. Like, change ‘solid’ with ‘dashed’ or ‘dotted’ in the border css and see what will happen.


#5

Here, I have listed some more styles. You can try them too:

#1- Shadow Effect h3 Style

CSS CODE

.post-body h3 {
  font-size: 140%;
  box-shadow: 3px 3px 3px;
  border-left: 1px solid;
  padding: 5px;
  padding-left: 8px;
  border-bottom: #4E555A dashed 1px;
  border-top: #4E555A dashed 1px;
  color: #808080;
}

#2- Knife Style h3

CSS CODE:

.post-body h3 {
  border-bottom-right-radius: 100px;
  font-size: 140%;
  box-shadow: 3px 3px 3px;
  border-left: 1px solid;
  padding: 5px;
  padding-left: 8px;
  color:#4E555A;
  border-top: #4E555A dashed 1px;
}

Hope you liked it!. :smile:


#6

@Shivansh These styles are great can you provide some more of them or their sources :smiley:


#7

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

I’ll surely create some more styles and will share them with all… Just wait for some time… :wink:


#8

How do create CSS which software do you use :D?


#9

I am not using any software. CSS is a computer language like HTML. CSS really make your work easy to stylize any object (HTML Object).

I learnt CSS by only two things. 1) Practice and 2) Looking at other blog’s CSS by using the view-source function of Google Chrome.

If you also want to learn css, then you only have to do two things. 1) Look at W3 School CSS and 2) Practice it in your empty time. :smile:

If you want any information about CSS, meet me at PM. I would love to tell you. :smile:


#10

Hello @Nafees! I have just posted some other styles of Sub-heading for you and all in a seperate topic! You can read it here.


#11

@Shivansh pls help! i need css to change the colour of my sub-heading to red.


#12

Then simply add below code above ]]></b:skin> in your template:

.post h3{
color:red;
}

#13

thanks am grateful,. it is working,… @Shivansh