Slide On Hover Social Subscription Widget For Blogger & WordPress

Websites require social subscription widgets. Nowadays all internet users have a blog or websites invariably. So, the need for social subscription widget has increased to a greater extent. People are looking for a 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.

DEMO:

The widget looks like this. You can see that the widget looks pale normally. After mouse hover, it takes the color of social websites. Thus, it attracts the visitors greatly and they can’t help clicking it!

HOW TO INSTALL:

It is an 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 is 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>#sujonhera-sociable ul{margin:5px 0 0 0}
#sujonhera-sociable li{float:left;background:none!important;margin:0 0 0 0;padding:0 0 0 0;border-bottom:none}
#sujonhera-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(https://sujonhera.files.wordpress.com/2013/05/sujonhera-social-subscription.png) no-repeat;display:block;height:32px;margin-left:5px;text-indent:-999em;width:32px}
#sujonhera-sociable a:hover{background-position:0 -32px}
#sujonhera-sociable li.twitter a{background-position:-32px 0}
#sujonhera-sociable li.twitter a:hover{background-position:-32px -32px}
#sujonhera-sociable li.google_plus a{background-position:-64px 0}
#sujonhera-sociable li.google_plus a:hover{background-position:-64px -32px}
#sujonhera-sociable li.linkedin a{background-position:-96px 0}
#sujonhera-sociable li.linkedin a:hover{background-position:-96px -32px}
#sujonhera-sociable li.dribbble a{background-position:-128px 0}
#sujonhera-sociable li.dribbble a:hover{background-position:-128px -32px}
#sujonhera-sociable li.stumbleupon a{background-position:-160px 0}
#sujonhera-sociable li.stumbleupon a:hover{background-position:-160px -32px}
#sujonhera-sociable li.pinterest a{background-position:-192px 0}
#sujonhera-sociable li.pinterest a:hover{background-position:-192px -32px}
#sujonhera-sociable li.youtube a{background-position:-224px 0}
#sujonhera-sociable li.youtube a:hover{background-position:-224px -32px}
#sujonhera-sociable li.email a{background-position:-256px 0}
#sujonhera-sociable li.email a:hover{background-position:-256px -32px}
#sujonhera-sociable li.rss_feed a{background-position:-288px 0}
#sujonhera-sociable li.rss_feed a:hover{background-position:-288px -32px}.align-ctr{float:center}</style>
<center>
<div id=”sujonhera-sociable”>
<ul>
<li class=”facebook”><a title=”Like us on Facebook” href=”http://facebook.com/SUJONHERA” target=”_blank” rel=”nofollow”>Like us on Facebook</a></li>
<li class=”twitter”><a title=”Follow me on Twitter” href=”https://twitter.com/SUJONHERA” 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/SUJONHERA” 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/sujon-paul/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/sujonhera” target=”_blank” rel=”nofollow”>RSS Feed</a></li>
</ul></div></center>

Thank you for reading this post.

Leave a Comment