Blogger.com collects the data of the author from your blogger profile in case you haven’t connected your Google+ account with Blogger. If you haven’t connected your profile then you can change the name of your blogger account. Whenever that author will publish a post, this display name will appear as the name of the author.
The very first thing you need to do is to login into your Blogger account, after logging in go to Template >> Edit HTML. Now in the blogger template editor search for <data:post.body/> tag and just above it paste the following piece of coding. If you want to display the author name at the end of your post content then, paste the code below <data:post.body/> tag.
<span class='author_mbl'>By: <a expr:href='data:post.authorProfileUrl'> <data:post.author/></a> </span>
To give a bit of styling you can simply paste the following CSS coding in the style sheet (Quick tip: Paste it just above ]]></b:skin> tag). You can customize it according to the nature of your template, following is the very basis CSS coding.
.author_mbl a { text-decoration:none;}
.author_mbl a:hover {text-decoration:underline;}
.author_mbl { float:left; color:#555;}
Congratulations: Now save your template by pressing the orange “Save Button” present at the very top of your screen. Excellent, now go and check your site the results. If you have followed our step correctly, then the author names of your posts would appear just fine.
We hope this post has helped you in learning how to display author name in Blogger Posts. Though, this technique is extremely simple, but few folks find it difficult to understand. This post might also help template developers who want to automate the author names in their templates. Do let us know what are your thought about this technique, if you are already using it this piece of code then share your quality opinions with us.
Great and easy way to show author name....
ReplyDeleteThanks syed and i applied it on my blog.
Thanks for sharing!
ReplyDeletenot working on my both blogs. plz tell me reason.
ReplyDeleteurl is below
www.donated4u.blogspot.com
www.shaheeninstitute.blogspot.com
Search for this in 1st step
Delete<div class='post-header'>
And paste the code below it.
I will try it
Delete