How To Give Elegant HTML5/CSS3 Effect in Blogger Post Title

Say goodbye to the boring, simple Blog post title for your blog. Why not to Make it awesome by applying some HTML5/CSS3 touch in it and let everyone click on it. Hello World! Title of the post is what people look first on your blog when they really loving your blog and wants to digg more and more content from it. What they look for is awesome post title, why to present them in boring way. Today you’re about to learn how to apply some elegant effect and look to your Blog post title.

 Step 1:Open Blogger.com

Step 2: Navigate to Template > Edit HTML
[We suggest you to have to backup your template before proceeding.]

Now in HTML Editor Tap [Ctrl ] + [F] and find h3.post-title, Ignore the first result and move on to the second. There you will find something like this.

h3.post-title, .comments h4 { font: $(post.title.font); margin: .75em 0 0;

I am not going to give you bunch of codes now to paste there and live with what I given to you. Rather I am telling you how you can customize it. Just paste the code below the lines you searched above.
  If you want to add the border in your post:

border:2px solid #4682B4;

Change the border thickness by changing 2 to lower or higher value and border color by replacing with other color code value.

Make the border corner soft and rounded:

border-radius:10px;

More Radius value -> more Round

Add Gape between Text and border:

padding:5px;

More Padding value -> More gap

Add shadow effect in post Title:

text-shadow: 2px 2px 1px #FFFFFF;

First 2px is for right side shadow Second 2 px for down shadow 1 px for blur length in shadow #FFFFFF is HTML color code of shadow

Add gradient background to title:

background: -webkit-linear-gradient(top, white,#DCDCDC); background: -moz-linear-gradient(top, white,#DCDCDC); background: -o-linear-gradient(top, white,#DCDCDC);

-webkit- for Google Chrome browser -moz- for Mozilla -o- for Opera Linear-gradient for linear Gradient effect Top, for initial position White for initial color #DCDCDC for HTML code of color from bottom

Combining all, your code should be look something like this:

h3.post-title, .comments h4 { font: $(post.title.font); margin: .75em 0 0; border:2px solid #4682B4; padding:5px; text-align:center; border-radius:10px; text-shadow: 2px 2px 1px #FFFFFF; background: -webkit-linear-gradient(top, white,#DCDCDC); background: -moz-linear-gradient(top, white,#DCDCDC); background: -o-linear-gradient(top, white,#DCDCDC); -webkit-transition: -webkit-transform 3s,scale 3s; -moz-transition: -moz-transform 3s,scale 3s; -o-transition: -o-transform 3s,scale 3s; }

You can visit HTML Color value at W3schools.com anytime for getting costume color value to replace all the colors I have mention, I strongly recommend you to opt best as per your blog color theme.

How to Add Hover Effect in title of Blogger Blog post: Adding Hover Effect in HTML5 is easy: All you need to add the hover transform time (in second) under post design code shown above Example:

-webkit-transition: -webkit-transform 3s,-moz-transition: -moz-transform 3s, -o-transition: -o-transform 3s,

Now you are ready to add costume Hover effect. In this post I am going to tell you how you can add Scale transformation effect. That means whenever your title is hovered, it will get enlarged to get in focus Just below the code you edit before, you’ll find

h3.post-title:hover, .comments h4:hover{ }

If not, add the code Now in { } section your hover code will be residing. You can change the background(on hover) by adding

background: -webkit-linear-gradient(top, white,#DCDCDC); background: -moz-linear-gradient(top, white,#DCDCDC); background: -o-linear-gradient(top, white,#DCDCDC);

With different color value

Adding scale transformation hover effect:

-webkit-transform: scale(1.0125);

Value goes higher from 1, larger the title with border will expand on hover.

Add shadow on Hover:

box-shadow: 5px 5px 3px #888888;

Replace the values of shadow length and color code as per your need. Now your code should look like

h3.post-title:hover, .comments h4:hover{ -webkit-transform: scale(1.0125); box-shadow: 5px 5px 3px #888888; background: -webkit-linear-gradient(top, white,#cdcdcd); background: -moz-linear-gradient(top, white,#cdcdcd); background: -o-linear-gradient(top, white,#cdcdcd); }

If you want to add more HTML5 effect must to visit w3Schools.com for HTML5 and CSS3 reference and make your design more awesome. What else you would like to suggest for styling I can help you with. Discuss with me in comment. This is a guest post by Dheeraj who is one of my best blogger friend...