10 stylish Sub-Heading Design for Blogger Blog Post

10 stylish Sub-Heading Design for Blogger Blog Post

9
data:blog.title
h3 tag

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. 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.

Step 1 Log in to your Blogger Account  and Go to your Blogger Dashboard

Step 2 Click on Now click on -> Template -> 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{
margin-top:10px;
    max-width:95%;
    padding:6px 2px;
color: #000000;
    padding-left:10px;
    margin-bottom:10px;
    font-size:20px;
    font-family:'Oswald',sans-serif;
    background-color:#F8FAFD;
    text-decoration:none;
    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 {
color:#222222;
border-left:10px solid #222222;
border-right:10px solid #222222;
padding:3px 5px 3px  20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #222222;
-webkit-box-shadow:0px 0px 13px #222222;
-moz-box-shadow:0px 0px 13px #222222;
}
.post h3:hover {
color:#219DFC;
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-family:'Oswald',sans-serif;
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%;
line-height:1.0em;
}
.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);
font-family:'Oswald',sans-serif;
font-size:120%;
font-weight:400;
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);
font-family:'Oswald',sans-serif;
font-size:120%;
font-weight:400;
margin: 0px 0px 1em;
text-transform: uppercase;
text-shadow: rgb(0, 0, 0) 1px 1px 0px;
}

Style 6

Code for Style 6 are below-


headline

.post h3 {
background:#333;
margin:5px 4px 5px 0;
padding:9px 0 9px 10px;
border:0;
color:white;
font-size:120%;
line-height:16px;
font-family:'Oswald',sans-serif;
text-decoration:none;
text-transform:uppercase;
box-shadow:4px 4px 0px rgba(33,33,33,0.45);
}

Style 7

Code for Style 7 are below-


heading

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

Style 8

Code for Style 8 are below-


super head tag

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

Style 9

Code for Style 9 are below-


h3 tag

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

Style  10

Code for Style 10 are below-

header 3 tag

.post h3 {
padding:5px;
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);
color:#333333;
font:140% 'Oswald',Sans-Serif;
text-transform: uppercase;
}

Step 5 Finally hit the Save template button.

Customization

  • 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.


subheadline


Hope you have successfully added the custom sub heading in your blogger template. For further support feel free to write in comment  section. 
10 stylish Sub-Heading Design for Blogger Blog Post
4 Stars stars - "10 stylish Sub-Heading Design for Blogger Blog Post" When a author write content in Blogger Blog post then s/he use sub-headline to isolate some im...

Post a Comment

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 !!

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

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...

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.

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 !!!

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.

:wt

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

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

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

http://www.bloggerspice.com/2014/12/Technique-to-add-keyboard-symbol-on-blog-post.html

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 *