Social profile widget is a most demanding thing for a blog because this is a biggest social media weapon to promote your blog through social media. You can cross check this thing when you add a social profile widget on your blog you grow blog readership and followers. Many bloggers are using basic social media widgets but most of new bloggers are unaware of its benefits and but they want to use it for for fun and popularity and showbiz. This unique social profile widget will let you to connect your social media profile to your blog. With this social profile widget your blog readers will reach on your social profile and pages and add you as a friend or subscribe page updates or to follow you. Four major social media platforms Facebook, Google+, Twitter and Linkedin are available in this widget including your blog feed to make feed subscription simpler to various online feed readers.

Attractive Social Profile Widget for Blogger

This widget has unique appearance. A hover effect is added to it, when you roll you mouse arrow over a social media icon all other icons gets fade. You’ll love this social profile widget.

Social Profile Widget Demo

This social profile widget is available in 3 styles. You can choose one as per your like or choice.

1st Widget: Burning Social Profile Gadget

Burning Social Media Buttons

/* Burning Social Profile Gadget by Tech Prevue */
<style type="text/css">
.tps {list-style:none;margin-top:10px;}
.tps li {float:left;background-repeat:no-repeat;display:inline;}
.tps li a {display:block; width:32px; height:32px; position:relative;}
li.fb {background-image:url("//goo.gl/R6wDVf");background-position: 0 0;width:32px;height:32px;}
li.gp {background-image:url("//goo.gl/R6wDVf");background-position: 0 -34px;width:32px;height:32px;}
li.tw {background-image:url("//goo.gl/R6wDVf");background-position: 0 -68px;width:32px;height:32px;}
li.ln {background-image:url("//goo.gl/R6wDVf");background-position: 0 -102px;width:32px;height:32px;}
li.fd {background-image:url("//goo.gl/R6wDVf");background-position: 0 -136px;width:32px;height:32px;}
#tps:hover li { opacity:0.2; }
#tps li {-webkit-transition-property: opacity; -webkit-transition-duration: 500ms; -moz-transition-property: opacity; -moz-transition-duration: 500ms;}
#tps li a strong {opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms;}
#tps li:hover {opacity:1;}
#tps li:hover a strong {opacity:1; top:-10px;}
</style>
<div class="tps" id="tps">
<li class="fb"><a href="https://www.facebook.com/techprevue" target="_new" title="Like Facebook Page"></a></li>
<li class="tw"><a href="http://www.twitter.com/techprevue" target="_new" title="Follow on Twitter"></a></li>
<li class="gp"><a href="https://plus.google.com/103741144523748761550" target="_new" title="Follow on Google+"></a></li>
<li class="ln"><a href="http://www.linkedin.com/in/vinayprajapati" target="_new" title="LinkedIn Professional Network"></a></li>
<li class="fd"><a href="/feeds/posts/default" target="_new" title="Subscribe RSS Feed"></a></li>
</div>

2nd Gadget: Snow White Square Social Profile Gadget

White Social Media Buttons

/* Snow White Square Social Profile Gadget by Tech Prevue */
<style type="text/css">
.tps {list-style:none;margin-top:10px;}
.tps li {float:left;background-repeat:no-repeat;display:inline;}
.tps li a {display:block; width:32px; height:32px; position:relative;}
li.fb {background-image:url("//goo.gl/chaAwq");background-position: 0 0;width:32px;height:32px;}
li.gp {background-image:url("//goo.gl/chaAwq");background-position: 0 -34px;width:32px;height:32px;}
li.tw {background-image:url("//goo.gl/chaAwq");background-position: 0 -68px;width:32px;height:32px;}
li.ln {background-image:url("//goo.gl/chaAwq");background-position: 0 -102px;width:32px;height:32px;}
li.fd {background-image:url("//goo.gl/chaAwq");background-position: 0 -136px;width:32px;height:32px;}
#tps:hover li { opacity:0.2; }
#tps li {-webkit-transition-property: opacity; -webkit-transition-duration: 500ms; -moz-transition-property: opacity; -moz-transition-duration: 500ms;}
#tps li a strong {opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms;}
#tps li:hover {opacity:1;}
#tps li:hover a strong {opacity:1; top:-10px;}
</style>
<div class="tps" id="tps">
<li class="fb"><a href="https://www.facebook.com/techprevue" target="_new" title="Like Facebook Page"></a></li>
<li class="tw"><a href="http://www.twitter.com/techprevue" target="_new" title="Follow on Twitter"></a></li>
<li class="gp"><a href="https://plus.google.com/103741144523748761550" target="_new" title="Follow on Google+"></a></li>
<li class="ln"><a href="http://www.linkedin.com/in/vinayprajapati" target="_new" title="LinkedIn Professional Network"></a></li>
<li class="fd"><a href="/feeds/posts/default" target="_new" title="Subscribe RSS Feed"></a></li>
</div>

