October 2, 2024

Textual description of firstImageUrl

How to link author name to the custom page in Blogger

|

Find out how to link the author name to a custom page in Blogger.

It can be your bio, profile or about page. 

The link is clickable, and it takes you to any of the specific custom page, which you want to link it to.

To do that, you need to go to the vcard code section in the HTML template, to replace with a new set of code.

There are two sets of vcard code in Blogger HTML template, and you have to replace both of them.

This is another one of the DiGiztal Blogspot Blogger Tips series.

Digiztal Blogspot Blogger Tips

Link author name to custom page in Blogger

Now let me show you step-by-step how to modify the author's name link: 

1. Go to your Blogger Dashboard.

2. Click on Theme in the left sidebar.

3. Click the down arrow button next to the word "CUSTOMIZE".

4. A context menu opens, click "Edit HTML".

5. Locate the original code section that displays the author's name. 

6. Press "Ctrl" and "F" keys and the search box pops up inside the HTML code page.

7. In the search box, type: <div class='post-footer-line post-footer-line-1'>, then press the "Enter" key.

8. Below this line, you should see this set of code:

<span class='post-author vcard'>

                <b:if cond='data:top.showAuthor'>

                  <b:if cond='data:post.authorProfileUrl'>

                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>

                      <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>

                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>

                        <span itemprop='name'><data:post.author/></span>

                      </a>

                    </span>

                  <b:else/>

                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>

                      <span itemprop='name'><data:post.author/></span>

                    </span>

                  </b:if>

                </b:if>

              </span>

9. Delete and replace it with this new set of code:

<span class='post-author vcard'>

    <b:if cond='data:top.showAuthor'>

        <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>

            <a href="https://yourblog.blogspot.com/p/about.html" rel='author' title='About Page'>

                <span itemprop='name'><data:post.author/></span>

            </a>

        </span>

    </b:if>

</span>

NOTE: Replace https://yourblog.blogspot.com/p/about.html with your actual URL of your profile or about page. The title= 'About Page' change it to whatever you called your custom page (bio, profile, etc.).

10. Click the "Save" icon (Floppy disk) in the upper right corner.

11. Now find the second set of vcard code, and again delete it.

12. Then replace it with the new set of code as shown in #9 above.

13. Similarly, click the "Save" icon.

Now the Blogger author name is clickable, and it would take you to the particular custom page that you have linked it to. 

It is just like my name below, which you can click and it links to the About page.