How To Add Hover Effect In Blog Header

Hi Readers!! The blog header is one of the most important part of your blog because it contains your blog's title and reputation, So, Today we will teach you that how could you make your header more cool and stylish by adding  hover effect in it. It will give a very nice and superior touch to your blog's style. The steps are very simple and easy that you will not feel any problem to install it. The trick contains some css coding, so it will not affect your blogs speed, Lets start it and make your blog more awesome.

Must Read: Fancy Social Subscribe Widget For Blogger

Installing The Hover Effect:-

• Go To Blogger.com >> Your Blog >> Template
• Now Backup your template.
• Then select Edit HTML >> Proceed
• Don’t forget to Click/Tick the Expand Template Widgets box.
• And press [Cntrl+F] and search for <div id='header-inner'> and just below/after it paste the following coding.

<div id='sbhover1'><div id='sbhover'>

Now again just below it you will find  <b:include name='description'/>

        </b:if> 

so just below it paste this. 

 </div> </div>.

Adding the css.

• First Open Your Blogger Account :-> Then Open your Blog
• Now Click Template Button :-> And Press Edit Html
• Now Find " ]]></b:skin> " Code.
• Now Click Below Button And Copy This Widget Code And Paste it Above " ]]></b:skin> " Code.

Opacity Effect

If you want to add opacity effect then Just Click the Below Get Code Button And Copy/Paste Opacity Effect Code.

Get Code

 Rotation Effect:-

If you want to add the rotational effect then just click below get code button and copy/paste the following coding.

Get Code

Zoom effect

If you want to add the zoom effect then just click below get code button and copy/paste the following coding.

Get code

All done!! just save your template by pressing save button.

Enjoy!!