Design a Professional Looking "About Us" Page

About us page

Giving a mature and professional look to your "About Us" webpage should be amongst your first priorities. Visitors have the right to know who you are and what you do and where you belong. Your About Us page is your Identity page where you add a little bio of your self and then explain the purpose of your blog or website. It's the most important page for both your regular visitors and advertisers. So Make sure you leave a good impression on them by presenting your self well. Just an hour ago I designed my personal "About Me" Page and I hope the tutorial today will make sense once you see this new proposed design,

Live Demo

 

What's New In it?

The Design includes 4 most important features which are:

  1. All Blogger Widgets below Post titles and at the bottom are kept hidden
  2. Three beautiful Rows Describe your Entire Concept of Website i.e 1- Your Bio, 2- Blog Purpose and 3- Concluding paragraph.
  3. Passive Voice Speech is used to make things look professional
  4. It Loads in Seconds

If you think you really need one like that then I am sure you would love to read the tutorial below.

How To Create this About Us page?

For this tutorial I will suggest that you use Windows Live Writer. WLW will make your page design even more neat and clean. So lets get to work!

  1. Copy all data in your about us page in a notepad and keep it safe.
  2. Delete every thing in your about page and start writing a fresh bio about yourself in no more than 3-4 lines. Then add an your best picture to the left of your bio. See the example below,

image

    

3.  Now you need to add some rows/paragraphs where you can talk about your services, goals etc. I would advise that you create at most two-three rows and keep them short in length. Use passive voice and avoid using "I am this and that" rather use a tone that may sound as if someone else is describing the author.  Once you have written down the paragraphs then start enclosing each paragraph one by one between this code,

<div style="border: #686868 5px solid; padding: 10px; -moz-border-radius: 15px; -webkit-border-radius: 15px">
  <div style="text-align: justify"><img style="display: inline; float: right" align="right" src="ADD IMAGE LINK HERE" width="128" height="128" /></div>

  <div style="text-align: justify"><font color="#666666">

ADD PARAGRAPH TEXT HERE

</font></div>
</div>

<div style="text-align: justify">&#160;</div>

 

 

Do it for each paragraph. For example if you have written three paragraphs then enclose them in the codes like this,

<div style="border: #686868 5px solid; padding: 10px; -moz-border-radius: 15px; -webkit-border-radius: 15px">
  <div style="text-align: justify"><img style="display: inline; float: right" align="right" src="ADD IMAGE LINK HERE" width="128" height="128" /></div>

  <div style="text-align: justify"><font color="#666666">

ADD PARAGRAPH-1 TEXT HERE

</font></div>
</div>

<div style="text-align: justify">&#160;</div>

 

<div style="border: #686868 5px solid; padding: 10px; -moz-border-radius: 15px; -webkit-border-radius: 15px">
  <div style="text-align: justify"><img style="display: inline; float: right" align="right" src="ADD IMAGE LINK HERE" width="128" height="128" /></div>

  <div style="text-align: justify"><font color="#666666">

ADD PARAGRAPH-2 TEXT HERE

</font></div>
</div>

<div style="text-align: justify">&#160;</div>

 

<div style="border: #686868 5px solid; padding: 10px; -moz-border-radius: 15px; -webkit-border-radius: 15px">
  <div style="text-align: justify"><img style="display: inline; float: right" align="right" src="ADD IMAGE LINK HERE" width="128" height="128" /></div>

  <div style="text-align: justify"><font color="#666666">

ADD PARAGRAPH-3 TEXT HERE

</font></div>
</div>

<div style="text-align: justify">&#160;</div>

 

Make these changes:

  • To change the border color of the paragraph edit #686868  with your preferred color choice. Use our color generator tool.
  • Replace ADD IMAGE LINK HERE with the URL of your image. Try to you use a small image 128px by 128px in size.
  • To adjust the image size edit width="128" and height="128"

    4.    Finally save your page and publish it. Visit your About Us page to see it in action! :>

 

