How to Install Multi-Author Bio Box Widget in Blogger (In 5 Simple Steps)

 Today in this article we are going to give an explanation for how you can add Beautiful Multiple Guest/Author Bio's Widget Box inner the blogger website. Multi-Author box will be seen simply at the cease of the article/posts or you can say simply above the put up the footer. Nowadays there are lot's of trick to deploy a couple of author gadget plugin in blogger template however we have tried our pleasant to make it as a whole lot simple as possible hope you guys will like it. Benefits of multi creator container widget are like if your website's or weblog have multiple author's admin's and they all write the content so that time we need a couple of writer field to show the Bio of the author. 

How to Install Multiple Author Biography Widget in Blogger Templates

There Are the Following Steps:-

Step 1. Log in to your Blogger account and Go to your blogger dashboard.

Step 2. Now search for the following <data:post.body/> tag and copy the below code snippet and past it just after the <data:post.body/>tag.

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='bsd-author-box-wrap'><div class='bsd-author-box-full'><div class='boxbsd-avatar'><a href=''><img class='author-image' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='111' width='111'/></a></div><div class='author-des-bsd-cntr'><h4><a href='#' rel='author'><data:post.author/></a></h4><p><data:post.authorAboutMe/>     </p><div class='authorsocialprofile'><a class='img1' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a><a class='img2' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a><a class='img3' 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>

Step 4. Now Search For the ]]></b:skin> or </style> and copy the below CSS code and paste it just Befor/Above.

/* Multiple Author Box CSS By www.BloggersStanD.com */.bsd-author-box-wrap{background:#fff;margin:0 auto 20px;padding:20px;overflow:hidden;border:1px solid #ccc;}.boxbsd-avatar {float:left;margin-right:20px;}.boxbsd-avatar img{width:110px;height:auto;}.author-des-bsd-cntr h4{font-weight:710;font-size:15px;display:block;margin:0;margin-bottom:1px}.author-des-bsd-cntr h4 a{color:#FF6600}.author-des-bsd-cntr h4 a:hover{color:#2C2C2C}.author-des-bsd-cntr p{margin:0;color:#5F5F5F;font-size:95%;margin-bottom:7px}.authorsocialprofile a{display:inline-block;text-align:center;margin-right:10px}.authorsocialprofile a i{font-family:Fontawesome;width:20px;height:20px;line-height:20px;padding:5px;display:block;opacity:1;border-radius:2px;transition:all .3s;}.authorsocialprofile a:nth-child(1) i {background:#2d609b;color:#fff;}.authorsocialprofile a:nth-child(2) i {background:#19bfe5;color:#fff;}.authorsocialprofile a:nth-child(3) i {background:#eb4026;color:#fff;}.authorsocialprofile a:hover:nth-child(1) i,.authorsocialprofile a:hover:nth-child(2) i,.authorsocialprofile a:hover:nth-child(3) i {opacity:0.90;}

Step 5. Now save you Template 

How to Display Author Information / Description in Widgets

Step 1. Visit your google plus profile https://plus.google.com and that click on About Section and now click on add an introduction look below for example:

Step 2. Now if you have completed the above step, you need to proceed to step 2nd i.e is in your blogger. Open your blogger Dashboard->Layout  then go to main area and  check show author profile below posts look below for example:

Step 3. After Clicking on Show author profile below post save your widget...Done!

I hope you enjoy this post and the photos. 

Simple Stylish Author Profile Box for Blogger

 This post is about placing an author box below each Blogger post. Placing an author/administrator at the bottom of each post will increase your interaction with your readers as new readers can easily see your social profiles and communicate with you. This is the reason why this tool is ideal for increasing blog traffic in general.

Benefits Of This Widget:

·         Looks simple which can be used in every Blogger template

·         Can customize own author Image

·         You can also place the links for all social networks like Twitter, Facebook, and Google+.

How to install :

·         Go to Blogger Dashboard

·         Click on template

·         Click on edit HTML

·         Press cntl+f and find the code ]]></b:skin>

·         Now place the following code above it

.author_info { float: right; width: 573px; padding: 10px; border: 1px solid #e0e0e0; margin-bottom: 15px; margin-top: 15px; background: #eee; } .author_info h3 { margin-bottom: 10px; } .author_photo { float: left; margin: 0 0 0 10px; } .author_photo img { margin-right: 10px; border: 1px solid #e0e0e0; }

Again search for <div class=’post-footer-line post-footer-line-1′> and place the following code below it and then click on save.

<b:if cond=’data:blog.pageType == &quot;item&quot;’>

<div class=’author_info’>

<div class=’author_photo’>

<img alt=’author’ src=’http://lh3.googleusercontent.com/-AEjwZp9w37s/UNSIMPc2PcI/AAAAAAAAA7M/JjHAI3AjFFI/h120/images.jpeg‘/></div>

<h3>About the Author</h3> This article is written by: <b>YourName</b> – who has already written <b>30</b> articles for <a href=’http://sanjaychoubey.com/‘>YOUR-BLOG-NAME</a> Your Name . Catch him on <a href=’http://twitter.com/ersnjy‘ target=”_blank” rel=”no follow”>Twitter</a>, <a href=’http://www.facebook.com/a1bloggerseo’ target=”_blank” rel=”no follow”>Facebook</a> or <a href=’your e mail ID‘>email</a> him <br> </br> <br> </br>

YourName&#39;s <a href=’http://sanjaychoubey.com/’>Blogger tips</a><br style=’clear:both;’/>

</div>

</b:if>

You need to change the URLs as shown in red, along with your URLs. You also have to change the blue words and phrases with your own colors. Just customize it as per your choice, and click Save. You will see the changes made. A beautiful author box also appears at the bottom of every Blogger post. Thanks for giving me your time. take care of yourself.!