How to Create "About The Author Box" under the post

Do you want readers to know about your profile, twitter account, facebook account or anything about you. The solution is very easy, you can easily add the "About the author" at the bottom of each post. You just have to add some html code into your template. Here I will explain the steps how to add a box about the author (About the author) at the bottom of the posting.

Here's an example:

Simply follow these steps:
1. Log into your blogger account.
2. Select "Design" in your blogger dashboard, click>> "Edit html" do not forget to tick the box 'Expand widget tempalte'

3. Find the following code (use ctrl + f to search bar to search faster code)

]]></ B: skin>

4. Copy the code below and paste the above code continues described in no. 3

. Author-box {background: # 00 000; margin: 20px 0 40px 0; padding: 10px; border: 1px solid # e6e6e6; overflow: auto}. Author-box p {margin: 0; padding: 0}. Author img-box {background: # fff; float: left; margin: 0 10px 0 0; padding: 4px; border: 1px solid # e6e6e6

5. Next find the following code

<div class='post-footer-line post-footer-line-1'/>

6. Replace the code at no. 5 with the code below

<div class='clear'/><div class='author-box'><p><img class='avatar avatar-70 photo' height='90' src='http://i1125.photobucket.com/albums/l593/Deniez_Kamaitachi/Kamaitachi128.png' title='Deniez-Profile-Photo' width = '90' /><span style='font-size:15px; font-family:Georgia,"Nimbus Roman No9 L",serif; font-style: italic;'> <b> About the Author < / b> </ span> <br/><Div style = 'text-align: justify; font-size: 14px; color: # FFCC00; line-height: 20px; font-family: Georgia, "Nimbus Roman No9 L", serif; font-style: italic; color: # FFCC00; '> I'm Deniez, the owner of this site. I'm a simple guys. I'm blogging since 2009 and I'm currently a guest blogger on Blogging With Success.<span> "Make the Best" by Deniez. </ span> <br/><span style='font-size:15px; font-family:Georgia,"Nimbus Roman No9 L",serif; font-style: italic;'> <b> Follow Me On <a href = 'http:// twitter.com / deniezdayerz '> Twitter </ a> or <a href=' http://www.facebook.com/deniez.dayerz'> On Facebook </ a> </ b> </ span> </ div > </ p></div>

7. Seteleh enter the code above, we then edit some parts.

• Replace the code that is pink with your profile photo url, size (128x128)
• Replace the code that is green with the title of your profile photo.
• The code that orange is the color code, you replace the color you want. To know the color code please look at the html color codes or Update: html color codes .
• Code blue is something about you, then write a few words about you.
• Red code is the code from the link twitter and facebook profile.

8. When finished editing, save the template you continue to see the results.


Hopefully this article useful to you. for suggestions and critiques please postkan your comment