Beautiful social plugin widget with css animation style for your website

Friend Now i share a beautiful social plugin widget with animation css style for your website.This widget style is best for all website.First see the demo..

• 
• 
• 
• 
• 

If you like this style just follow my instruction step by step.Here i add two method....

First Method:
step 1: First copy below this code

<link href="http://css-js-and-css.googlecode.com/svn/trunk/css/text.css" rel="stylesheet" type="text/css"/>

Step 2: Then paste the code in your HEAD TAGS and click save.

step 3: Then copy below the code an paste your HTML/JAVASCRIPT box or wml/xhtml box or any website code editor box.Before paste the code change red text by your site name.

<ul class="bubblewrap"><li><a href="http://www.stumbleupon.com/submit?url=learn26.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9UpuK5UHFnR4Jm7pRoSrOkDZJj9mFO4wA0DIaKk8DN5XLUNCamra7lFOvSlhJYvo_kYPMg23jdL2U2G4UDV6dCzI968QTbrh_1QkM4GKI6YwEMEPNT2ZfEOIhJy9Z-MHnndqi-nas94/s1600/stumbleupon.png" title="Add to Stumbleupon" /></a></li> <li><a href="http://www.facebook.com/share.php?u=lear26.blogspot.com" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNpNBMBfPWHi1wgUcXE1_XKi9LwN8JGI0UFQCEv_dLQmR4fh-P1umkulJT0EV9SZwBTHEKaVSMvVTyx-c4TnvMYV8QJ671AboliCmm4QUF2_ZnL8fzceZdDqa_KQg4WSfPMYSNmFwZ3_g/s1600/facebook.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.digg.com/submit?phase=2&url=learn26.blogspot.com" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXosltSBr5SJCpOjKe3HcgpluZS5XDYC69rl1CpCWaeNycjX6jJlLqinlWeF3YsqTegeYGpFq9yy1ZpOqlOrC_Avgn9TAHtADCA_3qxdgCFqoPe2fEqznF-XMdbaXsz0zChGHzmfjS9qE/s320/digg.png" title="Add to Digg" /></a></li> <li><a href="http://twitter.com/share?url=learn26.blogpot.com" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyq-C6563QT06_VKzc01hQB1V_eAZEH9JUvBhmICxCI0uU4cNNLiw4FhMJhCtSroYAJC3BfcjmHeVeS61HF_AbSGcSYf6oBFP3G8RGIL_cIaoDeSb-_TnpzB_kVOUvJsgDl6u-VLtGPho/s1600/twitter.png" title="Add to Twitter" /></a></li><li><a href="http://learn26.blogspot.com/rss.xml" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_MZIReKrsSZsqI4p0Y6b8yKK51Ec-DcoT1UrHPCaCrlbUpMmunjFklIGWmfrqzj_VknnTZvGiUyJnH1TXau0bnyhH4aA9x7QWpxXJLlji57AIikN01EqciGawefJXBhZ02rVTMt-bdW8/s1600/rss.png" title="Add to RSS" /></a></li>
</ul>

step 4: Now click save button and enjoy beautiful plugin in your website.


Alternate method(Second Method) to paste:
If you didn't understand above the code pls follow other instruction to add this code:
step 1: Just copy below code and paste your HTML/JAVASCRIPT box or wml/xhtml box or any website code editor box and click save button.Before paste the code pls change the red text by your site name:

• <style type="text/css">
  /*...Start from learn26.blogspot.com...*/
  .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*/
  -moz-transition:-moz-transform 0.1s ease-in; /*animate transform property */
  -webkit-transition:-webkit-transform 0.1s ease-in;
  -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);
  }
  /*...End from learn26.blogspot.com...*/
  </style>
• <ul class="bubblewrap">
  <li><a href="http://www.stumbleupon.com/submit?url=learn26.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9UpuK5UHFnR4Jm7pRoSrOkDZJj9mFO4wA0DIaKk8DN5XLUNCamra7lFOvSlhJYvo_kYPMg23jdL2U2G4UDV6dCzI968QTbrh_1QkM4GKI6YwEMEPNT2ZfEOIhJy9Z-MHnndqi-nas94/s1600/stumbleupon.png" title="Add to Stumbleupon" /></a></li>
  <li><a href="http://www.facebook.com/share.php?u=lear26.blogspot.com" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNpNBMBfPWHi1wgUcXE1_XKi9LwN8JGI0UFQCEv_dLQmR4fh-P1umkulJT0EV9SZwBTHEKaVSMvVTyx-c4TnvMYV8QJ671AboliCmm4QUF2_ZnL8fzceZdDqa_KQg4WSfPMYSNmFwZ3_g/s1600/facebook.png" title="Add to Facebook" /></a></li>
  <li><a href="http://www.digg.com/submit?phase=2&url=learn26.blogspot.com" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXosltSBr5SJCpOjKe3HcgpluZS5XDYC69rl1CpCWaeNycjX6jJlLqinlWeF3YsqTegeYGpFq9yy1ZpOqlOrC_Avgn9TAHtADCA_3qxdgCFqoPe2fEqznF-XMdbaXsz0zChGHzmfjS9qE/s320/digg.png" title="Add to Digg" /></a></li>

<li><a href="http://twitter.com/share?url=learn26.blogpot.com " rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyq-C6563QT06_VKzc01hQB1V_eAZEH9JUvBhmICxCI0uU4cNNLiw4FhMJhCtSroYAJC3BfcjmHeVeS61HF_AbSGcSYf6oBFP3G8RGIL_cIaoDeSb-_TnpzB_kVOUvJsgDl6u-VLtGPho/s1600/twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://learn26.blogspot.com/rss.xml" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_MZIReKrsSZsqI4p0Y6b8yKK51Ec-DcoT1UrHPCaCrlbUpMmunjFklIGWmfrqzj_VknnTZvGiUyJnH1TXau0bnyhH4aA9x7QWpxXJLlji57AIikN01EqciGawefJXBhZ02rVTMt-bdW8/s1600/rss.png" title="Add to RSS" /></a></li>
</ul>

Friend if you like or faces any problem please comment.We answer your comment instantly.