Slide On Hover Social Subscription Widget For Blogger & WordPress

Websites require social subscription widgets. Now-a-days all internet users has blog or websites invariably. So, need for social subscription widget has increased to a greater extent. People are looking for newer social subscription widget for attracting their visitors. So, here I have provided a beautiful social subscription widget that can be used in any Blogger or WordPress websites.

HOW TO INSTALL:

It is a html widget. So, all you need is just open a new html widget and copy-paste the following code in the box!
FOR BLOGGER: Go to Blogger.com>Layout>Add a Gadget>HTML/Javascript>Copy-Paste the code given below>Save.
FOR WORDPRESS: Go to Dashboard>Widget>Drag a Text widget>Copy-Paste the given code>Save.
Make sure to change the links of social websites and put your own links in those place.
WIDGET CODE:

<style>#Tech-tips247-sociable ul{margin:5px 0 0 0}
#Tech-tips247-sociable li{float:left;background:none!important;margin:0 0 0 0;padding:0 0 0 0;border-bottom:none}
#Tech-tips247-sociable a{-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;background:url(http://Tech-tips247.files.wordpress.com/2013/05/Tech-tips247-social-subscription.png) no-repeat;display:block;height:32px;margin-left:5px;text-indent:-999em;width:32px}
#Tech-tips247-sociable a:hover{background-position:0 -32px}
#Tech-tips247-sociable li.twitter a{background-position:-32px 0}
#Tech-tips247-sociable li.twitter a:hover{background-position:-32px -32px}
#Tech-tips247-sociable li.google_plus a{background-position:-64px 0}
#Tech-tips247-sociable li.google_plus a:hover{background-position:-64px -32px}
#Tech-tips247-sociable li.linkedin a{background-position:-96px 0}
#Tech-tips247-sociable li.linkedin a:hover{background-position:-96px -32px}
#Tech-tips247-sociable li.dribbble a{background-position:-128px 0}
#Tech-tips247-sociable li.dribbble a:hover{background-position:-128px -32px}
#Tech-tips247-sociable li.stumbleupon a{background-position:-160px 0}
#Tech-tips247-sociable li.stumbleupon a:hover{background-position:-160px -32px}
#Tech-tips247-sociable li.pinterest a{background-position:-192px 0}
#Tech-tips247-sociable li.pinterest a:hover{background-position:-192px -32px}
#Tech-tips247-sociable li.youtube a{background-position:-224px 0}
#Tech-tips247a-sociable li.youtube a:hover{background-position:-224px -32px}
#Tech-tips247-sociable li.email a{background-position:-256px 0}
#Tech-tips247-sociable li.email a:hover{background-position:-256px -32px}
#Tech-tips247-sociable li.rss_feed a{background-position:-288px 0}
#Tech-tips247-sociable li.rss_feed a:hover{background-position:-288px -32px}.align-ctr{float:center}</style>
<center>
<div id=”Tech-tips247-sociable”>
<ul>
<li class=”facebook”><a title=”Like us on Facebook” href=”http://facebook.com/Tech-tips247” target=”_blank” rel=”nofollow”>Like us on Facebook</a></li>
<li class=”twitter”><a title=”Follow me on Twitter” href=”https://twitter.com/Tech-tips247” target=”_blank” rel=”nofollow”>Follow me on Twitter</a></li>
<li class=”google_plus”><a title=”Add me to your Circles” href=”http://plus.google.com/102031317195738605259?rel=author” target=”_blank” rel=”nofollow”>Add me to your Circles</a></li>
<li class=”youtube”><a title=”Watch me on YouTube” href=”https://www.youtube.com/Tech-tips247” target=”_blank” rel=”nofollow”>Watch me on YouTube</a></li>
<li class=”linkedin”><a title=”Follow me on Linkedin” href=”http://bd.linkedin.com/pub/Tech-tips247/22/6a1/938″ target=”_blank” rel=”nofollow”>Follow me on Linkedin</a></li>
<li class=”rss_feed”><a title=”RSS Feed” href=”http://feeds.feedburner.com/Tech-tips247” target=”_blank” rel=”nofollow”>RSS Feed</a></li>
</ul></div></center>

Thank you for reading this post.