Add Hover Effect To Post Title and Header On Blogger Homepage


Add Hover Effect To Post Title And Header

Hover effect gives a lively touch to your blog or a website and css has made it very simple for us. Just use few lines of code and there you go. Basically when mouse is placed over something for example text then it is called Mouse Hover or simply hover. Today I shall tell you how you can add hover effect to post title and header in your blogger homepage. This post consists of two parts basically: first for post title and then for header!

Now let's just come to the point and apply our easy steps to make your blog look more amazing!

Add Hover Effect To Post Title:


Now just relax back and follow the complete steps below:
  • Go to your blogger account.  
  • Click on Theme and backup your template.
  • Now click on Edit Html and search for ]]></b:skin> 
  • Add the following code just above ]]></b:skin>

  • .post h2 a: hover { 

    color:#8dbb90;

    -moz-transition: all 0.5s;

    -o-transition: all 0.5s;

    -webkit-transition: all 0.5s;

    -ms-transition: all 0.5s;

    transition: all 0.5s

    }



  •   Save your template and you are done!

NOTE:  You can change Color #8dbb90 with any color that you want. Use Hex Color Tool for generating different colors. You can also use Opacity effect instead of using Color, for this just replace color:#8dbb90; with opacity: 0.5; 

Opacity just lightens the brightness of the color and in this way hover effect becomes more effective. By default opacity in blogger is 1.0

Using Padding will also give animated look to the Hover effect. For that type padding: 0px 0px 0px 10px anywhere in the code. 

Now I will tell you what transitions are and how can you use them? We used transitions here to specify how much time or seconds the effect would take to complete. We used half of a second here. 

-Webkit- is used for Chrome and Safari, -o- is used for Opera, -ms- is used for Internet Explorer and -moz- is used for firefox! Specifying them separately is a good practice and it will avoid inconsistency between the hover effect for different browsers.

Add Opacity Hover Effect To Header:


Now follow the steps for adding hover effect to header on blogger homepage:
  •  Visit your Blog on Google Chrome or Mozilla Firefox and right click on the Header or main title of your blog.
  • Click on Inspect Element from drop down menu.
  • A window will pop up. Search for your Header css and copy it just without brackets.
  • Now click on Theme again and Backup your template. This will prevent you from losing the code if you suddenly do anything wrong!
  • Now search for ]]></b:skin> in Edit Html.
  • Paste the following code just above the ]]></b:skin> using :hover with the text you copied above! In our case this is .headerleft img

  • .headerleft img:hover {

    opacity:0.7;

    }




  •  Save your template and you are done!

Note: Change opacity as you wish max is one and min is zero. Enjoy!

Bottom Line:

You have successfully added hover effect to your post title and header logo. Simplest way is search for css using Inspect Tool and just use :hover with any class. If you still have any issues then comment below I will definitely answer. I am here to help you all. : )   

No comments:

Powered by Blogger.