You might have seen those wordpress blogs having an about author widget below every blog post. Today I will show you how to add an about author widget replacing those boring “Posted by: XXXX”. The widget will show article author, author image and about author, similarly like mine below at the end of the post. The widget will also work for blogs with multiple authors. Before getting started, download your current template if anything goes wrong ahead.
1. Login to your blogger account > Design > Edit HTML.
2. Tick Expand widget Template.
3. Search for
<div class=’post-footer’>
4. And paste the following code below it:
<b:if cond=’data:blog.pageType == “item”‘>
<b:if cond=’data:post.author == “AUTHOR_NAME_1“‘>
<div style=’background: #F9F9F9; border: double #DDD; padding: 5px;’>
<div style=’font-size: 16px;’>
<b>Article By: <data:post.author/></b>
</div>
<a imageanchor=’1′ style=’float: left;’><img alt=’Blog Author’ border=’0′ src=’BLOG_AUTHOR_PIC 64×85‘/></a><br/>
<b>LITTLE DESCRIPTION ABOUT AUTHOR</b><br/><br/>
If you like this post you can follow YOUR BLOG NAME on <a href=’TWITTER_LINK‘ target=’_blank’>Twitter</a> and on <a href=’FACEBOOK_LINK‘ target=’_blank’>Facebook</a>.<br/>
Subscribe to YOUR BLOG NAME feeds via <a href=’FEEDBURNER_LINK‘ target=’_blank’>RSS</a> or <a href=’http://feedburner.google.com/fb/a/mailverify?uri=YOUR BLOG NAME&loc=en_US’ target=’_blank’>Email</a> to receive instant updates.
<br/><br/>
</div>
</b:if>
</b:if>
<b:if cond=’data:post.author == “AUTHOR_NAME_1“‘>
<div style=’background: #F9F9F9; border: double #DDD; padding: 5px;’>
<div style=’font-size: 16px;’>
<b>Article By: <data:post.author/></b>
</div>
<a imageanchor=’1′ style=’float: left;’><img alt=’Blog Author’ border=’0′ src=’BLOG_AUTHOR_PIC 64×85‘/></a><br/>
<b>LITTLE DESCRIPTION ABOUT AUTHOR</b><br/><br/>
If you like this post you can follow YOUR BLOG NAME on <a href=’TWITTER_LINK‘ target=’_blank’>Twitter</a> and on <a href=’FACEBOOK_LINK‘ target=’_blank’>Facebook</a>.<br/>
Subscribe to YOUR BLOG NAME feeds via <a href=’FEEDBURNER_LINK‘ target=’_blank’>RSS</a> or <a href=’http://feedburner.google.com/fb/a/mailverify?uri=YOUR BLOG NAME&loc=en_US’ target=’_blank’>Email</a> to receive instant updates.
<br/><br/>
</div>
</b:if>
</b:if>
5. Change the CAPS letter in blue as reqiured.
6. IMP: AUTHOR_NAME_1 should be same as in the author blogger profile or the widget won’t work. Profile can be updated from here > http://draft.blogger.com/edit-profile.g
7. If you have multiple authors copy the code in black color, italic and paste just before the last </b:if> tag . Don’t forget to update the code for multiple author.
8. BLOG AUTHOR PIC should be of the size 64×85 pixels
Example of the widget for multiple authors:
<b:if cond=’data:blog.pageType == “item”‘>
<b:if cond=’data:post.author == “AUTHOR_NAME_1“‘>
<div style=’background: #F9F9F9; border: double #DDD; padding: 5px;’>
<div style=’font-size: 16px;’>
<b>Article By: <data:post.author/></b>
</div>
<a imageanchor=’1′ style=’float: left;’><img alt=’Blog Author’ border=’0′ src=’BLOG_AUTHOR_PIC‘/></a><br/>
<b>LITTLE DESCRIPTION ABOUT AUTHOR</b><br/><br/>
If you like this post you can follow YOUR BLOG NAME on <a href=’TWITTER_LINK‘ target=’_blank’>Twitter</a> and on <a href=’FACEBOOK_LINK‘ target=’_blank’>Facebook</a>.<br/>
Subscribe to YOUR BLOG NAME feeds via <a href=’FEEDBURNER_LINK‘ target=’_blank’>RSS</a> or <a href=’http://feedburner.google.com/fb/a/mailverify?uri=YOUR BLOG NAME&loc=en_US’ target=’_blank’>Email</a> to receive instant updates.
<br/><br/>
</div>
</b:if>
<b:if cond=’data:post.author == “AUTHOR_NAME_2“‘>
<div style=’background: #F9F9F9; border: double #DDD; padding: 5px;’>
<div style=’font-size: 16px;’>
<b>Article By: <data:post.author/></b>
</div>
<a imageanchor=’1′ style=’float: left;’><img alt=’Blog Author’ border=’0′ src=’BLOG_AUTHOR_PIC‘/></a><br/>
<b>LITTLE DESCRIPTION ABOUT AUTHOR</b><br/><br/>
If you like this post you can follow YOUR BLOG NAME on <a href=’TWITTER_LINK‘ target=’_blank’>Twitter</a> and on <a href=’FACEBOOK_LINK‘ target=’_blank’>Facebook</a>.<br/>
Subscribe to YOUR BLOG NAME feeds via <a href=’FEEDBURNER_LINK‘ target=’_blank’>RSS</a> or <a href=’http://feedburner.google.com/fb/a/mailverify?uri=YOUR BLOG NAME&loc=en_US’ target=’_blank’>Email</a> to receive instant updates.
<br/><br/>
</div>
</b:if>
</b:if>
<b:if cond=’data:post.author == “AUTHOR_NAME_1“‘>
<div style=’background: #F9F9F9; border: double #DDD; padding: 5px;’>
<div style=’font-size: 16px;’>
<b>Article By: <data:post.author/></b>
</div>
<a imageanchor=’1′ style=’float: left;’><img alt=’Blog Author’ border=’0′ src=’BLOG_AUTHOR_PIC‘/></a><br/>
<b>LITTLE DESCRIPTION ABOUT AUTHOR</b><br/><br/>
If you like this post you can follow YOUR BLOG NAME on <a href=’TWITTER_LINK‘ target=’_blank’>Twitter</a> and on <a href=’FACEBOOK_LINK‘ target=’_blank’>Facebook</a>.<br/>
Subscribe to YOUR BLOG NAME feeds via <a href=’FEEDBURNER_LINK‘ target=’_blank’>RSS</a> or <a href=’http://feedburner.google.com/fb/a/mailverify?uri=YOUR BLOG NAME&loc=en_US’ target=’_blank’>Email</a> to receive instant updates.
<br/><br/>
</div>
</b:if>
<b:if cond=’data:post.author == “AUTHOR_NAME_2“‘>
<div style=’background: #F9F9F9; border: double #DDD; padding: 5px;’>
<div style=’font-size: 16px;’>
<b>Article By: <data:post.author/></b>
</div>
<a imageanchor=’1′ style=’float: left;’><img alt=’Blog Author’ border=’0′ src=’BLOG_AUTHOR_PIC‘/></a><br/>
<b>LITTLE DESCRIPTION ABOUT AUTHOR</b><br/><br/>
If you like this post you can follow YOUR BLOG NAME on <a href=’TWITTER_LINK‘ target=’_blank’>Twitter</a> and on <a href=’FACEBOOK_LINK‘ target=’_blank’>Facebook</a>.<br/>
Subscribe to YOUR BLOG NAME feeds via <a href=’FEEDBURNER_LINK‘ target=’_blank’>RSS</a> or <a href=’http://feedburner.google.com/fb/a/mailverify?uri=YOUR BLOG NAME&loc=en_US’ target=’_blank’>Email</a> to receive instant updates.
<br/><br/>
</div>
</b:if>
</b:if>
If any error have occurred while installing the widget please comment below.
{ 0 comments… add one now }