New Blue Square Social Media Icon Widget For Blogger 2013

Live Demo

Related Recommended Reading : Social Sharing Widget

How to implement this code on blogger :

1. Log in to blogger  Design > Page Element.

2. Click Add Gadget and select 'HTML/Javascript'

3. Now Paste Below code.

HTML and CSS Style 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/digitalhubinc"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoIkVpkgnRVUtAXXJkyD_rTXjxPIz1_T8BuSR8IXuDR_u3uEyjkwgdLL8AWw8DKLaVhXxce1Ey_gBLA1mDeU1SmDGXYG27viiONPHiql6PVuWEvhcQzitUTaVz0crQPny1tlerXbVxPqw4/h120/digitalhubinc-facebook.png" /></a>

<a class="social-icons" href="https://twitter.com/digitalhubinc"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7jIUEDnSFaddb4YCjM_zk5Uyf6j15LDTjzSj_eO-Aya_Yp5OfGNMjlolTRp0xMTQOhQdBs0jmswfHLfPutWPkzWBzUfhqWvYQIKulk6EP7PS_hLUF0QOIqEX9EDYzPH9JQAl9jUGNRU-m/h120/digitalhubinc-twitter.png" /></a>

<a class="social-icons" href="https://plus.google.com/userId"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhmyEb_sOs6VyoMAsdgn19o6lCesZ2IyEQ22S2sOkQSi80_nOI0D6D59he2n8q2ZfwkLLB400nACDdC4xm9Lp-BHq34p4mtnXrkXn4ohlKp6CQ688kZmdBfKFJ3DogoZ99mX9aH7VNWiHW/h120/digitalhubinc-Googleplus.png" /></a>

<a class="social-icons" href="http://www.feedburner.com/digitalhubinc"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYC0qACdvTeK3IYBC8XBoasRVAlFa8Ra6G5Q53rwf2_mBBn_9r-MSATEzOyL4x9U8IEWfc7zBRrQ7Fm5yLlVk43dYLoJzjZvWvEmFvkvEusPhQ7-I5FIh7l5oYkmipKsqt9sb7c5-eAMLV/h120/digitalhubinc-Rss.png" /></a>

<a class="social-icons" href="http://pinterest.com/digitalhubinc"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitl96Aau2A8b50Jlqle6GnxtY59AXijtxlo8aOkaAJm4297MsZSgWpyxa_fo7rJh_I9xUUnpbwzqvz5209FRDXAaNJWo5eaHdQrVmmjbPkGc89Ed1hxtthuif_ITpkRFPuue6MqVL_LF0S/h120/digitalhubinc-pinterest.png" /></a>

After paste above code :

• Replace digitalhubinc with your facebook username
• Replace digitalhubinc with your  twitter Username
• Replace userId with Googleplus
• Replace digitalhubinc with feedburner username
• Replace digitalhubinc with pinterest username

4. Now save your 'HTML/Javascript'.

End.

[widget created by : Bloggertrix]