There are two main steps.
Step One: Uncheck (remove) Options In Configure Blog Posts
1. Go to your Blogger Dashboard.
2. Click on "Layout".
3. At the "Blog Posts" box, click on "Edit".
4. Configure Blog Posts pops up.
5. Uncheck (remove all the ticks in the small box), except "Show Share Buttons".
6. Then click on the orange color "Save" button.
Step Two: Replace Code Into Template
You need to remove two line of code and replace it with a new set of code.
1. Click on "Theme".
2. Click on "Edit HTML"button.
3. Search for this two line of code which need to be removed:
<div class='post-header'>
<div class='post-header-line-1'/>
Note: There are two sets of them in the template. <div class='post-header-line-1'/>
You need to try it out and see which of the two set of code need to be removed and replace with the code to make this customization work.
For my case, I pasted the new code at the second one and it works.
What I personally did was I did not actually remove or delete it. I just "hide" them or what they called it comment out; using this: <!--- ---->
It looks like this:
<!--<div class='post-header'>
<div class='post-header-line-1'/>-->
4. Then paste this set of new code right just below the above commented out code.<div class='post-header-line-1'/>-->
/* Add Author Name And Label Below Post Title Blogger by Kher Cheng Guan */
/* Web:https://digiztal.blogspot.com/2015/07/how-to-add-author-name-and-labels-below.html */
<div class='post-header'>
<div class='post-header-line-1'/>
<font style='font-size:11px; font-family:verdana; word-spacing:1px; color:#555555;'>
Written by: <a href='https://plus.google.com/xxxxxxxx' rel='nofollow'><data:post.author/> </a>
</font>
<font style='font-size:11px; font-family:verdana; word-spacing:1px; float:right; color:#555555;'>
Filed Under:
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + "?max-results=8"' rel='tag'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != "true"'>|</b:if>
</b:loop>
</b:if>
</font>
5. Now click the "Preview template" button to see whether it works./* Web:https://digiztal.blogspot.com/2015/07/how-to-add-author-name-and-labels-below.html */
<div class='post-header'>
<div class='post-header-line-1'/>
<font style='font-size:11px; font-family:verdana; word-spacing:1px; color:#555555;'>
Written by: <a href='https://plus.google.com/xxxxxxxx' rel='nofollow'><data:post.author/> </a>
</font>
<font style='font-size:11px; font-family:verdana; word-spacing:1px; float:right; color:#555555;'>
Filed Under:
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + "?max-results=8"' rel='tag'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != "true"'>|</b:if>
</b:loop>
</b:if>
</font>
6. If it is fine, then click the "Save template" button.
Note: Add your Google Plus link to: https://plus.google.com/xxxxxxxx. If you do not have Google +, you can delete away this line: <a href='https:// plus.google.com/xxxxxxxx' rel='nofollow'><data:post.author/>.
Or if you want you can link it back to your blog URL. (http://yourbloggerURL.blogspot.com/)
You can change the text "Written by:" to "Posted by:". It's all up to your preference.
You can also change the text "Filed Under:" to just "Categories:"
If want to make the font bigger you just change the 11px,
If you want to make the font bolder (like what I have done to mine), you have to add this extra code: font-weight: bold; after font-size:11px;
7. That is all you need to do.
*Update (January 2015):
The reason why I had my name removed below the blog title is because I need to add my name, blog name and time underneath the blog post.
I am doing this is because without having my name and blog title beneath the blog post, I have these two htom entry structured data errors:Missing required field “updated” and Missing required hCard “author.