Social Icons Widget With Hover Effect for Blogger

People have different ways of structuring how an icon should exist in the markup. In this tutorial, the icons actually link to somewhere else, so I'll be using the a tag to house the icons. For presentational icon markup (like icons before headings and such), I've seen a lot of people use the i tag. Even though it's not semantic, it is very performant as it's a one-lettered tag. For this tutorial, we're going to use icons that link elsewhere, because links are associated with hover states. The most common set of icons around the web that act as familiar links are social icons. 

Facebook

Twitter

Google plus

Now lets start this tutorial. Before starting this tutorial take a backup of your template.
Now Go to Blogger Dashboard > Template > Edit HTML and past the below CSS Code before </style>

 .icon {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  margin: 4px;
  width: 92px;
  height: 96px;
  font-size: 0;
  text-indent: -9999px;
  background-color: #404040;
}
.icon-border {
  position: relative;
}
.icon-border::before,
.icon-border::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: &quot;&quot;;
}
.icon-border::before {
  z-index: 1;
  -webkit-transition: box-shadow 0.3s;
          transition: box-shadow 0.3s;
}
.icon-border::after {
  z-index: 2;
  background: url(&quot;http://i.imgur.com/gOZiqfy.png&quot;);
  background-image: url(&quot;http://callmenick.com/_development/icons-css3-transitions/img/icons4.svg&quot;), none;
}
/* facebook */
.icon-border.facebook::before {
  box-shadow: inset 0 0 0 48px #3b5998;
}
.icon-border.facebook:hover::before {
  box-shadow: inset 0 0 0 4px #3b5998;
}
.icon-border.facebook::after {
  background-position: 0 0;
}
/* twitter */
.icon-border.twitter::before {
  box-shadow: inset 0 0 0 48px #4099ff;
}
.icon-border.twitter:hover::before {
  box-shadow: inset 0 0 0 4px #4099ff;
}
.icon-border.twitter::after {
  background-position: -96px 0;
}
/* google plus */
.icon-border.googleplus::before {
  box-shadow: inset 0 0 0 48px #d34836;
}
.icon-border.googleplus:hover::before {
  box-shadow: inset 0 0 0 4px #d34836;
}
.icon-border.googleplus::after {
  background-position: -192px 0;
}

Now Save Template
After that, Go to Layout>Add a gadget>HTML/Javascript past below code and edit all # tag with your social links.

HTML

<a href="#" class="icon icon-border facebook">facebook</a>
<a href="#" class="icon icon-border twitter">twitter</a>
<a href="#" class="icon icon-border googleplus">google+</a>

Save the Widget. That's it.