Thursday, December 18, 2014

By using CSS you can stylize your post header titles with different color, borders and many more. This is really make your header title awesome and attractive. This will indicate this is the post title of the website or blog, today i am going to share such an awesome CSS code which is written by author +Hemant Verma.

Add CSS Code

.post h2 {background: url( no-repeat 4px center transparent; font-size: 19px; font-family: 'lobster',sans-serif;font-weight: bold; padding: 3px 10px 3px 30px; color: #0000FF; border: 3px solid #008B8B; text-shadow: 0 1px 0 #CCC;-moz-border-radius:60px; -webkit-border-radius: 60px;border-radius: 60px; -moz-box-shadow: 0 1px 3px #c6c6c6,1px 1px 0 rgba(255,255,255,0.4) inset; -webkit-box-shadow: 0 1px 3px #c6c6c6,1px 1px 0 rgba(255,255,255,0.4) inset; box-shadow: 0 1px 3px #c6c6c6,1px 1px 0 rgba(255,255,255,0.4) inset; margin: 15px 3px; text-transform: uppercase; line-height: 1; border-image: initial; }
  • Copy above CSS code, 
  • Sign in blogger.
  • Go to dashboard.
  • Template ---> Edit HTML
  • Search for  ]]></b:skin>
  • Paste the copied CSS code before ]]></b:skin>.
  • Save template. 
Now check your  post title, that will show you output like below figure... 
Post title
Note: This CSS code only works with H2 tag not compatible with other H1, H3 or any other, so if you want to make it compatible with other tag you need to change .post h2 into .post h1 or .post h3 

AnsMachine . 2017 Copyright. All rights reserved. Designed by Blogger Template | Free Blogger Templates