how to add an elegant author box in blogger

Are you looking for an Author Box for your blogger? If yes, I have one elegant Author box widget for your blog try this one and make your blog more professional because the visitor or the reader of your blog should know about its author, so this widget is considered as one of the most important and elegant widgets for your blogger. In this widget, you can write anything about you that you think your blog visitors should know about you and then they can also connect with you by means of any kind of social networking site in which you are available and they find it comfortable. This can also be considered as a marketing strategy as if one visitor likes your blog and about you, the way you approached your reader then he might just go and share this info with his/her friends and by this, you and you're is just getting popular.

1. Go to blogger Dashboard -----> Template -----> Edit HTML.
2. Click anywhere in HTML area and press Ctrl+F (A Search Box will appear).
3. Copy and paste the code 2.1 or 2.2 in the search box and press Enter from your keyboard.

2.1.<div class='post-footer'>

Try this code No#2.2 (if you don’t find matching code No#2.1)

2.2.<div class="post-footer">

Press ‘Enter’ twice to find the matching code.

When you find the exact matching code place this HTML code just above this <div class='post-footer'>  or  <div class="post-footer">  post-footer tag

<b:if cond='data:blog.pageType == "item"'>

<div class="authorbox">

<div class="authorimg">

<img src="LINK" alt="About Me" />

</div>

<div class="wraptext">

<h4>YOUR NAME</h4>

<div class="authordesc">

DESCRIPTION ABOUT YOU (AROUND 50 WORDS)

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

</b:if>

Instructions

RED CODE : Do not change this code 

ORANGE AREA:  Replace this text with your name and description.  

Now

Go to blogger Dashboard ----> Template ----> Edit HTML.

Click anywhere in HTML Area and press Ctrl+F from your keyboard.

Search for this code  ]]></b:skin>  .

Just above this code paste the code below

.authorbox {

    background-color: #F7F7F7;

    color: #555;

    padding: 10px 12px;

    min-height: 80px;

    overflow: hidden;

    width: 100%;

    clear: both;

    margin: 20px 0 10px;

}

.authorbox h4{

    font-size: 20px;

    margin: 0 0 2px 0;

}

.authorbox .authorimg {

    display: block;

    float: left;

    width: 100px;

    margin-top: 10px;

}

 

.authorbox .authorimg&gt;img {

    width: 100px;

    max-width: 100% !important;

    border: 0;

    text-shadow: none;

    padding: 0;

}

.authorbox .wraptext {

    margin-left: 116px;

    line-height: 1.5;

}

Instructions:

Colour Replace this colour with your desired colour

Save your template and view blog.

That's it you done your work and if you have any problem please comment below.