Follow us

Design

by erick

HTML

<link href='http://fonts.googleapis.com/css?family=Wendy+One' rel='stylesheet' type='text/css'>

<div class="footcol4 curvyIgnore">
				<div class="footcol4inner group curvyIgnore">				
			<!-- Social networking icons -->
<div id="social-networking-icons">
  <span id="social-networking-icons-text">Follow us:</span>
  <ul id="social-networking-icons-list">
    <li class="facebook-icon social-networking-icon"><a href="http://www.facebook.com/pages/Magazinescom/8356493537" target="_blank"></a></li>
    <li class="twitter-icon social-networking-icon"><a href="http://twitter.com/#!/magazines" target="_blank"></a></li>
    <li class="youtube-icon social-networking-icon"><a href="http://www.youtube.com/magazinescom" target="_blank"></a></li>
    <li class="googleplus-icon social-networking-icon"><a href="http://plus.google.com/108806469202761698216?prsrc=3" target="_blank"></a></li>
    <li class="linkedin-icon social-networking-icon"><a href="http://www.linkedin.com/company/magazines.com" target="_blank"></a></li>
  </ul>
</div>

<!-- End social networking icons -->
				</div>
			</div>

CSS

<style type="text/css" media="screen">
  #social-networking-icons{
    height: 40px;
    margin-top: 22px;
    margin-bottom: 4px;
  }
  #social-networking-icons-text{
    float: left;
    font-size: 20px;
    line-height: 40px;
    margin-right: 5px;
  }
  #social-networking-icons ul li{
      float: left;
	  list-style: none;
  }
  .social-networking-icon a{
     width:40px;
     height:40px;
     background: url(https://lh5.googleusercontent.com/-vqodA9AWAQA/USYv0wiXCLI/AAAAAAAAAgY/dD6MCvcGoFc/h120/social_networking.png);
     display: block;
     height: 40px;
  }
  .facebook-icon a{
     background-position: 0px 0px;
  }
  .facebook-icon a:hover{
     background-position: 0px 40px;
  }
  .twitter-icon a{
     background-position: 168px 0px;
  }
  .twitter-icon a:hover{
     background-position: 168px 40px;
  }
  .youtube-icon a{
     background-position: 127px 0px;
  }
  .youtube-icon a:hover{
     background-position: 127px 40px;
  }
  .googleplus-icon a{
     background-position: 85px 0px;
  }
  .googleplus-icon a:hover{
     background-position: 85px 40px;
  }
  .linkedin-icon a{
     background-position: 252px 0px;
  }
  .linkedin-icon a:hover{
     background-position: 252px 40px;
  }

</style>