How to , Add Attractive CSS Social Profile Widget for Your Blogs and Web Sites

on

How to  , Add Attractive CSS Social Profile Widget for Your Blogs and Web Sites



Social profile widget is the maximum traumatic component for a weblog because this is the largest social media weapon to sell your blog thru social media. You can cross-take a look at this factor when you add a social profile widget in your weblog, and also you grow weblog readership and followers. Many bloggers are using simple social media widgets, but most of the brand new bloggers are blind to its blessings and however they want to apply it for amusing and reputation and showbiz. This precise social profile widget will let you join your social media profile to your blog. With this social profile widget, your weblog readers will reach to your social profile and pages and upload you as a pal or subscribe page updates or comply with you. Four important social media platforms Facebook, Google+, Twitter, and Linkedin, are available on this widget, including your blog feed to make feed subscriptions simpler to various on line feed readers.
This Social widget has a Different Looks. A-Hover effect is added to it when you rollover your mouse arrow over a social media widget icon; all other icons get fade. You’ll really love this social profile widget icon.
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 GNNTV */
<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/https://gnntv.blogspot.com/" target="_new" title="Like Facebook Page"></a></li><li class="tw"><a href="http://www.twitter.com/https://gnntv.blogspot.com/" target="_new" title="Follow on Twitter"></a></li></div>

2nd Gadget: Snow White Square Social Profile Gadget

White Social Media Buttons

/* Snow White Square Social Profile Gadget by GNNTV */
<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/https://gnntv.blogspot.com/" target="_new" title="Like Facebook Page"></a></li><li class="tw"><a href="http://www.twitter.com/https://gnntv.blogspot.com/" target="_new" title="Follow on Twitter"></a></li></div>

3rd Widget: Shine Round Square Social Profile Gadget



Social Media Buttons Colored









* Shine Round Social Profile Gadget by GNNTV */
<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/https://gnntv.blogspot.com/" target="_new" title="Like Facebook Page"></a></li><li class="tw"><a href="http://www.twitter.com/https://gnntv.blogspot.com/" target="_new" title="Follow on Twitter"></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.



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

Comments

Post a Comment