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

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 you grow blog readership and followers. Many bloggers are using basic social media widgets, but most of the new bloggers are unaware of its benefits and but they want to use it for fun and 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 on your social profile and pages and add you as a friend or subscribe page updates or follow you. Four major social media platforms Facebook, Google+, Twitter, and Linkedin, are available in this widget, including your blog feed to make feed subscriptions simpler to various online feed readers.

Attractive Social Profile Widget for Blogger

This widget has a unique appearance. A hover effect is added to it when you roll your mouse arrow over a social media icon; all other icons get 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 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 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>

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

11 thoughts on “How to Add Attractive CSS Social Profile Widget for Blogs and Sites?”

  1. This way you can assign social profiles to a lot of locations on your site … of advantages over lots of other social profiles widget sound good.

  2. Avatar photo
    Yogita Aggarwal

    I like the 3rd set of social media widgets but i like most the social media widgets i am using on my blog – check _www.dreamtechie.com — Upper right corner

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top