Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Tuesday, May 29, 2012

Using Nicknames to Publish Posts in Blogger

Before
After
I'm sorry this week's post is a little delayed. I was away from the computer for a couple of days. Anyways, I'm back now. This week's tutorial is about changing your profile name to a nickname in Blogger posts (both normal and Dynamic Views template). Being a Google product is one of the best things about Blogger. It allows you to use one account to enjoy many of Google's integrated services. But the sucky part is, recently, with the introduction of G+, Google became serious with its naming policy. Long story short, if you have G+ linked to Blogger (which is cool btw), you don't get to use nicknames in Blogger! Thus in this post, I'm gonna show you how you can use nicknames in your published posts, instead of your real name.

Note: This tweak does not work if you have multiple authors posting in your blog.

For Normal Templates:

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line } --> Apply to Blog.
.fn a, .comment
.blog-author a, .ss a, .fn{
font-size: 0px !important;
}
.fn:after{
content:"YoboY";
font-size: 13px !important;
}
.blog-author a:after{
content:"YoboY";
font-size: 12px;
font-weight: 900;
}
Raplace 'YoboY' in Line 6 and Line 10 with your nickname. Note that this will also change the names that appear when you post a comment in your own blog. You may also need to change the font size of your nicknames by altering Lines 7 and 11.

For Dynamic Views Templates:

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line } --> Apply to Blog.
.publish-info, .ss{
font-size: 0px !important;
}
.time.published{
font-size: 14px !important;
}
.publish-info:before{
content: "Posted ";
font-size: 14px !important;
}
.publish-info:after{
content: "by Yoboy";
margin-left: 5px;
font-size: 14px !important;
}
Raplace 'YoboY' in Line 12 with your nickname. Unfortunately, due to lack of a proper handler, it is not possible to change author names in comments to nicknames.

20 comments:

  1. nice..
    for remove time u published your post :D

    .publish-info, .ss{
    font-size: 0px !important;
    }
    .publish-info:before{
    content: "Posted ";
    font-size: 14px !important;
    }
    .publish-info:after{
    content: "by Yoboy";
    margin-left: 5px;
    font-size: 14px !important;
    }

    ReplyDelete
    Replies
    1. Yea~ Glad you're getting the hang of it..

      Delete
  2. A very good trick, but the problem is that the texts we add with :after pseudo selectors can't link author profiles or G+.

    But goof tutorial :D

    ReplyDelete
    Replies
    1. Actually you can, granted that your template initially links your author name to your G+ profile (like the Minima template that I'm using). In this case, just change '.fn:after' in Line 5 to '.fn a:after'. I was going for this initially, but had to remove the link part as most Designer templates do not link to G+ profile by default.

      Delete
  3. You had me until the comments part. When that happens I will link up G+ with Blogger.

    ReplyDelete
    Replies
    1. Sure thing.. I tried to look for a handler, but in DV, both authors and users have the same handler. In other words, there isn't a unique way to isolate author comments from non-author comments..

      Delete
  4. what about the simple template??

    ReplyDelete
    Replies
    1. Should work in Simple template. What's your blog's address?

      Delete
  5. Nice tips, and it's work! thank's!

    ReplyDelete
  6. How to add the font color...
    =============================

    .publish-info, .ss{
    font-size: 0px !important;
    }
    .time.published{
    font-size: 14px !important;
    }
    .publish-info:before{
    content: "Posted ";
    font-size: 14px !important;
    }
    .publish-info:after{
    content: "by Yoboy";
    margin-left: 5px;
    font-size: 14px !important;
    }

    ReplyDelete
    Replies
    1. Hi there, try the following. I've added two lines to the code the above. You need to change 'red' to some other colors in the code below:

      .publish-info, .ss{
      font-size: 0px !important;
      }
      .time.published{
      font-size: 14px !important;
      }
      .publish-info:before{
      content: "Posted ";
      font-size: 14px !important;
      color: red !important;
      }
      .publish-info:after{
      content: "by Yoboy";
      margin-left: 5px;
      font-size: 14px !important;
      color: red !important;
      }

      Cheers :)

      Delete
  7. Hey Yoboy,

    Is there a way for two authors to have their nicknames posted? So if two of us are posting different posts is there a way to distinquish between the poster in dynamic template?

    ReplyDelete
    Replies
    1. Hi Marko,

      Since there isn't a unique way to isolate the two authors in the source (both authors will be referred to using the same class), we can't distinguishably assign a separate nickname to each author.

      Delete
  8. How do we change the link that opens when the user click the nickname? I'd like it to go to a Google+ page instead of the users Google+ profile.

    ReplyDelete
    Replies
    1. It's a bit tricky to change the target link. We need to make use Javascripts, and DV templates just won't co-exist with script mods.

      Delete
  9. This worked great. Thanks a lot for this tutorial. Shame on google for requiring people to devise workarounds like this one just to do something so simple.

    ReplyDelete
    Replies
    1. Glad you found it and got it to work! :D

      Delete
  10. Hi Yoga,
    Is there a way to also change the author name in mobile templates? I mean the same name that I used for the desktop version of the site, can it be used in the mobile template too? Currently I have changed the desktop version but the mobile version still is different.

    ReplyDelete
    Replies
    1. Hi Abhiroop,

      I'm afraid there isn't any way to explicitly alter the mobile template.

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.