How To Add "Author Box" in Blogger

Share

Author Box is always nice to have on your Blogger blog, not only because it looks good, but it gives the reader a chance to connect with and promote yourself in one or two lines.

Style 1:

Step 1:

Login to Blogger

Go to Design And select Edit HTML tab

Then Click Expand Widget Templates.

Step 2: Now find [CTRL+F] this code:

]]></b:skin>

And BEFORE/ABOVE that paste this code

/*-----Author Box------*/
#author-box{
float:left;
padding:10px;
width:500px; /* Width of Author Box */
background:#E2F3FB;
margin:0 0 0 -30px;
position:relative;
-moz-box-shadow:3px 3px 5px rgba(190, 200, 211, 0.5);
box-shadow: 3px 3px 5px rgba(190, 200, 211, 0.5);
-webkit-box-shadow: 3px 3px 5px rgba(190, 200, 211, 0.5);
z-index: 100; /* the stack order: foreground */
}
.author-corner{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwusdP4ygJJTPWmZIBq6fJO5-LaBq-NoDgNGaMISLPNOVl0Z-9MHP-vNFrzfSkoeE-jPqD1fl_6e6Bn2eGe_U358OcuDvI6qaMg5Td8-g4Vg3dhT6S-Iiz-MOkKfVYfwoefQalIVqvC6yE/s1600/corner.png) no-repeat left top; bottom:-13px;
height:12px;
left:2px;
position:absolute;
width:12px;
}
.author-avatar{
float:left;
margin:0 20px 0 0;
}
.author-avatar img {
border: 3px solid #fff;
}
.author-text{
float:left;
width:350px;
}
.author-text p{
margin: 0;
padding: 0;
}
.author-text h3 {
font-size:17px;
}

Step 3: Now find (CTRL+F) this in the template:

<data:post.body/>

And AFTER/BELOW that paste this code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='author-box'>
<div class='author-avatar'>

<img alt='' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja-idnYavkKaWOYHt4js6xnE5vy92J8g5d6SsxxYbBHH-Z4xU6HW58aK4l-voAHPI_eX3bU7vnH0rHhsLDilveH146i_flmFvRFHocQl39macj6bu_UxVzs7CJQ0ScaEEFGE8KUF_4iF0/s1600/grav.png' width='50'/>
</div>
<div class='author-text'>
<p><h3>About The Author : <a href='#YOUR LINKS HERE' title='Posts by admin'>Your Name</a></h3>
Write something about yourself here. You can follow him on <a href='http://twitter.com/your link' target='_blank' title='Follow @Twitter'><b>Twitter</b></a> and you can connect with him on <a href='http://www.facebook.com/your link' target='_blank' title='Find me in Facebook'><b>Facebook</b></a><br/>
</p>
</div>
<div class='author-corner'/>

</div>
</b:if>

• Replace Red Color Link with your image link


• Replace Blue color with your Twitter, Facebook and Homepage Links


• Replace Green Color Link with Your Name and description.

Now Save The Template.

Style 2:

Step 1:

Login to Blogger

Go to Design And select Edit HTML tab

Then Click Expand Widget Templates.

Step 2: Now find [CTRL+F] this code:

]]></b:skin>

And BEFORE/ABOVE that paste this code

/*-----Author Box------*/
#author-box{
float:left;
padding:10px;
width:500px; /* Width of Author Box */
background:#E8E8E8;
margin:0 0 0 0px;
position:relative;
}

.author-avatar{
float:left;
margin:0 20px 0 0;
}
.author-avatar img {
border: 3px solid #fff;
}
.author-text{
float:left;
width:350px;
}
.author-text p{
margin: 0;
padding: 0;
}
.author-text h3 {
font-size:17px;
}

Step 3: Now find (CTRL+F) this in the template:

<data:post.body/>

And AFTER/BELOW that paste this code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='author-box'>
<div class='author-avatar'>

<img alt='' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja-idnYavkKaWOYHt4js6xnE5vy92J8g5d6SsxxYbBHH-Z4xU6HW58aK4l-voAHPI_eX3bU7vnH0rHhsLDilveH146i_flmFvRFHocQl39macj6bu_UxVzs7CJQ0ScaEEFGE8KUF_4iF0/s1600/grav.png' width='50'/>
</div>
<div class='author-text'>
<p><h3>About The Author : <a href='#YOUR LINKS HERE' title='Posts by admin'>Your Name</a></h3>
Write something about yourself here. You can follow him on <a href='http://twitter.com/your link' target='_blank' title='Follow @Twitter'><b>Twitter</b></a> and you can connect with him on <a href='http://www.facebook.com/your link' target='_blank' title='Find me in Facebook'><b>Facebook</b></a><br/>
</p>
</div>

</div>
</b:if>

• Replace Red Color Link with your image link


• Replace Blue color with your Twitter, Facebook and Homepage Links


• Replace Green Color Link with Your Name and description.

Now Save The Template.