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.
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.
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 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 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.
Quite innovative kind of social widget , very good to attract attention of visitors.
Thanks Mr Kumar
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.
Oh! It’s Great, Jarden!
tx for sharing the article
Most welcome Mukesh!
Thanks bro, i like it
Welcome Lam!
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
Welcome Yogita… We usually do not approve low reputation comments.
Thanks… I have installed it