How to Display Tags Above the Title in Blogger: A Step-by-Step Guide

To display the tags above the title in your Blogger blog posts, you can follow these steps:

Go to your Blogger dashboard and select the blog where you want to make the changes.

Click on the "Layout" option from the left-hand menu.

Find the "Blog Posts" section and click on the "Edit" button.

In the "Configure Blog Posts" popup, you should see a checkbox labeled "Date Header". Check this box to enable the date header for your blog posts.

Next, add the following code to the "Date Header Format" field:

<b><data:post.labels/></b><br/><data:post.dateHeader/>

Click "Save" to apply the changes.

This code will display the tags (taq) above the title in your blog posts. You can customize the appearance of the tags by modifying the HTML and CSS code.

I am unable to modify date header format field

If you are unable to modify the "Date Header Format" field in the "Configure Blog Posts" popup, it's possible that your Blogger theme does not support this customization option.

In that case, you can use the following steps to add the tags (taq) above the title in your blog posts:

Go to your Blogger dashboard and select the blog where you want to make the changes.

Click on "Theme" from the left-hand menu.

Click on "Edit HTML".

Find the code for your post template by searching for the following code:

<b:includable id='post'>

Below this code, add the following code:

<b><data:post.labels/></b><br/><h2 class='date-header'><data:post.dateHeader/></h2>

Save your changes.

This code will display the tags above the title in your blog posts. You can customize the appearance of the tags and date header by modifying the HTML and CSS code.

I want to show labels

To show labels (tags) in your Blogger posts, you can use the following steps:

Go to your Blogger dashboard and select the blog where you want to make the changes.

Click on "Theme" from the left-hand menu.

Click on "Customize".

Click on "Advanced" from the left-hand menu.

Click on "Add CSS".

Paste the following code into the CSS box:

.post-footer {

  margin-top: 20px;

}

 

.post-footer .post-labels {

  margin: 0;

  padding: 0;

  list-style: none;

}

 

.post-footer .post-labels li {

  display: inline-block;

  margin-right: 10px;

  margin-bottom: 5px;

  background-color: #f1f1f1;

  padding: 5px 10px;

  font-size: 13px;

  border-radius: 2px;

}

 

.post-footer .post-labels li a {

  color: #333;

  text-decoration: none;

}

 

.post-footer .post-labels li a:hover {

  color: #fff;

  background-color: #333;

}

Click on "Apply to Blog" to save your changes.

This code will add a section below your blog posts that displays the labels (tags) for each post. You can customize the appearance of the labels by modifying the CSS code.

I want to show above the title

To show labels (tags) above the title in your Blogger posts, you can follow the steps below:

Go to your Blogger dashboard and select the blog where you want to make the changes.

Click on "Theme" from the left-hand menu.

Click on "Edit HTML".

Find the code for your post template by searching for the following code:

<b:includable id='post'>

Below this code, add the following code:

<b><data:post.labels/></b><br/><h2 class='date-header'><data:post.title/></h2>

Save your changes.

This code will display the labels (tags) above the title in your blog posts. You can customize the appearance of the labels and title by modifying the HTML and CSS code.

How I do search of code

Read this article

The above code is showing title not labels

the following steps to display the labels above the title in your Blogger posts:

Go to your Blogger dashboard and select the blog where you want to make the changes.

Click on "Theme" from the left-hand menu.

Click on "Edit HTML".

Find the code for your post template by searching for the following code:

<b:includable id='post'>

Below this code, add the following code:

<b><data:post.labels/></b><br/><h2 class='date-header'><data:post.title/></h2>

Save your changes.

This code should display the labels (tags) above the title in your Blogger posts.

It is still showing title 

Please try the following steps to display post labels above the post title:

Go to your Blogger dashboard and select the blog where you want to make the changes.

Click on "Theme" from the left-hand menu.

Click on "Edit HTML".

Find the code for your post template by searching for the following code:

<b:includable id='main'>

Below this code, add the following code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

    <b:loop values='data:post.labels' var='label'>

        <a expr:href='data:label.url' rel='tag'><data:label.name/></a>

    </b:loop>

    <h2 class='date-header'><data:post.title/></h2>

</b:if>

Save your changes.

This code should display the post labels above the post title in your Blogger posts. 

I did but it does not work

Try the following steps to display post labels above the post title:

Go to your Blogger dashboard and select the blog where you want to make the changes.

Click on "Theme" from the left-hand menu.

Click on "Edit HTML".

Find the code for your post template by searching for the following code:

<b:includable id='post'>

Below this code, add the following code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

    <b:loop values='data:post.labels' var='label'>

        <a expr:href='data:label.url' rel='tag'><data:label.name/></a>

    </b:loop>

    <h2 class='date-header'><data:post.title/></h2>

</b:if>

Save your changes.

This code should display the post labels above the post title in your Blogger posts.

It still doesn't work. 

Is the failure not due to the fact that the labels of each post are appearing below each post?

To display post labels above the post title in your Blogger posts, you can try the following steps:

Go to your Blogger dashboard and select the blog where you want to make the changes.

Click on "Theme" from the left-hand menu.

Click on "Edit HTML".

Find the code for your post template by searching for the following code:

<b:includable id='post'>

Locate the code for the post title, which should look something like this:

<h3 class='post-title entry-title'>

  <a expr:href='data:post.url'><data:post.title/></a>

</h3>

Add the following code directly above the post title code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

  <b:loop values='data:post.labels' var='label'>

    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>

  </b:loop>

</b:if>

Save your changes.

This code should display the post labels above the post title in your Blogger posts.

It worked but labels do not appear on front page

To display the post labels above the post title on the front page of your Blogger blog, you need to modify the code for the homepage post template.

Here are the steps to display post labels above the post title on the front page of your Blogger blog:

Go to your Blogger dashboard and select the blog where you want to make the changes.

Click on "Theme" from the left-hand menu.

Click on "Edit HTML".

Find the code for your homepage post template by searching for the following code:

<b:includable id='main' var='top'>

Below this code, find the code that displays the post title. It should look something like this:

<h2 class='title'><a expr:href='data:post.url'><data:post.title/></a></h2>

Add the following code above the post title code:

<b:if cond='data:blog.pageType == &quot;index&quot;'>

  <b:loop values='data:post.labels' var='label'>

    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>

  </b:loop>

</b:if>

Save your changes.

This code should display the post labels above the post title on the front page of your Blogger blog.