April 8, 2011

Widgets

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 »

36 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. great post man !!!!!!!!!!!!!

    ReplyDelete
  2. 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
  3. 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
  4. @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
  5. Thaks a lot mohammad,
    bro you are the best yar...
    thank you.

    ReplyDelete
  6. 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
  7. @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
  8. Ok Mohammad,
    i am using your Church Theme Template.so do check out and let me know,take your possible time.
    Thank You.

    ReplyDelete
  9. Hi, what if i have different guest authors and i want their info to show below their post automatically.

    ReplyDelete
  10. 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
  11. @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
  12. 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
  13. Thanks You So Much MR.MBT, You Are Awesome.No One Is Better Than You.

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

    ReplyDelete
  15. thanx

    http://internetricks4u.blogspot.com/

    ReplyDelete
  16. Hello,i found your site through search,yours site is excellent and a nice website...

    The contents are nice &will grow higher in future...

    thanks,

    http://www.reifen.ms/

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

    ReplyDelete
  18. i found your site through search, yours site is a nice and excellent website.. contents are nice.. will grow higher in future


    http://winterreifen.ms/

    ReplyDelete
  19. 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
  20. 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
  21. Love Your Posts Mustafa Ahmadzai Jana Your Originally From Afghanistan And Pashtun So Proud On You Your Doing Very Well I'm Always Following Your Blog And Really Love It Manana Staso Da Zahmat Na :)

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

    ReplyDelete
  23. 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
  24. @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
  25. 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
  26. I want a customized and designed box.

    ReplyDelete

Support Us

We have educated thousands of bloggers online and made several people Make a living Online. If our Tutorials have really helped you a little, then kindly show your love by using the badge below:-

Blogger Widgets

or try a Beautiful Banner

Widgets

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!

About The Author

Hi! I am Mohammad, a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer. STC Network was founded in 2008 and it is currently the country's first registered company of Professional Bloggers. Read More..

Recipes

SEO Affiliate Marketing Social Media

Make Money Online Web hosting

Blogging Tips Web Designing

Plugins and Widgets Blogging Ethics

Subscribe

Recent Comments

Popular Series

Powered by:

My Blogger Tricks © 2013. All Rights Reserved | Contact |