How to Add Attractive CSS Social Profile Widget for Blogs and Sites?

A social profile widget is the most demanding thing for a blog because this is the 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 and grow blog readership and followers.

Many bloggers are using basic social media widgets, but most of the new bloggers are unaware of their benefits, and they want to use them for fun, popularity, and showbiz.

This unique social profile widget will let you connect your social media profile to your blog. With this social profile widget, your blog readers will reach your social profile and pages and add you as friends, subscribe to page updates, or follow you.

This widget includes four major social media platforms: Facebook, Twitter, LinkedIn, and your blog feed to simplify feed subscriptions to various online feed readers.

This widget has a unique appearance. When you roll your mouse arrow over a social media icon, it creates a hover effect, and all other icons fade. You’ll love this social profile widget.

This social profile widget is available in three styles. You can choose one that suits your preference.

1st Widget: Burning Social Profile Gadget

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

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

/* 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 a social/profile media widget on a blog

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

Blogger ‘Dashboard‘ › Blog’s ‘Layout‘ › Click ‘Add a Gadget‘ › Add ‘HTML/Javascript Gadget‘ › ‘Paste‘ any code that is given above › ‘Save‘ the gadget.

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

Please note:
In this widget, you should replace the red-colored links with your social profile link and, if needed, the feed URL.

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

If you like this widget, don’t forget to share it with your friends.