"About Me" Author Box Gadgets With Different Styles For Blogger | 101Helper
T Wednesday, April 15, 2015

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

"About me" gadgets with different styles for blogger | 101helper

"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

Stylish About me gadget for blogger style 2 | 101helper

<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

Stylish About me gadget for blogger style 3 | 101helper
<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

Stylish About me gadget for blogger style 4 | 101helper

<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.

EMBED FULL POST


22 comments :

  1. Thank you for the template! I've tried it for my blog and I've done everything, yet I can't seem to move the text down? Could you please have a look? http://hapham22.blogspot.co.uk/ Thanks :)

    ReplyDelete
    Replies
    1. What text? Sorry i didn't get you? Its a simple gadget you just need to make changes like your name.

      Delete
    2. It's fine, I think I've got it! I'll fix it later. Thanks :)

      Delete
  2. Style 3 is not working peoperly on my blog..

    please help me..
    http://www.cplushub.blogspot.com

    ReplyDelete
    Replies
    1. Whats the problem with style 3?

      Delete
    2. The text part is lying outside the box..

      Delete
    3. Sorry for this.... thanks for informing.... i will soon fix it and email you please leave your email so that i can tell you about status.

      Delete
    4. Thanx in advance..
      my email - imhim45@outlook.com

      Delete
  3. oooh very nice article, very nice widgets
    http://www.bloggerhope.com/

    ReplyDelete
  4. It's working before, but when I changed my blog template, everything misaligned

    ReplyDelete
    Replies
    1. Re-install the gadget and make sure you don't have any other authorbox which is interupting this gadget. Add thia gadget in sidebar of your blog.

      Delete
    2. Give me your blog link and email i will send you fixed code, this code is working on all my blogs, maybe your template has some code which is disturbing the alignment.

      Delete
    3. I didn't find widget code on your blog so I can't fix it for you.

      Delete
  5. this is my email address i need the code also dradejosh@gmail.com

    ReplyDelete