20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

Social Media Sliding Hover Effect Share Widget

Social Media Sliding Hover Effect Share Widget for blogger blogspot,rss,facebook,twitter,google plus hover effect sharing profile button icon for website blog with css and html
Social Media Sliding Hover Effect Share Widget
In this tutorial i'm going to explain how to add Social Media Network Profile Buttons Share with Rss Feed Sharing on Social media widget for your blogger account,it have Faccebook,Rss Feed and Twitter Gadget.Its Look very attractive and unique because this social media sharing gadget have a very smooth Hover effect which give awesome look to your blog or website.For this i'm using Pure CSS and HTML,Very easy to add,just follow the step mentioned below.





DEMO


1. Log in to blogger account
2. Now select "Layout"
3. Click Add Gadget and select 'HTML/Javascript'
4. Paste below code
<style>
/*--------Social Sharing Widget by bloggersstand.blogspot.com ------*/
.socialsharing a {
display:block;
height:50px;width:50px;padding:0 4px;float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmYDpAjMMaeRW1Sqex9YAzQbioE1p12jNhxW2ZKyFiUMNQDTBbOafINDvy8wUdZ50evwiQYLPGmlVrzHstxc-vMhuC4HPgfrNQl49pNDoDBbSi4ecfy1G5dQmObLjKdf3Eu5LDGxhmvqw/s1600/Sharing+buttons.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;
}
.socialsharing a.googleplus {
background-position: 0px -58px;
}
.socialsharing a.googleplus:hover {
background-position: 0px 0px;
}
.socialsharing a.twitter {
background-position: 0px -290px;
}
.socialsharing a.twitter:hover {
background-position: 0px -232px;
}
.socialsharing a.facebook {
background-position: 0px -406px;
}
.socialsharing a.facebook:hover {
background-position: 0px -348px;
}
.socialsharing a.rss {
background-position: 0px -174px;
}
.socialsharing a.rss:hover {
background-position: 0px -116px;
}
</style>
<br />
<div class="socialsharing">
<a class="rss" href="RSS Link" rel="external nofollow" target="_blank"></a>
<a class="googleplus" href="Google profile link" rel="external nofollow" target="_blank"></a>
<a class="facebook" href="Facebook page Link" rel="external nofollow" target="_blank"></a>
<a class="twitter" href="Twitter Link" rel="external nofollow" target="_blank"></a>
</div>

  • Change Page Link with your Facebook link.
  • Change Twitter Link with your Twitter link.
  • Change Rss Link with your Feed link.
  • Change profile link with your google plus link.
5. Now save your 'HTML/Javascript'.. Done !

Post a Comment