The Social Bug

A easy-to-add-on that will allow you to share your social links easily.

by transparent

HTML

<div class="centered">
    <h1>The <br/>Social<br/> Bug</h1><br/><h2>Using only one image!</h2>      
    <ul id="connect">
        <p>'The Social Bug' is a little thing that you can add on to your site to have quick
            and easy social network sharing.</p><br/>             
        <li id="facebook" class="social-icon"><a href="http://www.facebook.com/" target="_blank" title="Facebook">Facebook</a></li>
    <li id="twitter" class="social-icon"><a href="http://www.twitter.com/" target="_blank" title="Twitter">Twitter</a></li>
                <li id="googleplus" class="social-icon"><a href="https://plus.google.com/" target="_blank" rel="author" title="Google+">Google+</a></li>
        <li id="blogger" class="social-icon"><a href="http://www.blogger.com" target="_blank" rel="author" title="Blogger">Blogger</a></li>
        <p></p><br/>        
    <p>Currently under construction for easier adding. Feel free to add the blunt code of it as
        long as you give credit. </p>
</ul>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Rammetto+One);
#connect{
position: relative;
width: 220px;
float: right;

}
ul {
list-style: none;
}
#connect li.social-icon {
position: relative;
width: 32px;
height: 32px;
display: inline-block;
}
.social-icon a {
position: relative;
width: 35px;
height: 32px;
background: url('http://img151.imageshack.us/img151/1972/iconssocial.png') no-repeat top left;
text-indent: -9999px;
cursor: pointer;
float: left;
-webkit-transition: background 0.2s ease-out;
-moz-transition: background 0.2s ease-out;
-o-transition: background 0.2s ease-out;
transition: background 0.2s ease-out;
}
.social-icon#blogger a {
background-position: 0px 0px;
}
.social-icon#blogger a:hover {
background-position: 0px -32px;
}
.social-icon#twitter a {
background-position: -35px 0px;
}
.social-icon#twitter a:hover {
background-position: -35px -32px;
}
.social-icon#facebook a {
background-position: -70px 0px;
}
.social-icon#facebook a:hover {
background-position: -70px -32px;
}
.social-icon#googleplus a {
background-position: -105px 0px;
}
.social-icon#googleplus a:hover {
background-position: -105px -32px;
}
/*                           */
/*Website part*/
  div.centered{
    display:block;
    position:absolute;
    top:30%;
    left:25%;
    width:350px;
    background-color:#EFEFEF;
    border-top-left-radius: 30px 10px;
    border-top-right-radius: 30px 10px;
    border-bottom-left-radius: 30px 10px;
    border-bottom-right-radius: 30px 10px;
    padding-left:20%;
    padding-top:7px;
    min-height:300px;
  }
div.centered h1{
    position:absolute;
    left:5%;    
font-family: 'Rammetto One', cursive;
    text-decoration:bold;
    font-size:50px;

}
div.centered h2{
    position:absolute;
    left:5%;
    bottom:5%;        
    text-decoration:bold;
    font-size:25px;

}