How to display Author profile or Author Bio under each blog post ~ SAMPATKUMARI'S Blog "PARISHKAR"

How to display Author profile or 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 -
How to display Author profile or Author Bio under each blog post
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.

If you want to read more on Robots.txt-Do I really need it for my Website/Blog Please click this link.
If you want to read more on How to customize Navigation Bar of Third Party Blogger Template Please click this link.
If you want to read more on HTML Editing- How to Add New Page, in Blogger Navigation Bar Please click this link.



0 comments:

Post a Comment