Blue Square Social Media Widget For Blogger

In  this post  im  gonna explain how to add blue square social     sharing    buttons  for  your  blog.   This is just widget. you can  add  it to your blog easily. I just using Css  with  HTML.  Check   below demo  link. You can get social media post with similar widgets.

Demo

1. Log in to blogger  Design > Page Element.

2. Click Add Gadget and select 'HTML/Javascript

3.Now Paste Below code.

<style>
/* Social Icons 
----------------------------------------------- */

a.social-icons {
 margin-right: 5px; /*Adjust This Value As Needed*/
height:45px;
width:45px;
}

a.social-icons:hover {
 opacity: .7;
 filter:alpha(opacity=70); /* For IE8 and earlier */
}   height:45px;
width:45px;
</style>

<a class="social-icons" href="https://facebook.com/bloggertrix"><img src="http://2.bp.blogspot.com/-0UOzHUdczG4/USDjuyJCndI/AAAAAAAAAY8/5nN8AcBcvHs/s1600/Bloggertrix-facebook.png" /></a>
<a class="social-icons" href="https://twitter.com/bloggertrix"><img src="http://2.bp.blogspot.com/-H-E4Ll7i2-0/USDjw3bxgVI/AAAAAAAAAZc/a2kMp8rGRVU/s1600/bloggertrix-twitter.png" /></a>
<a class="social-icons" href="https://plus.google.com/userId"><img src="http://3.bp.blogspot.com/--KlnPhT6pRA/USDjvgwOluI/AAAAAAAAAZM/_O8TI0WivQk/s1600/Bloggertrix-Googleplus.png" /></a>
<a class="social-icons" href="http://www.feedburner.com/bloggertrix"><img src="http://2.bp.blogspot.com/-kXhnrJzlA_A/USDju5hXjPI/AAAAAAAAAZA/x6NdMR0JFhQ/s1600/Bloggertrix-Rss.png" /></a>
<a class="social-icons" href="http://pinterest.com/bloggertrix"><img src="http://1.bp.blogspot.com/-iv1pKDx2qxg/USDjwH6dBHI/AAAAAAAAAZU/6aBgMmf8RgY/s1600/Bloggertrix-pinterest.png" /></a>

After paste above code
*Replace bloggertrix with your facebook username
*Replace bloggertrix  with your  twitter Username
*Replace UserId with Googleplus
*Replace bloggertrix with feedburner username
*Replace bloggertrix wit pinterest username

4. Now save your HTML/Javascript'.

    You are done...