Auto Guest Author Box For Blogger

Guest posting plays an important role in upbringing and success of your blog. Guest posting shows the repute of your blog that how much people are interested in writing for your blog. Guest posting leaves a great impression on the visitors about your blog so that they get curious and want to know that why people are writing for your blog which increases the importance of your blog and is also excessive for your blog success. Guest posting can also be a handy tool from the TRAFFICpoint of view. It may also play a vital role especially when you are immovable due to certain activities. Google also facilitate it’s users by providing the alternatives like Guest Blogging/Posting while you are using Blogger. You might have seen in different blogs where the Guest Blogging/Posting is enabled, after each post there is GUEST AUTHOR box, which contains the Profile Picture and some basic BIO of the guest author. In WordPress, you can easily install the Guest Author Box below the blog posts by using a PLUGIN but in Blogger you need to code it. This tutorial can help you easily install the “Guest Author Box”under each blog post in Blogger easily.

Add Authors To Blogger:

To enable Guest posting you first need to invite authors to your blog which means your blog can be authored by different authors. All you have to do is to send the people invitation, and once they accept your invitation they will be able to start posting at your blog.

• Read Here, How To Add Multiple Authors To Blogger.

How To Add Auto Guest Author Box In Blogger?

To add “Auto Guest Author Box” in Blogger, follow the steps below:

1. Log in to your Blogger Dashboard.

2. Go to Template > Backup. (Click Here To See How)

3. Click “EDIT HTML”.

4. Inside “HTML EDITOR”, press “CTRL+F” and find <b:skin> tag. Click  ► to expand the code.

5. Copy & paste the following CSS Styles, just above/before </b:skin>tag.

/*--- Guest Author Box Styling Starts ---*/
.about-author
{
width : 98%;
overflow : hidden;
margin:10px 0px;
border:0px;
}
.about-author img
{
width:70px;
padding:3px;
border:1px solid #ddd;
margin:0px 5px 0px 0px;
}
.about-author h3
{
font-family:verdana !important;
font-size:18px !important;
margin:9px 0px !important;
color:#666666 !important;
border-bottom:2px solid #666 !important;
border-top:0px !important;
}
.about-author p
{
margin:0px;
text-align:justify;
color:#666;
}
/*--- Guest Author Box Styling Ends ---*/ 

Note:-To change the color of the text “ABOUT AUTHOR”, edit color: #666666;

6. Next inside “HTML EDITOR”, press “CTRL+F” and find <data:post.body> tag.

7. Copy & paste the following code, just below <data:post.body> tag.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;AUTHOR NAME&quot;'>
<div class='about-author'>
<h3>
About Author:
</h3>
<img align='left' src='IMAGE LINK OF AUTHOR'/>
<p>WRITE AUTHOR BIO HERE</p>
<p>Follow Him @ <a href='BLOG LINK' target='_blank'>BLOG NAME</a> | <a href='FACEBOOK LINK' rel='nofollow' target='_blank'>Facebook</a></p>
</div>
</b:if>
</b:if>

Note:-

A. Replace the “Bolded Parts” in the above code with your “Guest Author” appropriate information.

B. Replace “AUTHOR NAME” with exact the name of your Guest Author’s Account Name, otherwise, it will not appear in the box. Check the example screenshot below:

8. Finally click “Save Template”.

                                               

That’s all set, visit any of your “Guest Blog Post” to see the Guest Author Box with Profile Picture and BIO.

That’s All.

Need Help?

Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. If you need any help, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Peace, blessings & cheers.! :)