Add guest author info widget to blogger

Hi great visitors and subscribers of waplordcrib
Here is another great tutorial for you, for those who accept guest posts and for blogs with more than one author    this is for you

Guest posts plays important role on your blog when you don't have enough time. But no one serves you when they get nothing in return... So to return their favour... You need this tutorial so that the guestwritter bio along with a link to their blog, website or any other social links like Google+, twitter etc known to your widerange visitors

Functions of this widget

• it can be used to display guest writer info 
• it can be used for author profile
• it can be used to display author profile on blog with more than one author 

To display guest blogger profile|follow this steps

===)>  login to your Blogger dashboard

===)>  go to template and then click customise

===)> template designer will open.. Click advance and then click on add CSS

===)>  paste the below code inside the box

/****MBW Guest Blogger Widget*****/
.mbw-author-box {
background: #f6e4db;
margin: 5px 0 20px 0;
padding: 12px;
border: 1px solid #e3e3e3;
border-radius:5px;
box-shadow:2px 2px 1px #e3e3e3;
overflow: hidden;
color: #3b3b3b;
font-size: 14px;
font-family: Arial, Tahoma, Verdana;
line-height: 1.6em;
}
/****www.waplordcrib.com*****/
.mbw-author-box p {
margin: 0px;
padding: 0px;
}
.mbw-author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 5px;
border: 3px solid #e3e3e3;
}

===)> Then apply at the top and make sure it's applied


The major part is done

 now every time you publish a guest post just follow this simple steps given below to add guest author widget.

===)>  On your post editor, switch to the HTML tab

Select where you want the guestwritter  info to be whether at the beginning of the post, in the middle or at the end

===)> paste this code inside

  <div class="mbw-author-box">
<img alt="author-pic" height="90" src=" IMG" width="90" /> <strong>About Guest Blogger</strong><br /> Here Goes Details about your guest author</div>

To customise

• Replace the IMG with the guestwritter  image url 
• Change Here Goes Details about your guest author to the details about your guest author.

        To use it has author profile 

• Replace the about guest author to anything you like   eg about admin 

To make it appear automatically below all posts

• Go to Settings ===>Posts and comments
• Click post template and paste the code inside (you should have make the changes required) 

Sometimes it may obstruct you when you want to write a post

Just click on the HTML Section and type anything at the beginning of the code... Then separate the code from the one you wrote.. Now go back to the compose section and keep typing


Feel free to comment  if you enjoyed the tutorial or you had any problems doing it
I'm here to help you out

About author
Crystalblogger is a professional blogger,a skillful Web designer and a freelancer ,he offers services based on blogging and Web designing you can contact him here at info@waplordcrib.com