Awesome Guest Author Info Widget For You Blog

Awesome Guest Author Info Widget For You 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.

Editing Code For Guest Author Widget

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;

}

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.

How To Add Guest Author Bio Inside Blog Post?

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.

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

If you have any query or have problem implementing this widget to your blog leave a comment below i will be happy to help you out.