Spice Up Your Blogger Blog with Custom Designed Templates - BTNT Services!

Add author information box below post to Blogger blog

On By // 8 comments
Advertisement
Author information box is now present on most of the WordPress blogs. It gives the info about the author and also contact info about him/her. It also makes your blog more attractive too.

Today We're going to see how to add author information box below post for blogger blogs.

Adding Author Information box:

  • Step 1: Go to Blogger Dashboard > Design > Edit HTML. Click on expand widgets template.
    Look for ]]></b:skin>

    Now, Add following code just above ]]></b:skin>
    .author_info {
    float: right;
    width: 573px;
    padding: 10px;
    border: 1px solid #e0e0e0;
    margin-bottom: 15px;
    margin-top: 15px;
    background: #eee;
    }
    .author_info h3 {
    margin-bottom: 10px;
    }
    .author_photo {
    float: left;
    margin: 0 0 0 10px;
    }
    .author_photo img {
    margin-right: 10px;
    border: 1px solid #e0e0e0;
    }
  • Step 2: Now look for footer-line-1
    It will get <div class='post-footer-line post-footer-line-1'>
    Now add following code BELOW it.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='author_info'>
    <div class='author_photo'>
    <img alt='author' src='http://3.bp.blogspot.com/_tbHfaj1A058/TSGc3fOc-NI/AAAAAAAAL7A/GU6dmnqINik/s1600/images.jpeg'/></div>
    <h3>About the Author</h3> This article is written by: <b>YourName</b> - who has already written <b>30</b> articles for <a href='YOUR-BLOG-URL'>YOUR-BLOG-NAME</a> YourName is a professional web designer. Catch him on <a href='http://twitter.com/yourtwitterID'>Twitter</a>, <a href='Your Facebook URL'>Facebook</a> or <a href='your e mail ID'>email</a> him <br> </br> <br> </br>
    YourName&#39;s <a href='your web url'>Website</a><br style='clear:both;'/>
    </div>
    </b:if>
    That's it.
  • Just edit the information from Step 2 code with your info.

8 comments:

  1. Hi,

    How about if there are multiple authors?

    ReplyDelete
  2. Thanks for your comment crumpylicious blog

    This post is for only for single author blog.

    If you want to place this in multiple authors blog you should place the 2nd step in ending of every post and edit its author information

    ReplyDelete
  3. Replies
    1. It's working fine, Just follow the instruction step by step.

      Delete
  4. dear chandeep author widget not appeared in my blog. i am using your sensational A responsive template.can you help me? my blog url: www.swadarshan-homeopathic-clinic.com

    ReplyDelete
  5. Hello chandeep,

    nice post and found this helpful.

    But I'm facing one problem. Please check www.solvemyhow.com for web version its working fine but for mobile and tablets its showing same web version. So, what to do now ?

    Please check it and help me !!!

    ReplyDelete
  6. Hello please its not working. Im using one of your free templates

    ReplyDelete

I Appreciate your valuable Feedback. So, Please DO NOT SPAM - Spam comments will be deleted immediately.

Don't use brand name in name field and you're not allowed to use links in comments unless it's necessary

Such Comments will be removed immediately.

Thanks,
Chandeep