3rd Widget: Shine Round Square Social Profile Gadget

Social Media Buttons Colored

/* Shine Round Social Profile Gadget by Tech Prevue */
<style type="text/css">
.tps {list-style:none;margin-top:10px;}
.tps li {float:left;background-repeat:no-repeat;display:inline;}
.tps li a {display:block; width:32px; height:32px; position:relative;}
li.fb {background-image:url("//goo.gl/Ilf79x");background-position: 0 0;width:32px;height:32px;}
li.gp {background-image:url("//goo.gl/Ilf79x");background-position: 0 -34px;width:32px;height:32px;}
li.tw {background-image:url("//goo.gl/Ilf79x");background-position: 0 -68px;width:32px;height:32px;}
li.ln {background-image:url("//goo.gl/Ilf79x");background-position: 0 -102px;width:32px;height:32px;}
li.fd {background-image:url("//goo.gl/Ilf79x");background-position: 0 -136px;width:32px;height:32px;}
#tps:hover li { opacity:0.2; }
#tps li {-webkit-transition-property: opacity; -webkit-transition-duration: 500ms; -moz-transition-property: opacity; -moz-transition-duration: 500ms;}
#tps li a strong {opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms;}
#tps li:hover {opacity:1;}
#tps li:hover a strong {opacity:1; top:-10px;}
</style>
<div class="tps" id="tps">
<li class="fb"><a href="https://www.facebook.com/techprevue" target="_new" title="Like Facebook Page"></a></li>
<li class="tw"><a href="http://www.twitter.com/techprevue" target="_new" title="Follow on Twitter"></a></li>
<li class="gp"><a href="https://plus.google.com/103741144523748761550" target="_new" title="Follow on Google+"></a></li>
<li class="ln"><a href="http://www.linkedin.com/in/vinayprajapati" target="_new" title="LinkedIn Professional Network"></a></li>
<li class="fd"><a href="/feeds/posts/default" target="_new" title="Subscribe RSS Feed"></a></li>
</div>

How to add social/profile media widget on a blog

To add this social profile widget on a blog you should add a HTML/Javascript gadget. Follow these instructions for Blogger blogs –

Blogger ‘Dashboard‘ › Blog’s ‘Layout‘ › Click ‘Add a Gadget‘ › Add ‘HTML/Javascript Gadget‘ › ‘Paste‘ anyone code give above › ‘Save‘ the gadget

This social profile widget can be used on any blog or site which supports HTML and CSS widgets. Some examples of these systems are WordPress, Tumblr, Webs etc.

Please note:
In this widget you should change red colored links with your social profile link. If needed feed url also.

<div class="tps" id="tps">
<li class="fb"><a href="https://www.facebook.com/techprevue" target="_new" title="Like Facebook Page"></a></li>
<li class="tw"><a href="http://www.twitter.com/vinayprajapati" target="_new" title="Follow on Twitter"></a></li>
<li class="gp"><a href="https://plus.google.com/103741144523748761550" target="_new" title="Follow on Google+"></a></li>
<li class="ln"><a href="" target="_new" title="LinkedIn Professional Network"></a></li>
<li class="fd"><a href="/feeds/posts/default" target="_new" title="Subscribe RSS Feed"></a></li>
</div>