Display Guest Author Box Automatically in Blogger

Guest posting saves great time when you are stuck in exams or engaged in some other off-side work. Google Blogs provide the best blogging experience when it comes to ease and comfort. The user interface and over all control options are extremely easy to set and play with. Unlike wordpress where you can display author box using a plugin, in blogger we will have to code things ourselves. Displaying author info at the bottom of the posts can be done in two ways. The first method as you may know is pasting the author info box manually below each post yourself. The problem with this method is of course precious loss of time. Manually adding an author box below each post could turn out to be a headache, therefore an automatic way would be the best. You have seen the above author box displaying introduction of Qasim below all his posts. This box appears automatically below each post published by his shared blogger account. We used conditional tags to make it work and its really just two lines of code, the rest is all design. Lets understand few things before jumping straight at the tutorial

 

Which Method suits you: Automatic or Manual?

If you are the only author at your blog and you don't receive frequent posts from one single author and rather receive guest posts from different authors then you should go with the manual method. This wont slow your blog load time because you will be adding the box for each author under his or her post instead of adding several boxes for each author  inside the template.

And if there are more than one author at your blog like ours then you should better go with the dynamic way. Here you will have to add the box just once inside your template and it will display automatically below all posts published by that guest or co-author.

Create Author Accounts in Blogger

You can invite up to 100 Team members per blog. Which means that your blog can be authored by 100 different people. All you need is to send them an invitation by going to Settings > Basics > Permissions . The invitee will accept the invitation and he can thus start posting on your blog with a separate dashboard and limited editing options. you can choose to grant him admin privileges also. To learn more when and how to grant admin rights, please read:

• How To give Admin rights?

How To Add Author Box Manually?

All you need is the author's profile picture, two lines of bio and then the following tasty tutorial that explains all:

• Show Guest Author Introduction Below all posts

How To Add Author Box Automatically?

The steps are kept simple so you will find it really interesting to apply.

1. Go to Blogger > Template
2. Backup your template
3. Click Edit HTML
4. Click Proceed
5. Then Click Expand Widget Templates
6. Search For ]]></b:skin>
7. Just above it paste the following CSS code,

/* MBT Code For Author Box */

.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;
}

To change color of the text "About author" edit     color:#666666

8.   Next Search for data:post.body

    9.  Just below it paste the following code:

<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>

All steps are self explanatory. you just need to fill the bolded parts with correct requirement details. There is one thing that needs care.

• Replace AUTHOR NAME with the account name of the guest author. This name should match exactly the name appearing on his posts. See the screen shot below:

 

       10.   Finally save your template and you are all done!

Visit your blog and check the post of any of your co-authors. You will find his bio appearing just perfectly at the bottom of all articles published by him. You can even create an author box for yourself by simply replacing the AUTHOR NAME , profile pic and bio to that of yours.

Need Help?

This tutorial should not trouble anyone for sure but incase you needed help in customization then feel free to post your queries. Let me know whether or not this little tut solved any of your problems. Peace and blessings pals. :)

SHARES

Share

Pin it

Tweet

Share

Share

Print

Buffer

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

Mohammad 5/16/2012