Hide Widgets

Now we need to hide all widgets that appear below post titles and at the bottom of posts. These widgets are normally the social bookmarking icons, AdSense code and related post widget which appears on all your posts. To hide them kindly follow these steps,

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Check the "Expand Widget Templates" box
  4. Search for ,

<data:post.body/>

and just above it enclose all your widget codes between the code below,

<b:if cond='data:blog.url != "ADD YOUR ABOUT US PAGE URL HERE"'>

WIDGET CODES

</b:if>

 

Add all your widget codes between these two bolded lines. Replace ADD YOUR ABOUT US PAGE URL HERE with your About Us page link.

    5. Do the same for all the widget codes below <data:post.body>

    6. Finally save your template and visit your blog to see the page loading in seconds with a neat and clean look.

 

Need Help?

If you needed any help just feel free to post your queries. I will reply the earliest possible. I just hope you succeed in creating an attention seeking About Us page that may let your blog stand out! Have fun. :>

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

26 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Hey I just wanted to let you know that instead of searching for try searching

    Thanks for the tip Mo.

    ReplyDelete
  2. Thank you mohammad. Loved it! God bless you boy

    ReplyDelete
  3. It blends just perfectly. I will surely try it. :DD

    ReplyDelete
  4. @G
    I really didn't get that G. Coul you kindly explain it a bit?

    @Hannah
    You are always welcomed here pal. I am glad you liked it. Thanks to you too. :>

    @Anony
    My pleasure mate. :>

    ReplyDelete
  5. I guess the comment got cut off. I was just saying I couldn't find "< data : post . body >" so I searched for < data : post . body />.

    Thanks.

    PS. I'm just putting in spaces otherwise the comment gets cut off.

    ReplyDelete
  6. @G

    Apologies G, I just updated the code. Thanks for reminding.

    ReplyDelete
  7. nice job incorporating css3 into the page! It looks really pro :D

    ReplyDelete
  8. @Anims
    Thank you and where were you lost man? :)

    ReplyDelete
  9. Router went down :( But now I am back!

    ReplyDelete
  10. Hey Mohammad, great tip, but what if there are two authors? I am planning to use this tip in a different way, will let u know once i am done. Hope to get positive opinion from u :) Good work buddy. Keep going.

    ReplyDelete
  11. @Anims
    Welcome back pal and yeh I am waiting for your posts. :>

    @Faisy
    Thank you pal :)

    @hetal
    Then at least one would be the boss and with all the codes provided, I am sure you will come up with a really nice design. Thank you for your generous comments. =)

    ReplyDelete
  12. actually..........after typing the Paragraphs and enclosing them in the HTML codes.......can u tell me where to paste or publish the enclosed paragraph code bro ?

    ReplyDelete
  13. thanks ,my blogger tricks rocks...

    ReplyDelete
  14. what is the need for adding widget codes as shown above?

    i am using the post direct link to link the About us tab on my site to the post of About us........

    www.vaabrobotics.blogspot.com

    ReplyDelete
  15. yahooooooooooo

    the great mohamaad
    great

    thank you

    ReplyDelete
  16. Perfectly working click here to see http://newpcclub.blogspot.com/p/about.html

    ReplyDelete
  17. I am Mrinal .I want to say that in windows live writer the background of the image is coming blue.Please help me to make it transparent.

    ReplyDelete
  18. Mohammad can you tell how to curve the corners of the box like in your about us page.

    ReplyDelete
    Replies
    1. I dont know if im acorrect but while i am experimenting, by default the -webkit-border-radius: 30px"> gives a round edges but if you change the 30px to 1px, it becomes square.

      Delete
  19. Thanks for sharing this very important instruction. I would like to ask a question. Is there any problem if I use a static page instead of blog post? Here you have used blog post.

    ReplyDelete
  20. i tried to image url form google drive it is not working can you help over here pl

    ReplyDelete