Stylish heading style for blogger

Assalam u alikum readers !
i,m really Sorry for late posting but i dont have enough time to do this i hope you understand. Today i,m going to tell you a trick with which you can easily customize your Old blogger heading style with a new stylish one. you can see live demo of my heading styles and i want to share it with you.
and with this css code you can also customize all blogger headings as you want  but now i,m only telling you about H2 heading mean main heading of blog .
Now follow my steps below

Steps

  • Goto blogger> Dashboard
  • ediT HTML > proceed
  • Now find   ]]></b:skin>
  • add css code just above   ]]></b:skin>
Code
.post h2 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwsnguNKOuCCZLMLv7xaZkgqh_3K6Ki3nGG4SgZctOoPNHM-OWnjK0uoDjt9IM5_B8KUxMwJW23Ex6q5ahnoZt8QKUR9b9g1CglLvZwvFDN_C0viI6wE-bLgH5CZzQXpLqGbEl60SHz-o/s1600/h3.png") no-repeat 4px center transparent;
font-size: 20px;
font-family: Oswald;
font-weight:normal;
padding: 3px 10px 3px 80px;
color: #0274be;
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;
}
Now Its Done
And also if you want this style for other headings kindly replace h2 in code with the heading tag you want
and if you want to change the image kindly change image url with your's .

Share this

Related Posts

Previous
Next Post »