Adding social networking buttons using CSS3 transform and transitions
1. Log in to your dashboard--> Design- -> Edit HTML
2. Search "Ctrl+F" and find ]]></b:skin> Before it paste the following code:
.bubblewrap{ list-style-type:none; margin:0; padding:0; } .bubblewrap li{ display:inline; width: 65px; height:60px; } .bubblewrap li img{ width: 55px; /* width of each image.*/ height: 60px; /* height of each image.*/ border:0; margin-right: 12px; /*spacing between each image*/ -webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */ -o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */ } .bubblewrap li img:hover{ -moz-transform:scale(1.8); /*scale up image 1.8x*/ -webkit-transform:scale(1.8); -o-transform:scale(1.8); }
3. Now go to Layout-->Page Element and click on "Add a gadget". Select "html/java script" and add the code given below and click save.
<center><ul class="bubblewrap"> <li><a href="http://www.artistutorials.co.cc"><img src="http://img42.imageshack.us/img42/7086/stumbleuponlj.png" title="Add to Stumbleupon" /></a></li> <li><a href="http://www.artistutorials.co.cc"><img src="http://img253.imageshack.us/img253/835/facebookv.png" title="Add to Facebook" /></a></li> <li><a href="http://www.artistutorials.co.cc"><img src="http://img821.imageshack.us/img821/5032/diggk.png" title="Add to Digg" /></a></li> <li><a href="http://www.artistutorials.co.cc"><img src="http://img832.imageshack.us/img832/5893/twittermx.png" title="Add to Twitter" /></a></li> <li><a href="http://www.artistutorials.co.cc"><img src="http://img4.imageshack.us/img4/2004/rssqn.png" title="Add RSS Feed" /></a></li> </ul> </center>
Replace the red links with your own facebook twiteer digg etc links.
DEMO
2 comments
if we dont have Stumbleupon account,do we can ignore the line ---> Add to Stumbleupon ??????
thanks in advance
Yes you can ignore, delete or whatever you want to do.
Click to Add a New Comment
Leave your comment
- If you're asking a question click the Subscribe By Email link, below the comment form, to be notified of replies.
- Do NOT add links to the body of your comment as they will not be published.
- Only the comments posted in ENGLISH will be approved.
- If you have a problem check first the comments , maybe you will find the solution there.