Skip to content

Latest commit

 

History

History
201 lines (189 loc) · 7.92 KB

README.md

File metadata and controls

201 lines (189 loc) · 7.92 KB

Avatar.js: Blogger Edition

AvatarJs

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
adventurer-neutral
adventurer-neutral
avataaars
avataaars
avataaars-neutral
avataaars-neutral
big-ears
big-ears
big-ears-neutral
big-ears-neutral
big-smile
big-smile
bottts
bottts
bottts-neutral
bottts-neutral
croodles
croodles
croodles-neutral
croodles-neutral
fun-emoji
fun-emoji
icons
icons
identicon
identicon
initials
initials
lorelei
lorelei
lorelei-neutral
lorelei-neutral
micah
micah
miniavs
miniavs
notionists
notionists
notionists-neutral
notionists-neutral
open-peeps
open-peeps
personas
personas
pixel-art
pixel-art
pixel-art-neutral
pixel-art-neutral
rings
rings
shapes
shapes
thumbs
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.