How to add CSS image moving menu to blogger

How to add CSS image moving menu to blogger

Demo here

1. Log in to your blogger account and Go to Design >> Edit HTML

2.  First of all download your full template.because if you make some wrong
    you can recover it.

3. Put checked marked in Expand Widget Templates

4. Find this code by using  ]]></b:skin>

5. Paste below code before ]]></b:skin> code

#imagemove {            
        padding:0;             
        margin-left:30px;             
        list-style-type:none;             
        height:120px;             
        }             
#imagemove li {             
        display:block;             
        float:left;             
        width:120px;             
        height:120px;             
        position:relative;             
        margin:0 15px 7px 0;             
        }             
#imagemove li a {             
        display:block;             
        width:120px;             
        height:120px;             
        background:transparent;             
        overflow:hidden;             
        position:relative;             
                padding:5px;             
        } 
#imagemove li a img {            
        width:100%;             
        height:100%;             
        border:0;             
        margin-right:30px;             
        padding:5px;             
        }             
#imagemove li a:hover{             
        position:absolute;             
        left:0px;             
        top:20px;             
        padding:5px;             
        width:120px;             
        height:120px;             
        z-index:100;             
        }

6. Now click save template.

7. Go to Page Element and click Add gadget

8. Click JavaScript/HTML and paste below code.

<ul id="imagemove">              
<li><a href="http://www.bloggertrix.com/"><img alt="menu 1" src="http://i43.tinypic.com/2arep5.png" title="home"/>home</a></li>

<li><a href="http://www.bloggertrix.com/"><img alt="download" src="http://i41.tinypic.com/20pxbmc.png" title="download"/>download</a></li>

<li><a href="http://www.bloggertrix.com/"><img alt="music" src="http://i41.tinypic.com/2rhqtlf.png" title="menu 3"/>menu 3</a></li>  

<li><a href="http://www.bloggertrix.com/"><img alt="feed" src="http://i40.tinypic.com/vqkvbl.png" title="feed"/>feed</a></li>  

<li><a href="http://www.bloggertrix.com/search?max-results=200"><img alt="search" src="http://i44.tinypic.com/2lus08g.png" title="search"/>search</a></li>               
</ul>

* Replace http://www.bloggertrix.com/ with your target URL
* If you want change icon replace green color link with your icon URL

9. Now click save, you are done.