Show Guest Author Info Below Blogger Posts

Add guest-author info in blogger Due to lack of time blog authors often have to rely on Guest posters. In return we offer them with quality back links and advertisement. In order to better serve them it is important to display some info about them in a polite and attractive manner. This will encourage more and more people to write quality articles for you. We are very selective in accepting tutorials written by our readers but once the tutorial qualifies we publish their post in the best manner possible. See the example below which shows one of MBT’s Guest Author’s info ,

Update: A Dynamic version of the same widget has been published. Please visit: Display author Box automatically
 guest-author-info
To create this type of attractive box for your guest authors you would need to play with some  delicious CSS and HTML . So then Lets jump straight to the main part!

How To Create a Customized Author Info Box?





  1. Go To Blogger > Design > Edit HTML
  2. Back up your template
  3. Search for ]]></b:skin>
  4. Just above it paste the code below,
/*----------Guest Poster --------*/
.mbt-gp img {
margin:0;
border:0;
}
.mbt-gp-about {
font-size:12px;
margin:0 auto;
padding:3px;
width:580px;
background:#edf6ff;
border:#9ecfff dotted 1px;
min-height:130px;
}
.mbt-gp {
padding-top:10px;
margin:0;
font-size:12px;
float:left;
width:17%;
text-align:center;
border-right:#93C0F9 solid 1px;
}
.mbt-gp-text {
float:right;
width: 80%;
padding:5px;
text-align:left;
font:12px arial,sans-serif;
text-align:justify;
margin:0;
padding:0;
}

   5.    Save your template and jump to the next part of the tutorial.
How To Add The Author Info Box Below Guest Post?
Now whenever you publish a Guest post at your blog, simply switch to the Edit HTML Mode of your Blogger Editor. And drag to the bottom of the HTML codes and just at the end add the code below,





<div class="mbt-gp-about">
  <div class="mbt-gp"><img src="GUEST-AUTHOR-IMAGE-LINK" width="80" height="70" /> GUEST-AUTHOR-NAME </div>
  <div class="mbt-gp-text">
    <p><strong>About the Guest Author:</strong>
      <br />ADD-DESCRIPTION-ABOUT-AUTHOR-INFO-HERE </p>
  </div>
</div>
See the screenshot below to know better where to add the code,
BLOG-AUTHOR-INFO
Make sure you replace the bolded text with proper details. The image size would fit perfectly if it is 200px by 125px.
Suggestion:  To customize the colours and style of the box I recommend that you use MBT HTML Editor
You will have to add just the second code for every guest post that you publish. Once you understand on how to do it then doing it again and again would become more like a fun. I just hope you find it useful and worth trying. Take care buddies. :>

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 »

25 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Hello Mohammad,
    nice post but i want to include my name there as i am the author so what should i do?
    like wise it should display the information about the author it self.

    ReplyDelete
  2. Hey Mohammad,
    from last couple of days i have started using windows live writer but sometimes error happen that in window live writer in preview mode it shows perfectly but in original post the margin and all change.recently i have posted on post using "Code Snippest Plugins" of Windows Live Writer,it output was perfect in preview mode of Windows Live Writer but in actualy post there was wast difference.
    look at the following link:

    In Blog Post : http://i960.photobucket.com/albums/ae87/jeetdholakia/csscodeerror.jpg

    In Window Live Write : http://i960.photobucket.com/albums/ae87/jeetdholakia/inWLW.jpg

    please help me because as far as i know you also use Windows Live Writer.

    ReplyDelete
  3. @Dholakia

    To add yourname below every post then you will have to add the above code just below data:post.body inside your blogger template. Find this word after you have check the "Expand Widgets templates"

    For your second query related to WLW.
    The best I can say is that don't use any plugins or code snippets provided by WLW because they are often not compatible with blogger.

    ReplyDelete
  4. Thaks a lot mohammad,
    bro you are the best yar...
    thank you.

    ReplyDelete
  5. Hello,
    Mohammad I am using your template but i am facing one problem that i have restricted 4 post on home page and totally i have 5 post up till now but the template is not displaying "Next","Home","Previous" button,so please help me.

    ReplyDelete
  6. @Dholakia

    Its your generosity brother. Thanks :>

    Buddy my old templates have this problem and I have received many complains regarding it. I will try to fix them when I have time. Which template are you using btw?

    ReplyDelete
  7. Ok Mohammad,
    i am using your Church Theme Template.so do check out and let me know,take your possible time.
    Thank You.

    ReplyDelete
  8. Hi Mohammed
    I am sorry I couldn't understant.Why do we add first code?
    for example I write the post and I add author info below post manually.
    POST TİTLE
    ------------
    --------
    ---
    ABOUT THE AUTHOR
    no need the first code I think or what will change when we add first code.

    ReplyDelete
  9. @computer tricks
    You will have to create a different one for each author.

    @savvy
    Welcome pal

    @sadr
    The first code is responsible for styling the box with color and fonts else it will look dull and grey.

    ReplyDelete
  10. Hi Sir Mohammad Mustafa Ahmedzai. Thank You very much for your unselfish help and for sharing your tips and tricks. These are very useful. It serves as our quick guides in case we're having difficulties with our themes and gadgets. Hope to contribute here someday. Thanks.

    ReplyDelete
  11. Thanks You So Much MR.MBT, You Are Awesome.No One Is Better Than You.

    ReplyDelete
  12. Assalammualikum, @mustafa: can you tell me how to make background behind the script coding like yours, thanks for the answer!!!

    ReplyDelete
  13. sir i want to include my picture what to do??

    ReplyDelete
  14. Not working, Its showing that your HTML is not well formated and so on. and more than one widget was found with id: Navbar1. Widget IDs should be unique. Plz help.

    ReplyDelete
  15. Not working, showing the following error.

    Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: The markup in the document following the root element must be well-formed.

    Plz help.

    ReplyDelete
  16. Great Post Man Keep It Up

    ReplyDelete
  17. Thank you!! Very much appreciated and I know my guest authors will appreciate it too.

    ReplyDelete
  18. Sir i have a problem ..
    I have enabled automatic athor info below every post..
    But i have several guest post writers.. So when i dispaly their info below their post then My Info and the Guest Info both Shows..
    How can i hide automatic author info in some posts..
    Thanks in Advance......

    ReplyDelete
  19. @Mohammad Mustafa Ahmedzai

    its show [ Error parsing XML, line 1463, column 3: The element type "div" must be terminated by the matching end-tag "". ] but all div tags end correctly... how to fix this error... its annoy me. help

    ReplyDelete
  20. I want to tell you that if you post this code
    <div class="mbt-gp-about">
    <div class="mbt-gp"><img src="GUEST-AUTHOR-IMAGE-LINK" width="80" height="70" /> GUEST-AUTHOR-NAME </div>
    <div class="mbt-gp-text">
    <p><strong>About the Guest Author:</strong>
    <br />ADD-DESCRIPTION-ABOUT-AUTHOR-INFO-HERE </p>
    </div>
    </div>
    in post template so you don't need to add it on each post manually. For doing it just go at Settings >> Post and comments and past it in Post Template Box and click on save.
    Now when you go at New post option so you can see this code automatically in Edit Html option.

    ReplyDelete
  21. I want a customized and designed box.

    ReplyDelete