Sliding Social Sharing Widget For Blogger

Oleh Unknown

15 Kasım 2012 Perşembe

Bagikan :

Tweet

In this post, im  gonna explain  how to add  nice social sharing widget for your blog.It has a nice
hover effect. For this  post  im  using pure  CSS and  HTML  languages.You  can  link  your  Rss,
Facebook,Twitter nad Google plus.You can add it with easy  steps. get  my other  social  media
widgets by clicking here

Demo

1. Log in to blogger account and Click drop down.

2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below one of below code.

<style>
/*--------Social Sharing Widget ------*/
.socialsharing a {
display:block;
height:50px;width:50px;padding:0 4px;float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMKzo2e8MO_2LOJZegR2dmda_IKuUZbjp_8Prw0R0EtQX_RNfrEsomBIKEzQMelDMdZ61k1fCHteI0Dew7_WC7S6cuXvJAv_fnVeU-9jZP5pbhMThtiYx7yQka-DSO7bcOat6UtiT5WFM/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>

Replace with your URLs where i highligh with red color text.

7. Now save your HTML/Javascript'.

    You are done...

Tag : CSS, Facebook, Rss, Social Media, Twitter