July 18, 2015

How To Add Author Name And Labels Below Post Title In Blogger

|
Here is a simple tutorial on how to add your name and the blog category or label under the blog post title, as I have done this hack to my blog here before.

My name is linked to my Google Plus account and the category or Label, I have named it as Filed Under.

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.

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.

 /* 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.

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.