How to invite author and add author box in blogger blog

In this post I am gonna show you how to manually add author box below post. The technique of having Multiple authors to manage a Blog is getting popular these days. Though this feature was already available in wordpress , recently Blogger too has enabled this feature. So now Blogger Users can have upto 100 multiple Authors or co-Authors for their blogs. in order to better serve them it is important to display some information about them in a polite manners. Here is I will show you two methods. in first method you can just add below post title Posted by. text by inviting guest author and in method two you can add manual Attractive banner below post with box and image hover effect.

See Live Demo Below..

Author - Ishtiaq Ahmad is the owner of Blogger Trcisk. Ishtiaq lives in Pakistan, has been blogging since 2009 and writing on Blogger Tricks since 2012.You can find him on Blogger Tricks

To create this type of Beautiful box for your guest authors you would need to play with some CSS and HTML Codes.
Are Second Option for Author Back link you can mostly on blogger blog. like this below post title.

How to Invite Authors on your blogger blog

How to add author box manually below post

In this step we need to edit your template so Remember always Make a Backup of Your Template Before You Edit Your Template (how to make a template backup.)
1. Go to your blogger Dashboard>> Template>> Proceed and click on expand widget box.
2. Find The following code in your template. (how to find code using search bar)

]]></b:skin>

3. paste the below code before/above ]]></b:skin>.

/* Start Author Link by http://bl0gger-tricks.blogspot.com */
#author-link {
font-family: Trebuchet MS, Arial, Verdana;
width:auto;
height: 100px;
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
-goog background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

#author-link:hover {
background: #FFF;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
-moz-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#author-link a {
font-family: Maven Pro,Arial,Verdana;
color: #016AFF;
}
#author-link a:hover {
font-family: Maven Pro,Arial,Verdana;
color: #333333;
}
#author-link img {
border:1px solid #9ED0DE;
-moz-transition: all 0.5s ease-out;  
-o-transition: all 0.5s ease-out;  
-webkit-transition: all 0.5s ease-out;  
-ms-transition: all 0.5s ease-out;  
transition: all 0.5s ease-out;
zoom: 1;  
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-transform:  rotate(+5deg);
-moz-transform: rotate(+5deg);
border-radius: 10px;
display:inline;
float:left;
margin:0 15px 0 0;
max-height:120px;
}

#author-link img:hover  {
zoom: 1;
-webkit-transform:  rotate(0deg);
-moz-transform: rotate(0deg);
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
} 
/* End Author Link by http://bl0gger-tricks.blogspot.com */

Note:- In author link CSS codes you can edit Box Width, Box Height, Font Color, Font Name, Font Size, and also Border radius. For Color editing check Color Code Generator Tools on our blog.
That’s it your done. click on save button.

4. Go to your blogger post editor by going Blogger Dashboard>> Click on pencil icon.
and paste the following code where u want to show blog author box.

<div id="author-link"><img  alt="Author" border="0" src="https://lh3.googleusercontent.com/-wr1HKQ4h3Io/AAAAAAAAAAI/AAAAAAAAAUg/72rRzBU6Z_A/s250-c-k/photo.jpg" 
style="float: left; margin-right: 5px; width: 100px; height: 100px; " />
<b>Author - </b>Ishtiaq Ahmad is the owner of Blogger Trcisk. 
Ishtiaq  lives in Pakistan, has been blogging since 2009 and writing on Blogger Tricks since 2012.
You can find him on <a href="http://bl0gger-tricks.blogspot.com"> Blogger Tricks <a/></div>

More Answers.
Change Image link with your author image, change blogger tricks link with your author website or blog link and also change the description text with Your Text. see video below for more info about how add author link below post and check result in our HTML EDITOR. if still have any trouble please leave comment a comment below in comment section. thanks for reading our post.