A simple social side block to be used with your favorite portal left or right block. Social colors appear on hover. Very cool and very eye catchy. I downloaded the icons from IcoMoon app at 28 pixels in height with #ffffff color. No sprite images are used here since i wanted to put together something quick, only .png images are used.

demo

I forked this from Google Play Store Menu - CodePen and grabbed the icons from IcoMoon App - Icon Font Generator

Open your theme's css/index.css and at the very end, add:

#social {
  background: rgba(245, 245, 245, 0.95);
  width: 300px;
}
#social ul {
  padding: 0;
  margin: 0;
}
#social ul li {
  list-style: none;
  height: 50px;
}
#social ul li:hover {
  width: 300px;
  height: 50px;
}

#social ul li a {
  position: absolute;
  width: 300px;
  height: 50px;
  text-decoration: none;
  color: #555;
  padding: 15px 0 0 60px;
}
#social ul li a:hover {
  color: #fff;
}

.facebook {
  background: #3b5998;
  width: 50px;
  height: 50px;
  margin-bottom: px;
}

.twitter {
  background: #00aced;
  width: 50px;
  height: 50px;
  margin-bottom: px;
}

.google-plus {
  background: #dd4b39;
  width: 50px;
  height: 50px;
  margin-bottom: px;
}

.contact {
  background: #658092;
  width: 50px;
  height: 50px;
  margin-bottom: px;
}

.rss {
  background: #ff6600;
  width: 50px;
  height: 50px;
  margin-bottom: px;
}

.facebook-icon {
  position: absolute;
  margin-left: 10px;
  padding-top: 12px;
}
.facebook-icon:before {
  width: 50px;
  height: 50px;
  margin-right: 30px;
  content: url("../images/facebook.png");
}

.twitter-icon {
  position: absolute;
  margin-left: 10px;
  padding-top: 12px;
}
.twitter-icon:before {
  width: 50px;
  height: 50px;
  margin-right: 30px;
  content: url("../images/twitter.png");
}

.google-plus-icon {
  position: absolute;
  margin-left: 10px;
  padding-top: 12px;
}
.google-plus-icon:before {
  width: 50px;
  height: 50px;
  margin-right: 30px;
  content: url("../images/googleplus.png");
}

.contact-icon {
  position: absolute;
  margin-left: 10px;
  padding-top: 12px;
}
.contact-icon:before {
  width: 50px;
  height: 50px;
  margin-right: 30px;
  content: url("../images/mail.png");
}

.rss-icon {
  position: absolute;
  margin-left: 10px;
  padding-top: 12px;
}
.rss-icon:before {
  width: 50px;
  height: 50px;
  margin-right: 30px;
  content: url("../images/rss.png");
}

Modify the widths according to your portal.


Create an HTML side block, add the following and add your URL's.

<div id="social">
  <ul>
    <li class="facebook"><span class="facebook-icon"></span><a href="#">Facebook</a></li>
    <li class="twitter"><span class="twitter-icon"></span><a href="#">Twitter</a></li>
    <li class="google-plus"><span class="google-plus-icon"></span><a href="#">Google +</a></li>
    <li class="contact"><span class="contact-icon"></span><a href="#">Contact Us</a></li>
    <li class="rss"><span class="rss-icon"></span><a href="#">RSS</a></li>
  </ul>
</div>

Tagged with:

Awesome!