Beautiful On Hover Social Sharing Widget For Blogger Blog Or Website

 

This beautiful CSS3 social sharing widget with on hover effect will enable your blog attract visitors.This widget will allow your readers share your blog or Wordpress site on different social media networking sites like Facebook,Google+,Twitter,Pinterest,Youtube,LinkedIn etc.This widget will give a professional look to your blog.In case if you don't require a particular social networking site in the widget then in the below code you can remove the code lines of that particular social networking site from the highlighted green text.

DEMO

How To Add Social Sharing Widget in Blogger Blog

Go To Blogger > Layout>Select HTML/JavaScript widget. Paste the code below inside it .


<style type="text/css"> #tgbbg {width: 260px;margin: 10px 20px;padding: 0;} #tgbbg li {cursor: pointer;height: 48px;position: relative;list-style-type: none; }
#tgbbg .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI-NUmeeXqMiSuYdj-RQiWR_u0h2Vjq0N741BBcjlTnfnYLd8Bj-xL7uFHxNObBW_UQBxXjSeCmpQzSxdTUS4KGFiLYn2DM2QmR5Eof_ucRk1pZWCq8hVqDET7HufgxliM8ATXmd3drl0d/s1600/tgbicons.png') 0 0 no-repeat; background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block; color: #141414;float:none;height: 48px;line-height: 48px; margin: 5px 0;position: relative;text-align: left;text-indent: 90px; text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5; -webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out; -moz-transition: width .25s ease-in-out, background-color .25s ease-in-out; -o-transition: width .25s ease-in-out, background-color .25s ease-in-out; transition: width .25s ease-in-out, background-color .25s ease-in-out; -webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; -moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px; -o-box-shadow: rgba(0,0,0, .28) 0 2px 3px; box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; text-decoration: none;} #tgbbg span:hover {visibility: hidden;} #tgbbg span {display: block;top: 15px;position: absolute;left: 90px;} #tgbbg .icon {color: #fafafa;overflow: hidden;}

#tgbbg .fb {background-color: rgba(45,118,185, .42);background-position: 0 -382px;}
#tgbbg .twit {background-color: rgba(0, 161, 223, .42); background-position: 0 -430px;}
#tgbbg .google {background-color: rgba(167, 0, 0, .42); background-position: 0 -478px;}
#tgbbg .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}
#tgbbg .linked {background-color: rgba(0, 87, 114, .42); background-position: 0 -574px;}
#tgbbg .deviant {background-color: rgba(76, 122, 74, .42); background-position: 0 -622px;}
#tgbbg .ytube {background-color: rgba(170, 0, 0, .42); background-position: 0 -670px;}
#tgbbg .rss {background-color: rgba(255,109, 0, .42); background-position: 0 -718px;}

#tgbbg li:hover .icon {width: 250px; } #tgbbg li:hover .icon {background-color: #d91e76; }
#tgbbg li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}
#tgbbg li:hover .twit {background-color: #00A1DF; background-position: 0 -46px; }
#tgbbg li:hover .google {background-color: #A70000;background-position: 0 -94px;}
#tgbbg li:hover .pint {background-color: #C00;background-position: 0 -142px; }
#tgbbg li:hover .linked {background-color: #005772;background-position: 0 -190px;}
#tgbbg li:hover .deviant {background-color: #4C7A4A;background-position: 0 -238px;}
#tgbbg li:hover .ytube {background-color: #A00;background-position: 0 -286px; }
#tgbbg li:hover .rss {background-color: #EC5601;background-position: 0 -334px; }

#tgbbg .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;} </style> <style type="text/css">
#tgbbg {width: 260px;margin: 10px 20px;padding: 0;} #tgbbg li {cursor: pointer;height: 48px;position: relative;list-style-type: none; } #tgbbg .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI-NUmeeXqMiSuYdj-RQiWR_u0h2Vjq0N741BBcjlTnfnYLd8Bj-xL7uFHxNObBW_UQBxXjSeCmpQzSxdTUS4KGFiLYn2DM2QmR5Eof_ucRk1pZWCq8hVqDET7HufgxliM8ATXmd3drl0d/s1600/tgbicons.png') 0 0 no-repeat; background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block; color: #141414;float:none;height: 48px;line-height: 48px; margin: 5px 0;position: relative;text-align: left;text-indent: 90px; text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5; -webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out; -moz-transition: width .25s ease-in-out, background-color .25s ease-in-out; -o-transition: width .25s ease-in-out, background-color .25s ease-in-out; transition: width .25s ease-in-out, background-color .25s ease-in-out; -webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; -moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px; -o-box-shadow: rgba(0,0,0, .28) 0 2px 3px; box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; text-decoration: none;} #tgbbg span:hover {visibility: hidden;} #tgbbg span {display: block;top: 15px;position: absolute;left: 90px;} #tgbbg .icon {color: #fafafa;overflow: hidden;}

#tgbbg .fb {background-color: rgba(45,118,185, .42);background-position: 0 -382px;}
#tgbbg .twit {background-color: rgba(0, 161, 223, .42); background-position: 0 -430px;}
#tgbbg .google {background-color: rgba(167, 0, 0, .42); background-position: 0 -478px;}
#tgbbg .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}
#tgbbg .linked {background-color: rgba(0, 87, 114, .42); background-position: 0 -574px;}
#tgbbg .deviant {background-color: rgba(76, 122, 74, .42); background-position: 0 -622px;}
#tgbbg .ytube {background-color: rgba(170, 0, 0, .42); background-position: 0 -670px;}
#tgbbg .rss {background-color: rgba(255,109, 0, .42); background-position: 0 -718px;}

#tgbbg li:hover .icon {width: 250px; } #tgbbg li:hover .icon {background-color: #d91e76; }

#tgbbg li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}
#tgbbg li:hover .twit {background-color: #00A1DF; background-position: 0 -46px; }
#tgbbg li:hover .google {background-color: #A70000;background-position: 0 -94px;}
#tgbbg li:hover .pint {background-color: #C00;background-position: 0 -142px; }
#tgbbg li:hover .linked {background-color: #005772;background-position: 0 -190px;}
#tgbbg li:hover .deviant {background-color: #4C7A4A;background-position: 0 -238px;}
#tgbbg li:hover .ytube {background-color: #A00;background-position: 0 -286px; }
#tgbbg li:hover .rss {background-color: #EC5601;background-position: 0 -334px; }

#tgbbg .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;} </style> <ul id="tgbbg">

<li >< a href="Facebook URL" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span></li>
<li >< a href="Twitter URL" class="icon twit" > Follow us on Twitter</a><span>Follow us on Twitter</span></li>
<li ><a href="Google+ URL" class="icon google" > Follow us on Google+</a><span>Follow us on Google+</span></li>
<li >< a href="Pinterest URL" class="icon pint">Follow us on Pinterest</a><span>Follow us on Pinterest</span></li>
<li >< a href="LinkedIn URL" class="icon linked" >Follow us on LinkedIn</a><span>Follow us on LinkedIn</span></li>
<li >< a href="Deviant Art URL" class="icon deviant" >Follow us on DeviantArt</a><span>Follow us on DeviantArt</span></li>
<li >< a href="Youtube URL" class="icon ytube">Follow us on Youtube</a><span>Follow us on Youtube</span></li>
<li >< a href="RSS/Feed" class="icon rss" > Subscribe via RSS</a><span>Subscribe via RSS</span></li> </ul> </div>


Note: In the above highlighted red text enter your social networking URLs.

Click on save and you are done.