How to Add Awesome Author box to Every Blog Post

author box,how to add author profile,add author to every blog post,blogger author div,how to add author to blogger
Author profile is very important for any blog or website, every blogger wants to add a bio author box to their blog .
Blogging without adding up your Author profile is like an airplane without a pilot. Only having an impressive blog design its not going to be cover that.

Every professional blogger made few post about adding author to your blog and will also suggest you to add it in your blog. Author div provide information about the author of the article and every person also wants to know about the author of the article.

so its very important for you guys to add and customize your author div

Every blogger wants to add author profile to his blog or website so i decided to make post on how to add author div/profile to below every post of your blog. So you just have to copy and paste below code step by step .

in Oder to do the first step i strongly recommended you to backup your template before making changes.

Note: So go to the Blogger >> Template >> "and on the right upper corner" Backup/restore >>"and then popup will appear click on" >> [Download full Template]

Step 0
Go to your blogger dashboard >> Template >> Edit HTML:

Step 1
Press CTRL+F and then search for
</head>
paste font and icons link in the head tag:
<!-- FONTS -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'/>
<!-- FONT ICONS -->
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

Step 2
Press Ctrl+F and then search for the following code:
..CSS code here
]]></b:skin>

Step 3
Now copy and paste CSS code .
/**************************AUTHOR SECTION START***************************/
@import url(https://fonts.googleapis.com/css?family=PT+Sans);

 /*author profile div*/
 .author-div{
    width: 100%;
    height: auto;
    background: white;
    border:1px solid #ededed;
    color: #333;
    overflow: auto;
    margin:10px auto;
    border-radius: 10px;
    box-shadow: 0px 0px 8px #ededed;
   
 }
 .author-div a{text-decoration: none;color:#333;}
 .author-div ul{list-style:none;margin: 10px 10px;}
 .author-div ul li{display:inline-block; margin:0px 4px;}

 
 /*author inner div */

 .author-inner{
  width: 100%;
  overflow: auto;
 }
 /*author image div */
 .author-img{
  width: 80px;
  height: 80px;
  float: left;
  margin: 10px 10px;
  overflow: auto;
  box-shadow: 0px 0px 1px #453f3f;
  border-radius: 6px; 
 }

 .author-img img{
   width: 100%;
 }
 /*author content div */
 .author-content{
   width: 80%;
   float: left
 }
 
 /*author body div */
 .author-body p{
        font-family: "PT Sans Caption","PT Sans",sans-serif;
        line-height: 1.625;
 color: #7B7B7B;
     text-overflow: ellipsis;
     white-space: normal;

 }

 /*author footer div */
 .author-footer
 {
 float: right;
 }

 /*author heading div */
 .author-heading{
 font-size: 20px;
 }
 .author-heading h3{
 margin: 5px 0px 0px 0px;
        font-weight: normal;
        border-bottom: 1px solid #09DE09;
 font-family: "Open Sans Condensed", sans-serif;
 font-weight:normal;
 }
/**************************AUTHOR SECTION ENDS***************************/

Step 4
Now search twice for
<div class='post-footer-line post-footer-line-1'>

Step 5
Now just copy and paste HTML code.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- AUTHOR SECTION START -->
<div class='author-div'>
  <div class='author-inner'>
    <div class='author-img'>
        <img src='Author img url'/><!-- IMAGE URL HERE -->
    </div>
    <div class='author-content'>
        <div class='author-heading'>
            <h3>Author</h3>
        </div>
        <div class='author-body'>
            <p>Write some thing about your self!</p><!-- ADD TEXT HERE -->
        </div>
    </div>
  </div>
  <div class='author-footer'><!-- SOCIAL URL HERE -->
    <ul>
      <!-- FACEBOOK URL HERE -->
      <li>
        <a href='FACEBOOK' target='_blank'><i class='fa fa-facebook'></i></a>
      </li>
      <!-- TWITTER URL HERE -->
      <li>
        <a href='TWITTER' target='_blank'><i class='fa fa-twitter'></i></a>
      </li>
      <!-- GOOGLE URL HERE -->
      <li>
        <a href='GOOGLE' target='_blank'><i class='fa fa-google-plus'></i></a>
      </li>
    </ul>
  </div>
</div>
<!-- AUTHOR SECTION ENDS -->
</b:if>

Step 6
Save your template [Thats it you done].

[DEMO]⇓

Comments