How to display Author profile or Author Bio under each blog post
Blogger has a feature “Author profile” or “Author Bio” by default
to show your name and profile photo with some introduction under each blog post
but the blogger’s default feature will work only if you are using the blogger’s
default template, otherwise it will not work. BY default Blogger will displays
only the name of post author with link to the blogger blog author profile if
you are using a custom blog template but you can make your own arrangements to
display “Author profile” or “Author Bio” under each post my editing your blog
Template’s HTML document. The simple procedure is given below -
|
|
Display Author profile or Author Bio under each blog post
|
1. Login to your blogger account.
2. Backup your blog and template.
Now the complete action will be in two steps. In step one we will
define the layout of “About the Author” by adding a small code of CSS. The
procedure is as under -
· Click Edit HTML and open your HTML Document
· Click inside the open HTML Document
· Click Ctrl+F to open HTML search box
· Copy and paste ]]></b:skin> in the HTML search box and press Enter key. The code will be highlighted.
Now just above the code, add the code given below –
.author-box { background: #F7F7F7; margin: 20px 0 40px 0; padding: 10px; border: 1px solid #E6E6E6; overflow: auto; } .author-box p { margin: 0; padding: 0; } .author-box img { background: #FFFFFF; float: left; margin: 0 10px 0 0; padding: 4px; border: 1px solid #E6E6E6; }
You can change margins and padding as per your choice.
Now the procedure of defining the lay out of “About the Author” is complete.
Save the Template but do not exit yet.
Next step is to customize the “About the Author” area. For it we need to add a small css code carefully edited as given.
· Click inside the open HTML Document
· Click Ctrl+F to open HTML search box
Copy and paste <div class=’post-footer-line post-footer-line-1’/> in the HTML search box and press Enter key. The code will be highlighted. Now paste the code given below arefully edited below this highlighted line <div class=’post-footer-line post-footer-line-1’/>
<b:if cond=’data:blog.pageType == "item"’><div class=’author-box’>
<p><img alt=” class=’avatar avatar-70 photo’ height=’70’ src=’paste the link to your Photo here‘ width=’70’/>
<b>Your name as you want to appear</b><br/>
<div style=’text-align: justify; font-family: verdana; color: rgb(0, 0, 0);’>Write in brief About Yourself here<br/>
<a href=’ Paste here your Twitter Link ‘>Follow Me on Twitter(you can modify this text)</a>
<p style=’margin:-8px 0′><br/><center>
<a href=’Your Blog home page Link‘ style=’text-decoration:none;font-size:70%;’>Your Blog Title/Name</a>
</center> </p></div></p> </div> </b:if>
Before adding this code to your template edit the code carefully and make the following changes.
’paste the link to your Photo here-
Your name as you want to appear
Write in brief About Yourself here
Paste here your Twitter Link
Follow Me on Twitter(you can modigi this text)
’Your Blog home page Link
You can redefine your avatar size
Note – Adding a comment before and after an HTML code in the beginning and at The end of the code will facilitate to locate the code for further editing.
Safely save your template and exit to check the result.
author bio box, simple author box, blog post author, wordpress
author box without plugin, wordpress author byline, How do I add a bio box in blog,
how to show author name in blog post, Where do you put the author in a blog
post, How do I show the post author name in blog post.
