Add spinning sharing icons to your blog
Add this beautiful spinning icons to your blog. They will give a nice touch to your blog.
1) Go to Blogger Dashboard > Design > Page/Edit Layout.
2) Add a Gadget > HTML/JavaScript.
3) Copy the code below and paste it into the window.
<html>
<style>
.spinning_icons a{
width:36px;
height:36px;
display:inline-block;
text-indent:-9999em;
background-position:0 0;
background-repeat:no-repeat;
z-index:2000;
overflow:hidden;
}
.spinning_icons a:hover{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transition: transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
}
.twitter{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHCC-jg_DYTVMLQ10_GGDK9ShnDAtaAHVTXlCbmnClrd6Tmh_MI3hAxi-pywUYjL1UvDb4NX_NnieKo1RH-Vqi3nBBnUN7r0ulYzU_yCwitRVsM1LKztuCwxQLKjOdP7ViJZqGhD7k9PY/s0/twitter.png'); }
.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY5gnw9PcO-xqWT5BNv7h0uRauO3n413qJ4QnTKsr6v1nyCcb0Y94Nhj5QSpluahrCcWeyUpnjlRRqfhn0vm8V_Cpu08X3ZZtqyIQMt9z1TLVF-iVVDMoDnFYVDfabioty04rbSTi41lQ/s0/facebook.png'); }
.linkedin{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaZftxGpaGz7zdWrNBj3U8Nrpa2ovrWac6HeHXMvT4-J66ar-U1h5s0J0Ywv0X1rvQwczDCeqdp474IhX5WFyKeoceQyPmgd_TsTdBcPgjFa4KzwhnaYpn5wLJT56MSGT7cQWnbDkwKxI/s0/linkedin.png'); }
.rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL3OakbYsAROUbdIdMN91JegV8zWZkBNyZdYmvgxQxRMjgRDvlYC7B2CGYbyO-JprG_hlkip_Q90QZuYUv1R3Aklm2GRyIwUYzNPIovnotYlNzpRZCsiy1GQ9oGatVlpXF4QGVS5cFd08/s0/rss.png'); }
.youtube{ background:url('https://lh6.googleusercontent.com/-EjnvqvxdSIQ/T40l3XSfhlI/AAAAAAAAB9s/4VnPEZgDXSQ/s32/YouTube.png'); }
.googleplus{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjot2cTxBOxUDCX2BcSwMmFk3oAWtpvVJ6MWSmfDNUFKnkUJf1hBecd2sw5mIb7JAGiTidtm_yyV3DG46utqISN1OrXtBdgvCZJbMzuij5MrqLdO6huOLJl0_Pyo34VXGTQg_Z6-ZQwVCI/s0/gplus.png.png'); }
.mixsocial{ background:url('https://lh6.googleusercontent.com/-xcHvGi2TpZk/T6jP9vrvTMI/AAAAAAAACGg/7mFW9zJeCic/s32/myspace.png'); }
</style>
<body>
<center>
<div class="spinning_icons">
<a href="Your-Twitte-url" class="twitter" title="twitter">Twitter</a>
<a href="Your-Facebookpage-url" class="facebook" title="facebook">Facebook</a>
<a href="Your-Linkedinpage-Id" class="linkedin" title="linkedin">Linkedin</a>
<a href="Your-Googleplus-url" class="googleplus" title="Google Plus">Google Plus</a>
<a href="Your-Rssfeed-url" class="rss" title="rss">RSS</a>
<a href="Your-YouTubechannel-url" class="youtube" title="youtube">YouTube</a>
<a href="Your-othersocial-url" class="mixsocial" title="Other Social">Social</a>
</div>
</center>
</body>
</html>
4) Replace the bold text by your web address.
5) Save it and you done.
0 comments: