How To Make Stylish Sub Headings In Blogger

Customize Post Title Heading

Live Demo

Go to blogger dashboard>>Design>>EDIT HTML

Now press Ctrl+F and search .post h3/h3.post and replace with Below code

/* The creator of this code is www.vmtricks.blogspot.com.com please don't change any thing without owner permisson */ .post h3 { text-align:left; font-size: 18px; font-family: Oswald; font-weight:normal; color:#000; padding: 3px 10px 3px 10px; text-shadow: 0 1px 0 #CCC; border: 3px solid #980303 ; -moz-border-radius: 90px; -webkit-border-radius: 90px; border-radius: 90px;-moz-box-shadow: 0 1px 2px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset; -webkit-box-shadow: 0 1px 2px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset; box-shadow: 0 1px 2px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset; margin: 15px 3px; text-transform: uppercase; line-height: 1.3; background:white; transition:background 2s; -moz-transition:background 2s; /* Firefox 4 */ -webkit-transition:background 2s; /* Safari and Chrome */ -o-transition:background 2s; /* Opera */ } .post h3 a, #content h1 a:visited { color: #000; font-size:17px; font-family: Georgia, Times New Roman; font-weight: normal; margin: 0 0 2px; padding: 4px 0 0; } .post h3:hover { color:#FFF; font-size:18px; text-decoration: none; background:red; border: 3px solid #000; } 

 Customize Your Subheading

Go to blogger dashboard>>Design>>EDIT HTML

Now press Ctrl+F and search .post h2/h2.post and replace with Below code.

.post h2 { background: url("http://aux3.iconpedia.net/uploads/6930445441486693898.png") norepeat 2px center transparent; font-size: 20px; font-family: Oswald; font-weight:normal; padding: 3px 10px 3px 10px; color: #0274be; background:white; border: 3px solid #5bb5f0; text-shadow: 0 1px 0 #CCC; -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius: 60px; -moz-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset; -webkit-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset; box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset; margin: 15px 3px; text-transform: uppercase; line-height: 1.3; transition:background 2s; -moz-transition:background 2s; /* Firefox 4 */-webkit-transition:background 2s; /* Safari and Chrome */ -o-transition:background 2s; /* Opera */ } .post h2:hover { background: url("http://aux3.iconpedia.net/uploads/6930445441486693898.png") norepeat 6px center transparent; background:#06F; color:#FFF; border-color:#FFF; }

 Customize Your Minor Heading

Go to blogger dashboard>>Design>>EDIT HTML

Now press Ctrl+F and search .post h4/h4.post and replace with Below code

.post h4 { background-size:20px 20px; font-size: 12px; font-family: Oswald; font-weight:normal; padding: 3px 10px 3px 10px; color: #0274be; border: 2px solid #CCC; text-shadow: 0 1px 0 #CCC; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; -moz-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset; -webkit-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset; box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset; margin: 15px 3px; text-transform: uppercase; line-height: 1.3; transition:border 2s; -moz-transition:border 2s; /* Firefox 4 */ -webkit-transition:border 2s; /* Safari and Chrome */ -o-transition:border 2s; /* Opera */ } .post h4:hover { border:#5bb5f0; }

• If You could not find .post h4/h4.post and .post h2/h2.post.
• Then simply paste laste two heading codes of Sub Heading and Minor Heading just below the First Post Title Heading code.