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:
    <b:if cond='data:post.authorProfileUrl'>
      <span class='fn'>
        <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
      <span class='fn'><></span>
  7. Now all you need to do is replace <> 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:

<span class='fn'>  
  <a href='' itemprop='author' rel='author' target='_blank' title='author profile'>

First I commented out the Author code <> 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.

<script language='javascript' type='text/javascript'>
function readyFn( jQuery ) { 
var d=document;
var myanchor = d.getElementsByClassName('fn');
  if (myanchor!=null)
    for (var i=0;i&lt;myanchor.length;i++)
      myanchor[i].innerHTML="AuthorName";  /* author displayed */
      myanchor[i].href=""; /* URL displayed */ 
$(document).bind(&#39;DOMNodeInserted&#39;, function(e) {
      if (;item&#39;) readyFn();

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

There is another part of Blogger that will continue to use our G+ profile whether we like it or not and that is in the comment section.

How to change your Google+ profile as Author Name in comment section

We will get rid of the Google+ profile as an Author Name in the comments using two different techniques. Neither of the two solutions described in this article is a perfect fix, as both have their drawbacks, but when you do not wish for your Google+ profile to appear anywhere on your blog, every little bit helps.

Solution 1 - install third-party comment systems

One way to fix the problem is to replace default Blogger comment system with a third-party comment system. I tested two of them.

Note:Always create a backup of a template before switching to other comment system in case you change your mind later and want to switch back to the default blogger comment system.
How to back up a template is described in step 1 of Solution 2.
  • IntenseDebate comment system on Blogger

    IntenseDebate comment system on Blogger


    This comment system is appropriate when you do not have any comments yet. It does not support import of existing comments and those posts that already have them will continue to use default blogger comment system instead.

    On the plus side it does have a lot of useful features, among them ability to install additional plugins like commentLuv.

  • Disqus comment system on blogger

    Disqus comment system on blogger


    This one does has an option for importing already existing comments, but you will not be unable to edit them, so your Google+ Author Name will be preserved. On a plus side, the link to the Google+ profile will be removed, so if you have a popular Name, having an Author Name displayed might not be such a big deal.

Solution 2 - add JavaScript code to the Blogger Template

Author name modification using Javascript in default Blogger Comment System

If replacing whole comment system is not an option for whatever reason, then you might try adding some JavaScript code into the template, which will replace content of the Google+ link in comments with a content of your choice.

Using JavaScript is of course also not a perfect solution, since everyone can just disable it in their browsers.

To add the code, follow these steps:

  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 and then on Proceed button. Code for your template will show up.
  3. Scroll to the bottom and find closing </body> tag. Before the </body> tag insert the following code:
    <script type='text/javascript'>
    var d=document;
    var mydiv = d.getElementsByClassName(&#39;blog-author&#39;);
    if (mydiv!=null)
      for (var i=0;i&lt;mydiv.length;i++)
        if (mydiv[i].tagName==&#39;CITE&#39;)
         mydiv[i].innerHTML =  &quot;<a href=''>Javascript changed  Author Name</a>&quot;;
  4. In the line 9 for mydiv[i].innerHTML replace <a href=”>JavaScript changed Author Name</a> with your own custom name and link. For example you could make it to point to a Twitter page. If you do not want to have a link, remove <a href=”> and closing </a> tag.
  5. We can also replace Google+ author profile image thumbnail. To do that we add another JavaScript code after the inserted code in step 3:
    <script type='text/javascript'>
    var d=document;
    var mydiv = d.getElementsByClassName(&#39;avatar-image-container&#39;);
    if (mydiv!=null)
      for (var i=0;i&lt;mydiv.length;i++)
         mydiv[i].innerHTML =  &quot;<img src='imglink'/>&quot;;
  6. Replace imglink in line 8 with an URL that points to the image of your choice. If you do not wish to have an image, set mydiv[i].innerHTML to
    mydiv[i].innerHTML =  &quot;&quot;;
  7. Click on Save template

A little explanation of the above code.
With the code in step 3 we first find elements of a class blog-author. Name and link of the Author is stored inside cite tag and this is where link to the Google+ profile is located. JavaScript then replaces that with our own custom name / link.

The second code in step 5 does almost the same but for img tag.


By linking your Blogger Profile to your Google+ profile, the Author Name in the posts will also get replaced with this Google+ profile. When this is not desirable, we can change the author name by modifying the template code. Another place, where the Google+ profile will appear is in the comment section. We can fix that by either use a third-party comment system or add few lines of JavaScript.

Share this page


Add a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top