theamanstark / avatar.js.blogger

Javascript package with around 28 distinct styles for assigning randomly generated avatars to users commenting on blogspot-based sites.

Avatar.js: Blogger Edition

Demo :- Click Here

# Available Avatar Styles 🎨

Copy your desired avatar art style code name from here and paste it into config.js at avatarStyle.

adventurer	adventurer-neutral	avataaars	avataaars-neutral	big-ears	big-ears-neutral	big-smile
bottts	bottts-neutral	croodles	croodles-neutral	fun-emoji	icons	identicon
initials	lorelei	lorelei-neutral	micah	miniavs	notionists	notionists-neutral
open-peeps	personas	pixel-art	pixel-art-neutral	rings	shapes	thumbs

# Documentation

1. Just add these two JavaScript's in your site above </body>

    <script>/*<![CDATA[*/
    // The css selectors used here are from plus ui blogger theme, so if you are using a different theme you need to change the selectors accordingly.
    const config = {
       usernameSelector: '.cmHr .n bdi', // The selector for the username element
       commentSelector: '.c', // The selector for the comment element (the element that contains the username and the timestamp)
       timestampSelector: '.d.dtTm', // The selector for the timestamp element
       timestampAttribute: 'data-datetime', // The attribute for the timestamp
       profilePicSelector: '.cmAv .im', // The selector for the profile picture element
       setRandomAvatarForAll: true, // When true it will set a random avatar for all the users in the comment section, when false it will only set avatars for users who don't have a profile picture
       avatarStyle: 'thumbs' // Choose the avatar style, examples :- bottts
     };
    /*]]>*/</script>

   <!-- This will load the avatar.js only on posts and pages -->
   <b:if cond='data:view.isSingleItem'>
   <script src='https://theamanstark.com/cdn/blogger/avatar.js/v1.0/av.min.js'></script>
   </b:if>

2. To select the avatar art style of your choice, enter the code name at avatarStyle in the config, for example, const config = { avatarStyle: 'thumbs', }; To see each art style in action, go to the demo site :- click here.

3. When setRandomAvatarForAll = true, the code will assign the randomly generated avatar to every person who has commented on your article; however, if setRandomAvatarForAll = false, the avatar will be allocated exclusively to those who do not have a profile picture.

# Note :- If you're using the Plus Ui blogger theme, just ignore this. This message is for users who want to use this code on a blogger template other than Plus Ui; if so, you must change all of the CSS selectors in the config to match your site's comment box CSS selector. Please read the comments in the config to see which CSS selector is for which element.