Installing Multi Author Boxes Under Posts

Installing a Multi Author Box Under a Post - This post I made at the request of a blogger friend on the Arlina Design blog to make a tutorial on how to install a multi author box on a post.

This multi author box widget serves to display google plus profile photos and short profiles of article authors. This widget has supported several authors if the managed blog has several admin or other writers (guest post).

Here's how to apply it:

1. Open blogger> Template editor> Then add the code below right after the <data:post.body /> code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''>
<img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='110' width='110'/>
</a>
</div>
<div class='author_description_container'>
<h4><a href='#' rel='author'><data:post.author/></a></h4>
<p>
<data:post.authorAboutMe/>       
</p>
<div class='authorsocial'>
<a class='img-circle1' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='img-circle2' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='img-circle3' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<div class='clr'/>
</div>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>

2. Then apply the code below just before ]]> </b:skin> or </style>

/* CSS Multi Author Box */
.authorboxwrap{background:#fff;margin:0 auto 20px;padding:20px;overflow:hidden;border:1px solid #ccc;}
.avatar-container {float:left;margin-right:20px;}
.avatar-container img{width:110px;height:auto;}
.author_description_container h4{font-weight:700;font-size:16px;display:block;margin:0;margin-bottom:2px}
.author_description_container h4 a{color:#ef4824}
.author_description_container h4 a:hover{color:#404040}
.author_description_container p{margin:0;color:#888;font-size:95%;margin-bottom:8px}
.authorsocial a{display:inline-block;text-align:center;margin-right:10px}
.authorsocial a i{font-family:Fontawesome;width:20px;height:20px;line-height:20px;padding:5px;display:block;opacity:1;border-radius:2px;transition:all .3s;}
.authorsocial a:nth-child(1) i {background:#2d609b;color:#fff;}
.authorsocial a:nth-child(2) i {background:#19bfe5;color:#fff;}
.authorsocial a:nth-child(3) i {background:#eb4026;color:#fff;}
.authorsocial a:hover:nth-child(1) i,.authorsocial a:hover:nth-child(2) i,.authorsocial a:hover:nth-child(3) i {opacity:0.90;}

3. Save the template.

Settings:

1. To bring up the description of the author, make sure you have filled out the information on the google plus profile. How to open your google plus profile page, click the about tab, open Story, fill in the information on Introduction (if you use the latest Google+ view, you can revert to the classic view to edit)

2. After doing the steps above, go back to blogger, click the layout, click edit on the blog posting widget and add a check mark to the text Show Author Profile Below the Post

3. Save the widget.