How To Add Author Box Below Every Post In Blogger

Now you can Add Author Box On Your Blogger. Author Box is one of the important widgets to add in your blogger.

Author Box Widget will help visitors to know about the author from your blogger. This Widget does not affect your blogger. It required less time loading. This Widget is only based on CSS and HTML only.

How To Add Author Box In Your Blogger

The widget is simple and easy and you just need to follow the simple step by step guide below.

Steps to Add Author Box On Your Blogger:

Step 1. First of all, you need to Sign into your blogger and Select your blog. 

Step 2. Now you need to Go to "Theme" tab. 

Step 3. Now from there click on “Edit HTML”.

Step 4. Now search  (using Ctrl + F) for the following text.

<b:skin><![CDATA[

Step 5. Now you need paste this CSS code

.

/*##### Author Widget By Easily Learn Group #####*/

.td-a-rec-id-content_bottom {

    clear: both;

    text-align: left;

}

.td-a-rec h3 {

    font-family: Verdana,Geneva,sans-serif;

    font-size: 18px;

    font-weight: bold;

    color: #000;

    padding-bottom:6px;

}

.td-a-rec .block-title {

    line-height: 1;

    margin-top: 0;

    margin-bottom: 26px;

    border-bottom: 2px solid #3b5998;

}

.td-a-rec .block-title span {

    padding-left: 0 !important;

    background-color: transparent !important;

    padding-bottom: 8px !important;

}

.author-box-wrap {

    border: 1px solid #ededed;

    padding: 21px;

    margin-bottom: 48px;

    font-family: Verdana, Geneva, sans-serif;

    font-size: 14px;

    line-height: 21px;

}

.author-box-wrap a:hover {

    color: #3b5998;

    text-decoration: none;

    background-color: transparent;

}

.author-box-wrap a {

    color: #000;

    text-decoration: none;

    background-color: transparent;

}

.author-box-wrap .avatar {

    float: left;

    max-width: 96px;

}

.author-box-wrap .desc {

    margin-left: 117px;

    font-size: 12px;

}

.td-author-name {

    font-family: 'Open Sans', arial, sans-serif;

    font-size: 15px;

    line-height: 21px;

    font-weight: 700;

    margin: 7px 0 8px 0;

}

.author-box-wrap .td-author-social {

    margin-bottom: -5px;

}

.author-box-wrap .td-author-social a {

    color: #444;

    margin-top: 11px;

}

.td-social-icon-wrap > a {

    display: inline-block;

}

.author-box-wrap .td-author-social .td-icon-font {

    font-size: 15px;

    width: auto;

    min-width: 18px;

    height: auto;

    margin-right: 15px;

    line-height: 24px;

}

.author-box-wrap .td-social-icon-wrap .td-icon-font {

    color: #222;

}

[class*="td-icon-"] {

    text-align: center;

    display: inline-block;

}

.td-social-icon-wrap:hover i.td-icon-blogger {

  color: #ffa900;

}

.td-social-icon-wrap:hover .td-icon-font {

  -webkit-transition: color 0.3s;

  -moz-transition: color 0.3s;

  -o-transition: color 0.3s;

  transition: color 0.3s;

  color: #fff;

}

.td-social-icon-wrap:hover i.td-icon-facebook {

  color: #3B5998;

}

.td-social-icon-wrap:hover i.td-icon-googleplus {

  color: #dd4b39;

}

.td-social-icon-wrap:hover i.td-icon-instagram {

  color: #3f729b;

}

.td-social-icon-wrap:hover i.td-icon-mail {

  color: #000000;

}

.td-social-icon-wrap:hover i.td-icon-pinterest {

  color: #cb2027;

}

.td-social-icon-wrap:hover i.td-icon-twitter {

  color: #00aced;

}

Step 6. Now You need to search data:post.body

Step 7. Just you need to paste the following code.

<link href="https://file.myfontastic.com/Jg2sMqjxMA74iYFHG3D2mB/icons.css" rel="stylesheet">

<div class="td-a-rec td-a-rec-id-content_bottom  ">

   <h3 class="block-title">

      <span>

         <left>AUTHOR</left>

      </span>

   </h3>

</div>

<div class="author-box-wrap">

  <img src='Image Link Of Author" class="avatar" height="96" width="96">

  <div class="desc">

    <div class="td-author-name">

      <span>

        AUTHOR NAME

      </span>

    </div>

    <div class="td-author-description">

    WRITE AUTHOR BIO HERE

    </div>

    <div class="td-author-social">

        <span class="td-social-icon-wrap">

            <a target="_blank" href="http://easily-learn.blogspot.in/" title="Blogger">

                <i class="td-icon-font td-icon-blogger"></i>

            </a>

        </span>

        <span class="td-social-icon-wrap">

            <a target="_blank" href="https://www.facebook.com/TheEasilyLearn" title="Facebook">

                <i class="td-icon-font td-icon-facebook"></i>

            </a>

        </span>

        <span class="td-social-icon-wrap">

            <a target="_blank" href="plus.google.com/+TheEasilyLearn" title="Google+">

                <i class="td-icon-font td-icon-googleplus"></i>

            </a>

        </span>

        <span class="td-social-icon-wrap">

            <a target="_blank" href="https://www.instagram.com/easilylearn/" title="Instagram">

                <i class="td-icon-font td-icon-instagram"></i>

            </a>

        </span>

        <span class="td-social-icon-wrap">

            <a target="_blank" href="mailto:easilylearn.info@gmail.com" title="Mail">

                <i class="td-icon-font td-icon-mail"></i>

            </a>

        </span>

        <span class="td-social-icon-wrap">

            <a target="_blank" href="https://www.pinterest.com/TheEasilyLearn/" title="Pinterest">

                <i class="td-icon-font td-icon-pinterest"></i>

            </a>

        </span>

        <span class="td-social-icon-wrap">

            <a target="_blank" href="https://twitter.com/TheEasilyLearn" title="Twitter">

                <i class="td-icon-font td-icon-twitter"></i>

            </a>

        </span></div><div class="clearfix"></div></div></div>

Replace you Social Media Links

Step 8. Finally, save your template.

We hope that you would have liked the information in this article, and if like this article please share it all with your friends and other people. Do share the opinions regarding this post through the comments section below!