331A96E0-3037-43FC-8D93-543B900B11C9

😍 Loving this theme? Download

Please enter at least 3 characters.

Extract First Character from Comment Author Name and use it as Avatar in Blogger

Today, we are providing guide on how to retrieve first letter of comment author and append it as an avatar in the comment section of your blogger.
Extract First Character from Comment Author Name and use it as Avatar in Blogger

retrieve first letter from Comment Author Name and use it as Avatar in Blogger
Blogger commenting system can be modified in many ways from comment box style to avatar profiles. In the past, we shared how you can customize comment box in blogger , how you can change comment message and how you can use different avatar images for users.

This time I am going to share a very unique trick 😀 that allows you to extract the first character/letter from comment author name and use it as an avatar image. Yes, this is for blogger platform. 💯

By default, for users commenting via Google accounts, blogger shows their default avatar. However, for users leaving comments using Anonymous or Name/URL account, it displays blank images. What if we can show avatar for every user despite the account option they choose to comment?


Let us take a scenario; A user named ‘John’ leaves a comment using the Name/URL account type. What is the avatar visible next to his name? A blank image. That does not look professional, right? Today, what we are going to do is - extract the first character from his name, that is ‘J’ and add it to the avatar image. Now, instead of a blank image, it displays ‘J’ letter. Of course, you can style background, color and fonts. For user with name ‘Aman’, it displays ‘A’ and so on.

 

Below is the comment section from one of our posts. Do you love it?

Extract First Character from Comment Author Name and use it as Avatar in Blogger

Want to try it live? Leave a comment below and see the magic. 


I played with blogger tag <data:post.author.name/> which gives comment author name, used 'snippet', but no success. Blogger does not allow to extract characters from comment names. The only solution was to use external scripts. I will be sharing two version of codes for extracting first character/letter from comment name and appending it to avatar image.

1) Using Jquery

2) Using Pure Javascript

 

Let's find out how you can add it in your blogger theme. Before that, make sure to take a backup of your template


Note: You can share the code but you must provide a reference to this article. Also, keep the credits intact. It won't harm your template. Happy Blogging 🤭


I)  Extracting first Character/Letter of Comment Author Name - Using Jquery

If your theme is already using Jquery, use this method. Find the </body> tag and append the below code just above it. 

<!-- Script by TwistBlogg.com-->
<b:if cond='data:view.isPost'>
<script type='text/javascript'> 
(function($) {
    $(".cmC > .cmCn > ol > .c").each(function() {
        var str = $(this).children(".cmIn").find(".cmBd > .cmHr > .n > bdi").text();
        $(this).find(".cmAv").append("<span>" + str.charAt(0) + "</span>");
    });
})(jQuery);
</script>
</b:if>

Note: If you do not use Jagodesain, plus-ui or lantro themes, you might need to change the class names. Refer to debugging section on how to find your theme class names.


How the above JQuery is extracting first character from comment author name and appending it to different class?

each() function - iterates over a jQuery object, executing a function for each matched element. In our case, we follow a path that contains comment <li> tags and run the function.

children() function - Get the children of each element in the set of matched elements, optionally filtered by a selector. We go to .cmIn children class and use find() function. We define the path where author name is stored. We use text() function to extract text from author name.

After that, we append() it to .cmAv class inside a <span> tag.


II)  Extracting first Character/Letter of Comment Author Name - Using Pure Javascript

I am not a big fan of Jquery. So, I modified above Jquery code to plain Javascript. Find the </body> tag and append the below code just above it.

<!-- Script by TwistBlogg.com-->
<b:if cond='data:view.isPost'>
<script type='text/javascript'>
var str = [].map.call(document.querySelectorAll(".cmIn > .cmBd > .cmHr > .n > bdi "), function(el) {
      return el.innerText;});
var appender = document.querySelectorAll('.cmAv > .im'); 
var Arr1 = Object.entries(appender)
for (let i=0; i < Arr1.length; i++) {
   for(let j=0; j < Arr1[i].length; j++) {
      Arr1[i][j].innerHTML += '<span>' + str[i].charAt(0) + '</span>'
   } 
 }  
  </script>
</b:if>

Note: If you do not use Jagodesain, plus-ui or lantro themes, you might need to change the class names. Refer to debugging section on how to find your theme class names.


How the above JS is extracting first character from comment author name and appending it to different class?

[] creates an empty array.

map() function calls a function once for each element in an array. It does not change original array and does not execute the function for empty elements.

querySelectorAll() returns NodeList representing a list of the document's elements that match the specified group of selectors. While appending, we are converting 'appender' variable to Array object(Check debugging section for details).

innerText property represents the rendered text content of a node.

str variable holds that value.

Now, we have separate author name in str , we extract first character using charAt(0) and append it to .cmAv .im class inside innerHTML property.


Debugging Section - Extracting First Letter from comment author name

The code provided might not work for your blogger because of different class names. Therefore, it is important to find what classes are used in your theme.

In case, you are using fletro, median-ui, imagz, plus-ui or lantro templates, the code should work without any modification. 

We will use Inspect Element option available in browser. 

Here's the parent path the code uses to find <li> tag for each comment and run for-loop function . Take it as a reference and modify .cmC > .cmCn > ol > .c

inspecting comment section to extract first character blogger


Inside each <li> tag, we have comment author name stored. We need to figure the path where it is stored. Here's the path for our theme to reach .cmIn > .cmBd > .cmHr > .n > bdi 


Finding author name to extract first character/letter in blogger comments

Now, you know which classes to use. Always log console to find whether the code is retrieving values properly. 

We have stored names in str array. Console log to find if it is storing names.

var str = [].map.call(document.querySelectorAll(".cmIn > .cmBd > .cmHr > .n > bdi "), function(el) {
      return el.innerText;});
console.log(str);   

If proper path given, it must output following:

console logging variable to check if it is extracting names

Similarly, we are converting 'appender' variable to Array object with Object.entries method. Console log shows following result.

var appender = document.querySelectorAll(".cmAv > .im"); 
console.log(appender);
var Arr1 = Object.entries(appender)
console.log(Arr1);

 

Converting nodelist to array object for extracting comment names blogger

That was the debugging section. If you have any doubts, feel free to contact me or leave a comment below.


Customizing the first Character/Letter of Comment Author Name

The first letter of comment author name is inside <span> tag within .cmAv .im class. Let us customize the background and style the character and set z-index.

.cmAv .im span {
  z-index: -1;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 20px;
  line-height: 1.5;
  color: #767676;
}

That's all folks. We have successfully extracted first letter from author name in comment section and used it as an avatar image. I hope you loved it. Do support and leave a comment below. Happy Blogging. 🤠🤗

Share this post

Explore more articles by Aman Bhattarai

10 comments

Please leave comments related to the content. All comments are highly moderated and visible upon approval.

Comment Shortcodes

  • To insert an image, add [img]image_link[/img]
  • To insert a block of code, add [pre]parsed_code[/pre]
  • To insert a link, add [link=your_link]link_text[/link]
  • To insert a quote, add [quote]quote_text[/quote]
  • To insert a code, add [code]parsed_code[/code]
  1. How?
    1. Javascript :)
  2. Thanks
    1. You are welcome :)
  3. Very nice post, i learnt a lot from it, thank you.
    1. You are welcome, do not forget to share :)
  4. Hey thanks for the tips 😍 Enjoyed every bit of article.
    1. You are welcome @Peter
  5. Nice👍
    1. Thanks @Darshan
Post a Comment