automatic author biography box

No idea what I'm talking about? If you scroll down you will see a little picture of me and Puka and also a short biography about me and some links to my social networking sites. This is what we will be creating today. You will need a small understanding on HTML to achieve this, and patience! The great thing about these is that they show up only on post pages, not on the home page!

STEP ONE:

You will need a photo of yourself that is 150px by 150px you can resize a photo for free using picmonkey.com. Then you want to open the Edit HTML area of your blog, you will find this on the template tab.

STEP TWO:

Now press CTRL+F (⌘+F on a mac) to open the search bar and paste the code below:

<b:if cond='data:post.hasJumpLink'>

STEP THREE:

Hit enter and you should be taken to a code that looks like this:

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

STEP FOUR:

Directly after the section of code mentioned above, paste this code:

 <b:if cond='data:blog.pageType == "item"'>
<div class='signature'>
       <p class='sig-content'></p>
       </div>
      </b:if>

STEP FIVE:

Now you are going to write what you want your biography to say for in between this line of the code you just pasted:

<pdiv class="sig-content"p>
WRITE YOUR BIO HERE<p/divp>

For example this is how my code looks:

<p class='sig-content'>SERENA OZGOWICZ IS A 21 YEAR OLD PUGGLE OWNER WITH A PASSION FOR WEB DESIGN. SHE LIKES TO SHARE HER PASSION WITH YOU GUYS THROUGH TUTORIALS AND HELPFUL TIPS. YOU CAN FOLLOW HER ON FACEBOOK, TWITTER AND INSTAGRAM.</p>

STEP SIX:

If you want to add links in your bio like I have, be sure to apply this html around the words you want to be links:

<a href="http://www.facebook.com/username">gtFACEBOOK</a>
<a href="http://www.twitter.com/username">TWITTER</a>
<a href="http://www.instagram.com/username">INSTAGRAM</a>

STEPE:

Press Save and go back to the template tab and choose customise. It's time to add some colour and your little photo! Go to ADVANCED > ADD CSS and paste the code below into the box:

.signature {
      background: #ccf677 url(photo url) left no-repeat;
    width: 753px;
    height: 150px;
}

.sig-content {
    width: 500px;
    font-size: 1.2em;
    padding-left: 190px;
    padding-top: 1.9em;
    position: relative;
    color: #252525;
    text-transform: uppercase;
    text-align: justify;
    letter-spacing: 2px;
    word-spacing: 1px;
    font-size: 15px;
}

.sig-content a {
  color: #f9a9cd;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 0px;
   } 

Upload your 150px by 150px image to postimage.org and then grab the DIRECT CODE and paste the URL into the code you just pasted where it says photo url You can change the colour of the background by changing #ccf677 to a colour hex of your choice. From there keep changing the codes till you get it to look how you want (the best way to keep checking is have a new tab open viewing a blog post - not the home page- keep pressing apply as you edit the code and refresh the blogpost to see the changes appear) Once you are fully happy with the result you're finished!

purchase installation

If you would like me to install this gadget for you, I offer installation for the Automatic Author Biography Box at just £8! Just click below to purchase! I will email the paypal email used, so please contact me if you perfer to talk via a different email.