Thursday, 23 May 2013

How To Create About The Author Box Widget For Blog

    Every blog should have a "Contact Us" page and "About the Author " box.This is because as your blog gains popularity,people will love to know more about you,who you are,where you live and what your qualifications are.Also,having a nice "About the Author " box helps to impress your visitors,which can even turn them into subscribers.

            I have already shown you in two of my earlier posts how to create Email Subscription buttons-

           Now,lets take a look at how to create the "About the Author" box.

    Follow the steps below to insert the About the Author box.

1. Go to Blogger dashboard > Layout

2.Click on Add A Gadget >HTML/Javascript

3.Copy the code below and paste it into the blank

    <a href="" target="_blank"title="Blogger Widgets"><style>.quote_box{width:225px;margin-top:12px;background:#fff url( no-repeat 94% 7%;border:1px solid #b6b6b6;position:relative;padding:18px}.quote_box:before{border:15px solid;bottom:-30px;content:'';height:0;right:40px;position:absolute;width:0;border-color:#b6b6b6 transparent transparent #b6b6b6}.quote_box:after{border:14px solid;bottom:-27px;content:'';height:0;position:absolute;right:41px;width:0;border-color:#fff transparent transparent #fff}.quote_content{overflow:hidden}.detail_box{float:left;margin-left:0}.detail_box span{display:block}.detail_box{font-size:17px;line-height:30px}.detail_box span.derole{ color: #666666; font-size: 15px; font-style: italic; line-height: 10px;}.said_box{ font-size: 20px;float:left;margin-top:-130px;margin-left:72px}.said_box span.roleau{ color: #333333; font-size: 16px; font-style: normal; line-height: 20 px;}.custom li.quotes,.custom li.widget.quotes p{margin-bottom:0} </style> <br /> <div class="quote_box"> <div class="quote_content"> <div class="detail_box"> <img alt="Sarbajit Saha" src="YOUR 125 X 125 IMAGE URL" style="border-radius: 777px 777px 777px 777px;" title="Sarbajit Saha" /><span class="derole"></span><br /> <span class="derole">Man</span><br /> <span class="derole">Behind</span><br /> <span class="derole">This Blog</span></div>
    <div style="text-align: right;"><div class="said_box"> <a href="" rel="author" target="_blank">Sarbajit Saha</a><span class="roleau"></span><br /> <span class="roleau">I'm the owner and founder of this blog. I stay in Kolkata,West Bengal,India and I'm currently in Class XII(2013).Know more about me at my contact page<a href="YOUR CONTACT US PAGE URL" rel="author" target="_blank">More</a></span></div> </div> </div> </div></div>

 In the above code,you need to make a few adjustments.
  • Replace "Sarbajit Saha" with your own name.
  • Replace the red coloured part with your own description.
  • Replace the green coloured part with your "Contact Us" page URL.You can check out my tutorial on Create contact us page for your blog
  • Replace the orange colored part with your Google+ profile page URL.
4. Click on Save.

           Hope you enjoyed this article.Subscribe for more such interesting articles.


Get a free ebook on SEO! Join the team now! By Submitting your email address:


  • Facebook
  • Twitter
  • Myspace
  • Google Buzz
  • Reddit
  • Stumnleupon
  • Delicious
  • Digg
  • Technorati
Author: Sarbajit Saha
Sarbajit is the founder of My Blogger Advice(MBA),a blog which offers its readers blogging and SEO tips,online earning methods and free widgets. Read More →


  1. If you want to have multiple author boxes,you simply have to add the code for each writer

  2. What if you have multiple author's and they each want their own individual one, on the same blog?