Bishal Creations Complete PC Solutions And Games Download

How To Change Heading Style In Blogger Using CSS

Hello Readers,Today i will show you How To Change Heading Style In Blogger Using CSS.How To Change Heading Style In Blogger with CSS? That is the question which my all friends ask me frequently to make their websites posts more attractive and user friendly, as you can see I also use custom sub-headings to make my articles more eye catching and user friendly. Because giving proper headings in an article is the best way to make any content effectively readable, so if your old headings tags adopt an awesome style then your post become more beautiful and attractive. So in this article we will learn a trick to customize H1, H2, H3, H4 and H5 tags into an awe-inspiring look. So keep reading to know more about it...

                                              

                       < Demo >


How To Customize Heading Style In Blogger

As you know Blogspot uses a simple odd form headings by default, so when you put any H2 or H3 tag above the paragraph in your post then it shows your H2 and H3 tags in simple form as a result of view. So your article might be boring by this simple styling, but if you changed it into well looking form then it will be attractive than before. Below I have mentioned some well looking Heading designs you may like them.


Easy Steps to Customize Heading Style in Blogger


Here in this section i will tell you two steps about customizing sub-heading tags into template html settings and adding h2, h3 and h4 tags in blogspot post.Now,Just Follow My Steps:

Step 1: Navigate to Blogger Dashboard >> Template >> Edit HTML
Step 2: Now search for ]]></b:skin> and paste below piece of code just above ]]></b:skin>

.post h3{
background: url("http://1.bp.blogspot.com/-zs4aWzVV5J4/UTm__Ri99eI/AAAAAAAAbW4/a--rNrWDM9Q/s1600/h2.png") no-repeat scroll 4px center transparent;
border: 3px solid #C8C800;
border-radius: 60px 60px 60px 60px;
box-shadow: 0 1px 3px #C6C6C6, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
color: #A5A503;
font-family: 'lobster',sans-serif;
font-size: 19px;
font-weight: bold;
line-height: 1;
margin: 15px 3px;
padding: 3px 10px 3px 30px;
text-shadow: 0 1px 0 #CCCCCC;
text-transform: uppercase;
}

Step 3: Now click on "Save Template" button to save your settings.
Step 4:Then You Are Done.


Customize


i) If you want to use the above professional Headings Tag with H2, H4 or H5 then simply replace .post h3 with .post h2 or .post h4 or .post h5 according to your wish.

ii) To change icon simply put your icon image link in the place of http://1.bp.blogspot.com/-zs4aWzVV5J4/UTm__Ri99eI/AAAAAAAAbW4/a--rNrWDM9Q/s1600/h2.png

How to Add Headings / Sub-Headings into any Post



While writing an article in Blogger post editor, Select whole text you want to use as Heading and click on headings menu button. Click on it and choose Heading, Subheading or Minor Heading according to your desire.

Helping Tips:

In Blogger when we use HTML editor, we can use headings style as H2, H3 and H4 only
For Example in HTML language we write it like this <h2> Your First Heading </h2>
  • Heading stands for H2 
  • Subheading stands for H3
  • Minor Heading stands for H4
But if you want to write words into H5 tag then you have to write it manually into HTML language.

Now,you have Succesfully  Change Heading Style of Your Blogger Blog.If you have Any problem Drop Your Comment Below.
Happy Blogging!!!!





Previous
Next Post »
Post A Comment Using..

No comments :

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Notify Me" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. Please "Do Not Add Links" to the body of your comment as they will not be published.
4. Only "English" comments shall be approved.
5. If you have a problem check first the comments, maybe you will find the solution there.
ConversionConversion EmoticonEmoticon