Social icons Widget with Exclusive effect 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.
 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>
 
CSS 

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

Done, Enjoy
Liked Share It