About Me Author Box Gadgets With Different Styles For Blogger

"About-me" gadget inwards blogger shows the profile pic, get upwards together with description close writer of a blog. The uncomplicated about-me gadget shows solely an icon alongside a Google+ follow push together with a link to Google+ profile. So I accept created four fashionable "about-me" gadgets which are slow to use, adept looking together with follow buttons of four dissimilar social networks are also added. I promise yous similar these gadgets. To add together this gadget inwards your weblog follow below steps.


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

Step 2: Copy the code of desired "about-me" gadget together with glue 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 get upwards is Fahim Raza. I am a professional person blogger. I accept created many blogs. My recent ane 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=About Me Author Box Gadgets With Different Styles For Blogger width="22px" /></a>
<a href="https://twitter.com/101Helperblog" target="_blank"><img alt= gadgets alongside dissimilar styles for blogger About Me Author Box Gadgets With Different Styles For Blogger src="http://i58.tinypic.com/2ldzzog.png" title=About Me Author Box Gadgets With Different Styles For Blogger /></a>
<a href="https://plus.google.com/+101helperBlogspot" target="_blank"><img alt= gadgets alongside dissimilar styles for blogger About Me Author Box Gadgets With Different Styles For Blogger src="http://i57.tinypic.com/3009oqw.png" title=About Me Author Box Gadgets With Different Styles For Blogger /></a>
<a href="https://www.pinterest.com/101helper" target="_blank"><img alt= gadgets alongside dissimilar styles for blogger About Me Author Box Gadgets With Different Styles For Blogger height="22px" src="http://www.nptechforgood.com/wp-content/uploads/2012/02/pinterest-logo.jpg" title=About Me Author Box Gadgets With Different Styles For Blogger width="22px" /></a></div></div>
<style>
#about-me{
  color:#444;
    width: 300px;
    padding: 20px 10px 110px;
    border: 2px company #555;
  background-color:#eee;
 font-family: 'Open Sans Condensed',sans-serif;
}
#about-me img {
  border: 2px company #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 bridge {
  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 company #5467A7;
  border-right: 3px company transparent;
  border-bottom: 3px company transparent;
  border-top: 3px company #5467A7;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px company transparent;
  border-right: 3px company #5467A7;
  border-bottom: 3px company transparent;
  border-top: 3px company #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 get upwards is Fahim Raza. I am a professional person blogger together with possessor of 101helper.blogspot.com. I similar music, playing football,car race together with 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=About Me Author Box Gadgets With Different Styles For Blogger width="22px" /></a>
<a href="https://twitter.com/101Helperblog" target="_blank"><img alt= gadgets alongside dissimilar styles for blogger About Me Author Box Gadgets With Different Styles For Blogger src="http://i58.tinypic.com/2ldzzog.png" title=About Me Author Box Gadgets With Different Styles For Blogger /></a>
<a href="https://plus.google.com/+101helperBlogspot" target="_blank"><img alt= gadgets alongside dissimilar styles for blogger About Me Author Box Gadgets With Different Styles For Blogger src="http://i57.tinypic.com/3009oqw.png" title=About Me Author Box Gadgets With Different Styles For Blogger /></a>
<a href="https://www.pinterest.com/101helper" target="_blank"><img alt= gadgets alongside dissimilar styles for blogger About Me Author Box Gadgets With Different Styles For Blogger height="22px" src="http://www.nptechforgood.com/wp-content/uploads/2012/02/pinterest-logo.jpg" title=About Me Author Box Gadgets With Different Styles For Blogger width="22px" /></a></div>
<style>
#about-me {
  color: #444;
  width: 314px;
  padding: 40px 22px 114px;
  border: 2px company #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 get upwards is Fahim Raza. I am a professional person blogger. I similar music(Linkin Park), playing games(football) together with 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=About Me Author Box Gadgets With Different Styles For Blogger width="22px" /></a>
<a href="https://twitter.com/101Helperblog" target="_blank"><img alt= gadgets alongside dissimilar styles for blogger About Me Author Box Gadgets With Different Styles For Blogger src="http://i58.tinypic.com/2ldzzog.png" title=About Me Author Box Gadgets With Different Styles For Blogger /></a>
<a href="https://plus.google.com/+101helperBlogspot" target="_blank"><img alt= gadgets alongside dissimilar styles for blogger About Me Author Box Gadgets With Different Styles For Blogger src="http://i57.tinypic.com/3009oqw.png" title=About Me Author Box Gadgets With Different Styles For Blogger /></a>
<a href="https://www.pinterest.com/101helper" target="_blank"><img alt= gadgets alongside dissimilar styles for blogger About Me Author Box Gadgets With Different Styles For Blogger height="22px" src="http://www.nptechforgood.com/wp-content/uploads/2012/02/pinterest-logo.jpg" title=About Me Author Box Gadgets With Different Styles For Blogger width="22px" /></a></div>
<style>
#about-me {
  color: #444;
  width: 225px;
  padding: 20px 10px 110px;
  border: 2px company #B0AEAE;
background: -webkit-linear-gradient(#eee, white);
  font-family: 'Open Sans Condensed',sans-serif;
  height: 175px;
}
#about-me img {
  border: 2px company #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 get upwards is Fahim Raza. I am a professional person blogger together with possessor of 101helper.blogspot.com. I similar music, playing football,car race together with 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=About Me Author Box Gadgets With Different Styles For Blogger width="35px" height="35px" /></a>
<a href="https://twitter.com/101Helperblog" target="_blank"><img alt= gadgets alongside dissimilar styles for blogger About Me Author Box Gadgets With Different Styles For Blogger src="http://icons.iconarchive.com/icons/danleech/simple/1024/twitter-icon.png" title=About Me Author Box Gadgets With Different Styles For Blogger width="35px" height="35px" /></a>
<a href="https://plus.google.com/+101helperBlogspot" target="_blank"><img alt= gadgets alongside dissimilar styles for blogger About Me Author Box Gadgets With Different Styles For Blogger src="https://developers.google.com/+/images/branding/g+128.png" title=About Me Author Box Gadgets With Different Styles For Blogger width="35px" height="35px" /></a>
<a href="https://www.pinterest.com/101helper" target="_blank"><img alt= gadgets alongside dissimilar styles for blogger About Me Author Box Gadgets With Different Styles For Blogger  src="http://www.iconarchive.com/download/i54058/danleech/simple/pinterest.ico" title=About Me Author Box Gadgets With Different Styles For Blogger  width="35px" height="35px" /></a></div>
<style>
#about-me {
  color: #444;
  width: 275px;
  border: 2px company #A0A0A0;
  background-color: #fafafa;
  font-family: 'Open Sans Condensed',sans-serif;
  height: 310px;
}
#about-me img {
  border: 2px company #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 alter pic:

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

To alter name:

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

To alter description:

Replace dark-green colored text alongside your description. don't write likewise long description, otherwise it may await irregular.

To add together your social profiles links:

Replace the yellowish colored links alongside your social profiles links.  

Hope yous this post together with this gadget is working fine inwards your blog. If yous accept whatever query close whatever of the higher upwards gadgets, inquire me inwards comments or contact me. Follow together with subscribe to larn 2nd updates close blogger gadgets. Share this post alongside others together with assistance my weblog grow.

Search Tags: "About me" gadgets alongside dissimilar styles for blogger, Stylish close me gadget for blogger, Author profile gadgets for blogger.

Bagikan Artikel ini