Nicer Social icons Widget with hover effect for Blogger

Social icons are most important part of any blog now-a-days. We see any where any website and any apps, they promote their social media links with attractive social icons. In this tutorial, we take a look of creating a beautiful and simple social icons widget with hover effect for Blogspot Blogger. I already named this widget: Nicer Social Icons Widget with hover effect for Blogger.

Also Read: Flat Social Share Button for Blogger

This is an easiest way to promote your social media links with your targeted users. If you make widget in top with these social icons, then a user see these social icons easily. If you can connect your targeted users with your social links, like: Facebook, Twitter, Google plus then you should easily increase your visitors.

Nicer Social icons widget is a simple blogger gadget to show your social media links in sidebar. The icons are Facebook, google plus and Twitter widget.

View Result

Marking Up Nicer Icons

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. I'll use the following 5 so that we can see different icons in action for each of the demos:

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.

<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>

Reference: http://callmenick.com/post/nicer-icon-hover-effects-with-css3-transitions