Add Guest Author Info Widget For You Blogger Blog

Guest blogger plays important role on your blog when you don't have enough time. But no one serves you when they get nothing in return. Well you can reward your precious guest blogger by displaying their bio along with a link to their blog, website or any other social links like Google+, twitter etc. In this post i will share with you a widget which will allow you to display author bio below their post as one show in above image.

1. Go to Blogger > Template > Edit Html
2. Now search for ]]></b:skin>
3. Copy/Paste following code just above ]]></b:skin>

    /****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.myblogggersworld.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;
    }

4. Save the template.
5. 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.

Add Guest Author Bio Inside Blog Post?

1. After writing your guest post go to html section of your blog post by clicking on HTML beside Compose as show in the image below.

2. Now paste the following code at the end of html code (Below the last html Tag in the HTML Section)

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

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

Share this post