Add a Future Blueish Social Author Info Widget for 2015

Hello frnds, let cheers once with a big champagne bottle because after such a long time a awesome widget is waiting for you all and that widget is named as Blueish Social Author Info Widget because that will give information about the author or admin of blog and by the social bookmarking buttons and any visitor will easily could know about yourself, this widget will also could help you to increase your own fans following like on twitter, facebook, youtube etc.

Widget is simply made by the CSS and with HTLM codes and there is no use of javascript.

| Live Demo |

Install Blueish Social Author Info Widget

Follow below steps carefully to add it successfully.

• Login to Blogger > Dashboard
• Click on Drop Down Menu and select Layout
• Add a HTML/JavaScript Gadget
• Paste below code in it.

<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'/>
<style>
.wgauthr-widget {
background:#fff;
background-color:#fff;
overflow:hidden;
position:relative;
margin-bottom:30px;
padding:10px 26px;
}

.wg-crnrbckgr:before {
content:"";
position:absolute;
top:0;
right:0;
z-index:40;
background:#658E15;
-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08);
-moz-box-shadow:0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08);
box-shadow:0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08);
display:block;
width:0;
border-color:#fff #eee #fff #fff;
border-style:solid;
border-width:0 16px 16px 0;
}

.wg-crnrbckgr {
position:relative;
background-color:#47C2DC;
height:90px;
background-repeat:no-repeat;
background-position:center center;
-webkit-background-size:cover!important;
-moz-background-size:cover!important;
-o-background-size:cover!important;
background-size:cover!important;
}

.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtrg
img {
height:80px;
width:80px;
}

.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo
span {
display:block;
letter-spacing:1px;
text-transform:uppercase;
}

.wg-avtlninfoaa {
font-size:14px;
line-height:21px serif,font-weight:normal,color:#666;
padding:22px 25px 8px;
}

.dwnlin {
margin-top:6px;
text-align:center;
border-top:2px solid #eee;
padding:8px 25px;
}

.wgauthr-widget.wgathrlns {
background:#fff;
margin-bottom:30px;
padding:0;
}

.wg-golblue {
width:100%;
height:50px;
padding:0 0 0 30px;
}

.wg-goliconn {
background:#47C2DC;
width:44px;
height:44px;
border-radius:10000px;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
cursor:pointer;
float:left;
margin-right:5px;
}

.wg-goliconn:hover {
background:#ddd;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}

.wg-goliconn img {
padding-top:5px;
padding-left:5px;
}

.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtrg,.wgavtrg {
position:absolute;
bottom:-20px;
left:30px;
border-radius:50%;
overflow:hidden;
background-color:#fff;
border:5px solid #fff;
}

.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo,.wgavtinfo {
padding-left:130px;
padding-top:46px;
color:#fff;
}

.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo .wgurnaam,.wgurnaam {
font-size:14px;
line-height:16px;
}

.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo .wgurju,.wgurju {
font-size:10px;
}
</style>




<div class="wgauthr-widget wgathrlns"><div class="wg-crnrbckgr" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDXQTtGKZ5zhhFEWwW5lVEwGCDA07NSIYtkDy99ZX2jphZrrMX1CEXsJu9NaT5BDJtGosTbQBF40nWtZeSe3WU_7__9LTVXa4vuXfrPDOXWMd0bKGMpzZLUDb_sj9MWAp4Fvzde1WX6aFI/s1600/authorbck.jpg)">

<div class="wgavtrg">
<img alt="Hemant Verma" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSk18hT-bJvFhPwibZd0FxkVaiaJj7Y5-63d77Fdk2JD4n6xnLhKSWQTrnvtpDPsR5LsmNS24duSXpM_I3mvKuJ2mYviZ5iTswrDPgonCxRJPUIwBZhZHnTN1ADUtHtQYUO-KqVmM5__dr/s1600/hemant+verma.PNG" /></div><div class="wgavtinfo"><span class="wgurnaam">Hemant Verma</span>
<span class="wgurju">An Entrepreneur, Blogger, Gadget Geek </span></div></div><div class="wg-avtlninfoaa">Our Mission is quite simple and easy to readers that MAKE YOUR BLOG LIKE A PRO which is now serving tons of quality articles daily to a much broader audience. </div><div class="dwnlin"></div>

<div class='wg-golblue'>
<div class='wg-goliconn'><a href='http://www.facebook.com/#' target='_blank'><img border='0' src='http://1.bp.blogspot.com/-H38kJ5PSU-k/Uin2qt9WW0I/AAAAAAAAAP8/W5Wmpt42xwY/s1600/facebook.png'/></a></div>

<div class='wg-goliconn'><a href='http://www.twitter.com/#' target='_blank'><img border='0' src='http://2.bp.blogspot.com/-B3UXsAyQbdw/Uin2scG5PKI/AAAAAAAAAQU/zcSj3UljGCw/s1600/twitter.png'/></a></div>

<div class='wg-goliconn'><a href='http://www.plus.google.com/#' target='_blank'><img border='0' src='http://3.bp.blogspot.com/--Pp4ZjOu4Ew/Uin2qgGT5zI/AAAAAAAAAP4/sMX3HGgzctE/s1600/google+.png'/></a></div>

<div class='wg-goliconn'><a href='http://www.youtube.com/#' target='_blank'><img border='0' src='http://3.bp.blogspot.com/-2KJ18EdFkdM/Uin2sS-cP1I/AAAAAAAAAQQ/7Vv8-WQWRQo/s1600/youtube.png'/></a></div>
<div class='wg-goliconn'><a href='http://feeds.feedburner.com/#' target='_blank'><img border='0' src='http://2.bp.blogspot.com/-aVX-dCRSr-A/Uin2qzynvOI/AAAAAAAAAQI/l-Mn8lg6sPs/s1600/rss.png'/></a></div>
</div></div>

• Save Your Widget.

Note: Don't Change Anything Extra from Codes because all Codes are Highly Sensitive.

Make Changes....!

Do some changes before save your widget.

• Replace Hemant Verma it with your own name (2 times) 
• Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSk18hT-bJvFhPwibZd0FxkVaiaJj7Y5-63d77Fdk2JD4n6xnLhKSWQTrnvtpDPsR5LsmNS24duSXpM_I3mvKuJ2mYviZ5iTswrDPgonCxRJPUIwBZhZHnTN1ADUtHtQYUO-KqVmM5__dr/s1600/hemant+verma.PNG this link with your own pic link.
• Replace An Entrepreneur, Blogger, Gadget Geek this line with your own short bio.
• Replace Our Mission is quite simple and easy to readers that MAKE YOUR BLOG LIKE A PRO which is now serving tons of quality articles daily to a much broader audience.  this line with your complete bio.
• Replace # with the usernames of all social networks.