How To add moving and colorful social media buttons to your blogger???

 

Today i am talking about that how to add moving and colorful social media buttons to your blogger with the help of CSS. You are thinking that what is moving and colorful social media buttons????? , yes?? so here is the demo got it? what is moving and colorful social media buttons so if you want to add moving and colorful social media buttons to your blogger so just follow the below steps.....

 

 

 

 

How To add moving and colorful social media buttons to your blogger???

1, Go to blogger dashboard >> template >> customise >> advanced >> and there add this CSS Code

.abcde
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Firefox: */
-moz-animation-name:myfirst;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
/* Opera: */
-o-animation-name:myfirst;
-o-animation-duration:5s;
-o-animation-timing-function:linear;
-o-animation-delay:2s;
-o-animation-iteration-count:infinite;
-o-animation-direction:alternate;
-o-animation-play-state:running;
}

@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:100px; top:0px;}
50%  {background:blue; left:100px; top:50px;}
75%  {background:green; left:0px; top:50px;}
100% {background:red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:100px; top:0px;}
50%  {background:blue; left:100px; top:50px;}
75%  {background:green; left:0px; top:50px;}
100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:100px; top:0px;}
50%  {background:blue; left:100px; top:50px;}
75%  {background:green; left:0px; top:50px;}
100% {background:red; left:0px; top:0px;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:100px; top:0px;}
50%  {background:blue; left:100px; top:50px;}
75%  {background:green; left:0px; top:50px;}
100% {background:red; left:0px; top:0px;}
}

2, click to apply to blog .You can also able to change the colors of background...
3,  Now go to layout >> add a gadget >> html/javascript and paste the below code

<div class="abcde"><a href="http://www.facebook.com/pages/A-best-Blog-name-of-Rockingaseel-rockingaseelblogspotcom/129752063852630?ref=ts&amp;fref=ts" target="_top"><img src="https://lh6.googleusercontent.com/-w-Rn_mZiop8/UQbCeE7zn9I/AAAAAAAAA10/7eqKdh3GGEY/h120/New+Bitmap+Image.bmp" height="60px" width="60px" />like us on fb</a></div>
<div class="abcde"><a href="https://plus.google.com/110869165644293114254/posts" target="_blank"><img src="https://lh5.googleusercontent.com/-ip7rVOIzjoA/UQbCc1WDQcI/AAAAAAAAA1g/MmymWxclcb8/h120/New+Bitmap+Image+%283%29.bmp" height="60px" width="60px" />add me to your circle</a></div>
<div class="abcde"><a href="http://twitter.com/rockingax33l" target="_blank"><img src="https://lh3.googleusercontent.com/-NZ6AgATSSAE/UQbCc6tFPdI/AAAAAAAAA1k/E-Ko8TVb3zA/h120/New+Bitmap+Image+%282%29.bmp" height="60px" width="60px" />Follow us on twitter</a></div>
<div class="abcde"><a href="http://1.bp.blogspot.com/-GgeNYA0P8H0/UJXom9slg2I/AAAAAAAAExI/yGDi4KX6ofY/s1600/coming-soon.jpg" target="_blank"><img src="https://lh3.googleusercontent.com/-sqFL2x7zCbg/UQbCdJCYKmI/AAAAAAAAA1o/fqv9W3wCBpg/h120/New+Bitmap+Image+%284%29.bmp" height="60px" width="60px" />Subscribe us on youtube</a></div>
<div class="abcde"><a href="http://feeds.feedburner.com/FullEntertainmentDos" target="_blank"><img src="https://lh3.googleusercontent.com/-2MBsebNDVAA/UQbCdjKCfcI/AAAAAAAAA1w/7-VutRHJs0A/h120/New+Bitmap+Image+%285%29.bmp" height="60px" width="60px" />Subscribe to blog</a>...
</div>

 4, Now change the links which written in red color. i.e, www.twitter.com/Rockingax33l. change it to www.twitter.com/yourtwitterid

5, Finish >> done >> done dna done!!!!!

Enjoy!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!