❤How to add custom pixels/emoticons to your blogger❤
Hello! By the way happy easter! :wink:
This is my first tutorial on this blog, If you are on web resources tumblr you might recognize something called "pixels". Little 20x20 pixelated gifs that are oh so cute! :excited: I will teach you how to add multiple of these to your blog! for instance if you type: : ) it will turn into: :)
First where do you find these emoticons? There are many on tumblr, look at the #pixel, #favicon, #decome or #sozai tags. There is another website too called "emoji bank". A website with thousands of 20x20 pixels. Unfortunately you cannot make an account with this site and its purely in Japanese so you'll need to translate the page. :busy:
Here is the code you need to add it into your blog posts:
<script>
const emoticons = {
':)': "https://happy.png",
':(': "https://sad.png"
};
posts.forEach(post => {
let html = post.innerHTML;
Object.keys(emoticons).forEach(code => {
const imgTag = `<img src="${emoticons[code]}" width="20" height="20" alt="${code}" style="vertical-align:middle;">`;
html = html.replace(new RegExp(code.replace(/([.*+?^=!:${}()|[\]\/\\])/g, "\\$1"), 'g'), imgTag);
});
post.innerHTML = html;
});
</script>
Labels: Tutorial
posted by Diana @ April 20, 2025
0 Comments
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home