Thursday, November 15, 2012

Sliding Social Sharing Widget For Blogger

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

Sharing+buttons+widget
Demo

1. Log in to blogger account and Click drop down.
blog-post-option
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/AVvXsEhgtq1JrUiAdsOzxeENCPTh6yER3ZtjMtgqmJMkY5evD89s8Nabh2SR7nFSXU95L9JRwu5pZBkKYKyIf8u72Yr8hRPyOgVOu6Qmt7vXkywkRleUbA5N4NRycaWSVPQoTDme5WcsfDtwwk0/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...

9 comments:

  1. This one is good for slide sharing, thank you for the step by step guide.

    ReplyDelete
  2. Brilliant widget dude,,can i have a favor,,can you give me a tutorials on how to make animated in ADVERTISE HERE..Same yours..

    Thanks
    BLOGGER HEROE,Tips and Tricks For Blogger,widgets,Templates

    ReplyDelete
  3. bro i want know how to use sliding above for html code

    in up down

    ReplyDelete
  4. cn you give us atleast a demo how does this widget looks????

    ReplyDelete
  5. Thank you! The result is cool!http://search-for-earning-ralex999.blogspot.ru/

    ReplyDelete
  6. already added this cool widget on my blog but then I would like to add a few more buttons like YouTube, Pintest...can you pls assist me to do so?

    http://immtherandom-ista.blogspot.com

    ReplyDelete