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