Fancy Sliding/Animated Social Widget

Demo:

Step To Add Fancy Sliding Follow Me Button:

• Go to Blogger Dashboard.
• Go to Layout.
• Click on Add a Gadget >> HTML/Javascript.
• Paste the below code there.

<div class="social-wrap">

<ul>

<li><a class="facebook" href="http://facebook.com/allin1-web" target="_blank">Facebook</a></li>
<li><a class="twitter" href="http://twitter.com/allin1web" target="_blank">Twitter</a></li>

<li><a class="google-p" href="###" target="_blank">Google plus</a></li>

<li><a class="rss" href="http://feeds.feedburner.com/allin1-web" target="_blank">Rss</a></li>

</ul>

</div>

<style>

.social-wrap ul li {

list-style: none;

border-bottom: none;

}

.social-wrap li a {

margin: 5px 5px 0px 5px;

padding: 0px 0px 0px 0px;

width: 59px;

height: 59px;

float: left;

text-indent: -99999px;

border: solid 1px #222121;

border-radius:5px;

-webkit-transition: All 0.3s ease-out;

-moz-transition: All 0.3s ease-out;

-o-transition: All 0.3s ease-out;

}

.social-wrap li a.facebook {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI87Z3bCD1gc_85dds_79JxlsoGL5wNziKYdyUnOm8SL0jYPgl0FdPKoJzv4Ba2bO0kZb9QiPosrnCPCc9-V7Zn5QibfYhmg17nQdYZZ9GHGYfpZbazt8kGgI_nxGD5qHmcep_l4hcYg/s1600/facebook.png) no-repeat -0px -88px;

}

.social-wrap li a.facebook:hover {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI87Z3bCD1gc_85dds_79JxlsoGL5wNziKYdyUnOm8SL0jYPgl0FdPKoJzv4Ba2bO0kZb9QiPosrnCPCc9-V7Zn5QibfYhmg17nQdYZZ9GHGYfpZbazt8kGgI_nxGD5qHmcep_l4hcYg/s1600/facebook.png) no-repeat -0px -0px;

}

.social-wrap li a.twitter {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH3s4kMfPTnIYyXzdRoRGHi6FIXUvBKMGn2VJj_yhrDQEmD-xMzEqscfFShUlWzI6Evh9fzmntyn1gFoP-Qiox_xL703xt42tuB2dWgF3jAEuOuyQSYmnj_Nj6NZ5mW_7IruKy3dIxgQ/s1600/twitter-1.png) no-repeat -0px -88px;

}

.social-wrap li a.twitter:hover {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH3s4kMfPTnIYyXzdRoRGHi6FIXUvBKMGn2VJj_yhrDQEmD-xMzEqscfFShUlWzI6Evh9fzmntyn1gFoP-Qiox_xL703xt42tuB2dWgF3jAEuOuyQSYmnj_Nj6NZ5mW_7IruKy3dIxgQ/s1600/twitter-1.png) no-repeat -0px -0px;

}

.social-wrap li a.google-p {

background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd1VEncqpv29KuW1ouxBoo_3slrchL3oQZ22CjQkNBWIsmyhnmruVVnYTLd8LlbcSao7tp8B45lhriB2qsD3EVXiqY8Kn2g074CV8eURWCBpCdsWtkXZRtXRlOuClmVvXx8ybUotd31w/s1600/google.png) no-repeat -0px -88px;

}

.social-wrap li a.google-p:hover {

background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd1VEncqpv29KuW1ouxBoo_3slrchL3oQZ22CjQkNBWIsmyhnmruVVnYTLd8LlbcSao7tp8B45lhriB2qsD3EVXiqY8Kn2g074CV8eURWCBpCdsWtkXZRtXRlOuClmVvXx8ybUotd31w/s1600/google.png) no-repeat -0px -0px;

}

.social-wrap li a.rss {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUA4aUbw6ky8ieJOlurlQ6oiSXrWQBJaqnJbqB6Yll5A7NinHZYD0DQ-_aNXyKyLESkW1D0fzJhz5mHjbr1pAiQdFX8NOcnxuUhPrrSs-L-J90SEQB-xp2bxu8LhMFXi7MpzYVyTZ-lw/s1600/twitter.png) no-repeat -0px -88px;

}

.social-wrap li a.rss:hover {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUA4aUbw6ky8ieJOlurlQ6oiSXrWQBJaqnJbqB6Yll5A7NinHZYD0DQ-_aNXyKyLESkW1D0fzJhz5mHjbr1pAiQdFX8NOcnxuUhPrrSs-L-J90SEQB-xp2bxu8LhMFXi7MpzYVyTZ-lw/s1600/twitter.png) no-repeat -0px -0px;

}

</style>

• Now, click on Save.

Customization:

Replace all the ### and your respective social URL with your links

Related Articles:

1.Add one Time Pop Up Subscription Widget To your Blogger 
2.Add Subscription Widget Like WordPress

3.Smart Floating/Fixed Social Button

4.Indian Railway PNR Status Widget