Designing Sub-Headline and minor headlines or H3 and H4 tags style

Designing Sub-Headline and minor headlines or H3 and H4 tags style

4
data:blog.title
tag style

A new blogger always has narrow idea about many simple coding. Even when I was new then I was unable to understand little tricky coding. Suppose designing H3 and H4 tag most of the new blogger does not aware. Even I have received some Guest post from new blogger they have written well but they are requesting me about designing Sub-Headline and minor headlines for their own blog. So I have decided a simple but useful tutorial that how you can design Sub-Headline and minor headlines.

Before proceed to the tutorial you must make change your all H3 tag to H2. Because it will work for Sub-Headline and minor headlines. And by default blogger keep Sub-Headline as H3 tag and minor headlines as H4 tag.


Designing Sub-Headline or H3 tag

Sub-Headline generally get priority under a title tag. Title tag we keep it as H2 and Sub-headline as H3. When we go to write any article then we use many Sub-Headline and for making it little attractive we will use icon and color with simple coding..

h3 tag


Step 1 Log in to your blogger account and Click on Template  ->

Step 2 Now click on 
Edit HTML-> Unfold code  

Step 3 Now find ]]></b:skin> by Pressing  Ctrl + F

Step 4 And Paste the below code above ]]></b:skin> 

.post h3 {
background: url("http://3.bp.blogspot.com/-WmoLuAhuJhE/UOqPi8gb0fI/AAAAAAAAAE4/gkUUrLHA2a4/s400/BS%252BPostTitle%252B1.png") no-repeat scroll 4px center transparent;
font-size: 20px;
font-family: "Trebuchet MS",sans-serif;
text-align: left;
font-weight: bold;
width: 570px;
padding: 3px 10px 3px 30px;
color: rgb(165, 165, 3);
border: 3px solid rgb(200, 200, 0);
text-shadow: 0px 1px 0px rgb(204, 204, 204);
border-radius: 60px 60px 60px 60px;
box-shadow: 0px 1px 3px rgb(198, 198, 198), 1px 1px 0px rgba(255, 255, 255, 0.4) inset;
margin: 15px 3px;
text-transform: uppercase;
line-height: 1;
}

Step 5 Now Hit the save button

Designing minor headlines or H4 tag

This is less important tag than sub-headline. Generally we use for bullet marking some less important headlines. By default blogger keep it H4 or minor headlines. To make it little spicy just add the below link.

h4 tag

Step 1 Log in to your blogger account and Click on Template  ->

Step 2 Now click on 
Edit HTML-> Unfold code  

Step 3 Now find ]]></b:skin> by Pressing  Ctrl + F

Step 4 And Paste the below code above ]]></b:skin> 

.post h4 {
background: url("http://3.bp.blogspot.com/-c9uxV21i12g/UOqPjtzYojI/AAAAAAAAAFE/UQobHn7wqvQ/s400/BS%252BPostTitle%252B2.png") no-repeat scroll 5px center transparent;
clear: both;
color: rgb(102, 45, 45);
font-family: "Trebuchet MS",sans-serif;
font-size: 20px;
font-weight: bold;
line-height: 1;
margin: 10px 5px;
padding: 6px 10px 2px 40px;
text-transform: none;
text-shadow: 0px 1px 0px rgb(204, 204, 204);
}

Step 5 Now Hit the save button

How To use?

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. 

how to use

If you feel any problem just leave a comment below. 
Designing Sub-Headline and minor headlines or H3 and H4 tags style
4 Stars stars - "Designing Sub-Headline and minor headlines or H3 and H4 tags style" A new blogger always has narrow idea about many simple coding. Even when I was new then I was ...

Post a Comment

Thanks a lot you are great at CSS

I am glad to hear that

Hello Bro Please Check h3 Image ..........image is not there please reply fast waiting for your reply

Yeh image is present..check the image link...


http://3.bp.blogspot.com/-WmoLuAhuJhE/UOqPi8gb0fI/AAAAAAAAAE4/gkUUrLHA2a4/s400/BS%252BPostTitle%252B1.png

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *