"About Me" Author Box Gadgets With Different Styles For Blogger

"About-me" gadget in blogger shows the profile pic, name and description about author of a blog. The simple about-me gadget shows only an image with a Google+ follow button and a link to Google+ profile. So I have created 4 stylish "about-me" gadgets which are easy to use, good looking and follow buttons of 4 different social networks are also added. I hope you like these gadgets. To add this gadget in your blog follow below steps.


Step 1: Go to blogger dashboard > Layout > add a gadget > Html/javascript.

Step 2: Copy the code of desired "about-me" gadget and paste it into Html/javascript window.

Style 1

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<div class="box">
   <div class="ribbon"><span>Admin</span></div>
<div id="about-me"> 
  <img src="http://lh5.googleusercontent.com/-p4_CJcGp4AM/AAAAAAAAAAI/AAAAAAAAABM/vdNgm0VFg70/s80-c/photo.jpg" /><p>Fahim Raza</p><p></p><h5>My name is Fahim Raza. I am a professional blogger. I have created many blogs. My recent one is 101Helper....</h5>
<p></p><p></p>
</div>
<div id="my-link">
<a href="https://www.facebook.com/pages/101Helper/623626157780837" target="_blank"><img src="http://i57.tinypic.com/aonk43.png" title="Facebook" width="22px" /></a>
<a href="https://twitter.com/101Helperblog" target="_blank"><img alt="Twitter" src="http://i58.tinypic.com/2ldzzog.png" title="Twitter" /></a>
<a href="https://plus.google.com/+101helperBlogspot" target="_blank"><img alt="Google+" src="http://i57.tinypic.com/3009oqw.png" title="Google" /></a>
<a href="https://www.pinterest.com/101helper" target="_blank"><img alt="Pinterest" height="22px" src="http://www.nptechforgood.com/wp-content/uploads/2012/02/pinterest-logo.jpg" title="Pinterest" width="22px" /></a></div></div>
<style>
#about-me{
  color:#444;
    width: 300px;
    padding: 20px 10px 110px;
    border: 2px solid #555;
  background-color:#eee;
 font-family: 'Open Sans Condensed',sans-serif;
}
#about-me img {
  border: 2px solid #666;
  width: 100px;
  height: 100px;
  position: absolute;
  bottom: 16px;
  border-radius: 2px;
  left: 8px;
}
#about-me p{
position:absolute;
bottom:84px;
  font-size:17px;
font-weight:bold;
  left:119px;
color: rgb(58, 148, 227);
}
#about-me h5{
  width:200px;
  position:absolute;
  left:119px;
  top:9px;
  color:#555;
font-size:14px;
}
#my-link {
position:absolute;
top: 94px;
  left: 119px;
}
.ribbon {
  position: absolute;
  left: -3px; top: -3px;
  z-index: 5;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#359BED 0%, #5467A7 100%);
  box shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #5467A7;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #5467A7;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #5467A7;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #5467A7;
}
</style>

Style 2

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<div id="about-me"> 
  <img src="http://lh5.googleusercontent.com/-p4_CJcGp4AM/AAAAAAAAAAI/AAAAAAAAABM/vdNgm0VFg70/s80-c/photo.jpg" /><p>Fahim Raza</p><p></p><h5>My name is Fahim Raza. I am a professional blogger and owner of 101helper.blogspot.com. I like music, playing football,car race and blogging...</h5>
<p></p><p></p>
</div>
<div id="my-link">
<a href="https://www.facebook.com/pages/101Helper/623626157780837" target="_blank"><img src="http://i57.tinypic.com/aonk43.png" title="Facebook" width="22px" /></a>
<a href="https://twitter.com/101Helperblog" target="_blank"><img alt="Twitter" src="http://i58.tinypic.com/2ldzzog.png" title="Twitter" /></a>
<a href="https://plus.google.com/+101helperBlogspot" target="_blank"><img alt="Google+" src="http://i57.tinypic.com/3009oqw.png" title="Google" /></a>
<a href="https://www.pinterest.com/101helper" target="_blank"><img alt="Pinterest" height="22px" src="http://www.nptechforgood.com/wp-content/uploads/2012/02/pinterest-logo.jpg" title="Pinterest" width="22px" /></a></div>
<style>
#about-me {
  color: #444;
  width: 314px;
  padding: 40px 22px 114px;
  border: 2px solid #A0A0A0;
  background-color: #fafafa;
  font-family: 'Open Sans Condensed',sans-serif;
}
#about-me img {
  border: 6px double #A0A0A0;
  width: 100px;
  height: 100px;
  position: absolute;
  bottom: 23px;
  border-radius: 12px;
  left: 18px;
  -ms-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);
  transform: rotate(-17deg);
  z-index: 5;
}
#about-me p {
  position: absolute;
  bottom: 102px;
  font-size: 18px;
  font-weight: bold;
  left: 146px;
  color: rgb(58, 148, 227);
}
#about-me h5 {
  width: 185px;
  position: absolute;
  left: 146px;
  top: 15px;
  color: #747272;
  font-size: 15px;
  letter-spacing: 0.2px;
  text-align: left;
}
#my-link {
  position: absolute;
  top: 20px;
  left: 332px;
}
#my-link img{
border-radius:70px;
padding:2px;
}
</style>

Style 3

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<div id="about-me"> 
  <img src="http://lh5.googleusercontent.com/-p4_CJcGp4AM/AAAAAAAAAAI/AAAAAAAAABM/vdNgm0VFg70/s80-c/photo.jpg" /><p>Fahim Raza</p><h5>Hi there! my name is Fahim Raza. I am a professional blogger. I like music(Linkin Park), playing games(football) and blogging...</h5>
