Display your Author profile, Author Bio under each blog post

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 Template

·         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; }

The text in red are color codes and you can change as per your choice. You can click here for color code help if needed.

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 == &quot;item&quot;’><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
Your Blog Title/Name

You can redefine your avatar size

That’s all.

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.

एक टिप्पणी भेजें

Please Donot spam

और नया पुराने