Place Your Ads Here 460x68 ads

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://only4everyone.blogspot.com/"><img alt="menu 1" src="http://i43.tinypic.com/2arep5.png" title="home"/>home</a></li>
<li><a href="http://only4everyone.blogspot.com/"><img alt="download" src="http://i41.tinypic.com/20pxbmc.png" title="download"/>download</a></li>
<li><a href="http://only4everyone.blogspot.com/"><img alt="music" src="http://i41.tinypic.com/2rhqtlf.png" title="menu 3"/>menu 3</a></li>
<li><a href="http://only4everyone.blogspot.com/"><img alt="feed" src="http://i40.tinypic.com/vqkvbl.png" title="feed"/>feed</a></li>
<li><a href="http://only4everyone.blogspot.com/search?max-results=200"><img alt="search" src="http://i44.tinypic.com/2lus08g.png" title="search"/>search</a></li>            
</ul>


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

9. Now click save, you are don



Sameera ChathurangaAbout Author Shoyab Khan

Blogger, MAC user, Apple Fan, Online Content Writer, Designer, Gamer, Programmer and Jovial Guy!. Like my Facebook Fan Page. Catch me on Twitter and Google+. Read more about Me and Www. Only4Everyone.Blogspot.com. Download Free Games,Download Free Software,Download Movies and Watch Online,Blogger Wordpress and Website Tips , Tricks ,Widgets,Templets, and many other Sources and Health Tips,Photo Gallery contact me

Thank You

0 comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...