</div>
<div id="my-link">
<a href="https://www.facebook.com/pages/101Helper/623626157780837" target="_blank"><img src="http://i57.tinypic.com/aonk43.png" title="Facebook" width="22px" /></a>
<a href="https://twitter.com/101Helperblog" target="_blank"><img alt="Twitter" src="http://i58.tinypic.com/2ldzzog.png" title="Twitter" /></a>
<a href="https://plus.google.com/+101helperBlogspot" target="_blank"><img alt="Google+" src="http://i57.tinypic.com/3009oqw.png" title="Google" /></a>
<a href="https://www.pinterest.com/101helper" target="_blank"><img alt="Pinterest" height="22px" src="http://www.nptechforgood.com/wp-content/uploads/2012/02/pinterest-logo.jpg" title="Pinterest" width="22px" /></a></div>
<style>
#about-me {
  color: #444;
  width: 225px;
  padding: 20px 10px 110px;
  border: 2px solid #B0AEAE;
background: -webkit-linear-gradient(#eee, white);
  font-family: 'Open Sans Condensed',sans-serif;
  height: 175px;
}
#about-me img {
  border: 2px solid #666;
  width: 110px;
  height: 110px;
  position: absolute;
  bottom: 184px;
  border-radius: 60px;
  left: 65px;
}
#about-me p {
  position: absolute;
  bottom: 135px;
  font-size: 19px;
  font-weight: bold;
  left: 91px;
  color: rgb(58, 148, 227);
}
#about-me h5 { letter-spacing: 0.3px; width: 200px; position: absolute; left: 30px; top: 140px; color: #555; font-size: 14px; text-align: center; }
#my-link {
  position: absolute;
  top: 260px;
  left: 79px;
}

</style>

Style 4

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<div id="about-me"> 
  <img src="http://lh5.googleusercontent.com/-p4_CJcGp4AM/AAAAAAAAAAI/AAAAAAAAABM/vdNgm0VFg70/s80-c/photo.jpg" /><h5>My name is Fahim Raza. I am a professional blogger and owner of 101helper.blogspot.com. I like music, playing football,car race and blogging...<br /><br />Email: Fahimraza101@gmail.com<br />Phone: xxx-xxx-xxx-001<br />Skype ID: Fahim Khan</h5>
<h4>Author Name:</h4><p>Fahim Raza</p>
</div>
<div id="my-link"><p>Follow On</p>
<a href="https://www.facebook.com/pages/101Helper/623626157780837" target="_blank"><img src="http://icons.iconarchive.com/icons/danleech/simple/512/facebook-icon.png" title="Facebook" width="35px" height="35px" /></a>
<a href="https://twitter.com/101Helperblog" target="_blank"><img alt="Twitter" src="http://icons.iconarchive.com/icons/danleech/simple/1024/twitter-icon.png" title="Twitter" width="35px" height="35px" /></a>
<a href="https://plus.google.com/+101helperBlogspot" target="_blank"><img alt="Google+" src="https://developers.google.com/+/images/branding/g+128.png" title="Google" width="35px" height="35px" /></a>
<a href="https://www.pinterest.com/101helper" target="_blank"><img alt="Pinterest"  src="http://www.iconarchive.com/download/i54058/danleech/simple/pinterest.ico" title="Pinterest"  width="35px" height="35px" /></a></div>
<style>
#about-me {
  color: #444;
  width: 275px;
  border: 2px solid #A0A0A0;
  background-color: #fafafa;
  font-family: 'Open Sans Condensed',sans-serif;
  height: 310px;
}
#about-me img {
  border: 2px solid #A0A0A0;
  width: 80px;
  height: 80px;
  position: absolute;
  top: 15px;
  border-radius: 4px;
  left: 186px;
}
#about-me p {
  position: absolute;
  top: -2px;
  font-size: 18px;
  font-weight: bold;
  left: 99px;
  color: rgb(58, 148, 227);
  letter-spacing: .4px;
}
#about-me h5 {
    border-top: 3px double #999;
    width: 165px;
    position: absolute;
    left: 13px;
    padding-top: 5px;
    top: 16px;
    color: #747272;
    font-size: 15px;
    letter-spacing: 0.2px;
    text-align: left;
}
#about-me h4 {
    font-size: 18px;
    position: absolute;
    top: 15px;
    left: 8px;
    border: 0;
    color: #555;
}
#my-link {
  position: absolute;
  top: 268px;
  left: 10px;
}
#my-link p {
position: absolute;
  bottom: 29px;
  color: #444;
  font-size: 16px;
  font-weight: bold;
  left: 3px;
}
#my-link img{
border-radius:5px;
padding:2px;
}

</style>

Customization:

To change pic:

Replace http://lh5.googleusercontent.com/-p4_CJcGp4AM/AAAAAAAAAAI/AAAAAAAAABM/vdNgm0VFg70/s80-c/photo.jpg with your profile pic url. 

To change name:

Replace Fahim Raza with your name. Maximum characters allowed are 12.

To change description:

Replace green colored text with your description. don't write too long description, otherwise it may look irregular.

To add your social profiles links:

Replace the yellow colored links with your social profiles links.  

Hope you this post and this gadget is working fine in your blog. If you have any question about any of the above gadgets, ask me in comments or contact me. Follow and subscribe to get instant updates about blogger gadgets. Share this post with others and help my blog grow.

Search Tags: "About me" gadgets with different styles for blogger, Stylish about me gadget for blogger, Author profile gadgets for blogger.