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
1. Go to Blogger > Template > Edit Html2. Now search for ]]></b:skin>
3. Copy/Paste following code just above ]]></b:skin>
/****MBW Guest Blogger Widget*****/4. Save the template.
.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;
}
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?
1. After writing your guest post go to html section of your blog post by clicking onHTML 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.
No comments:
Post a Comment
I hope you like This Post