Web Hosting

Blogger : How to change Author Name after linking Blogger profile to Google+ profile

Last updated: July 19, 2013

If you decide to link your Blogger Profile to your Google+ profile, be aware that Author Name of your posts will also get replaced with your Google+ profile. If you do not like this for whatever reason there is a way to change this behavior by modifying Blogger Template. For Templates using Simple Views, solution will require modification of the template code. This doesn’t seem to work for templates using Dynamic Views, so for those templates I will show you a workaround using Javascript.

Before we start I need to warn you that the modification discussed here will change Author name to all your posts in the blog, so this tutorial is for those blogs with a single Author.

Anyway, here are the steps you need to do:

  1. As always when doing any modifications to the blogger template, your first step should always be to backup your current template . Go to Dashboard > Template and on the top right corner click on Backup / Restore button and choose Download full template.
  2. Still on the Dashboard > Template click on Edit HTML button. Code for your template will show up.
  3. If your site uses Dynamic Views, skip all the following steps and go to the last section of this post, but for those that use Simple Views, continue to the next step
  4. Now you have to search for data:top.showAuthor in the template.
    Note:The easiest way to search for a piece of code is to use some source code editor. Personally I am using Notepad++. Just select whole code in template window (CTRL+A), copy the code (CTRL+C) and paste it into the source editor (CTRL+V)
  5. You should find two instances of data:top.showAuthor in the template. First one is for Desktop devices and the second one is for Mobile devices.
  6. Under data:top.showAuthor (in both instances) you should see the code that looks something like this:

  7. Now all you need to do is replace <data:post.author/> with a static text that you want to be displayed as Author Name.
    Regarding the link you can either comment out anchor tag <a> to remove the link from your Author Name or just change href attribute so it doesn’t point to your Google Profile. You achieve that by removing data:post.authorProfileUrl and in its place put URL you think is appropriate, for example URL to your Facebook or Twitter profile.

    Note:Remember that the above changes of Author Name will happen on all the posts in your Blog.
  8. Find the second instance of data:top.showAuthor and repeat steps 6 and 7. As mentioned before that second instance is used for mobile devices. If you cannot find this second instance, just skip this step as your template might be lacking mobile template code.

A Concrete example

Below is the modified code that I used for this blog when it was still on the Blogger Platform:

First I commented out the Author code <data:post.author/> and in its place entered word “Author”. Regarding the anchor tag <a> I changed the link so that it points to my Google+ Page for this blog instead of my Google+ Personal profile Account.

Solution for templates using Dynamic Views

For Dynamic Templates, above solutions will not work as those templates rely heavily on javascript, so the solution for those templates is also javascript code. With the code below you can change anchor link and text to the one of your liking.

Just put the above code in the bottom of the template before closing </body> tag and replace values for myanchor[i].innerHTML and myanchor[i].href to your desired Author Name and URL.

And a quick description of the above code. It uses DOMSubtreeModified event, which fires when new DOM element is added. Each post uses .item class, so when such element is added, we call our readyFn() function to modify author link attributes. Just be aware that DOMSubtreeModified doesn’t work with IE8 or earlier. Also note that I’m not javascript expert, so most likely, the above code can be improved.

Dynamic views on mobile devices

To make this also work on mobile devices, change your mobile template to Custom template. This way, it will use the mobile part of the same template that you just modified.

Note:If you are unsure how to do that, check my other article How to modify Desktop / Mobile Template

Conclusion

if you find this article useful, please drop a comment or consider sharing either the article or the blog using the social icons. We took care of Author Name in our posts, but we still have to fix Author Name appearing in comments. Check my other article on this blog that tackles this problem.

Share this page

23 Comments

Add a Comment

Back to Top