The Princess in Training: Gyaru Emoticons, and how to use them

Have you been looking for those cool Gyaru emoticons/emoji you've seen in other blogs?

Today, I took someone's advice, and I looked it up in Japanese

So, if you've been wishing for these icons, I'm going to show you where to get a whole bunch of them~

It may even be all of them, but I have no clue.

Enjoy

http://ameblo.jp/sukidesukidetamaranai/theme-10014819735.html
Check out a ton of other blog entries too! They've uploaded thousands of icons~!

Not sure how to use these or any kind of icons? I've seen this question a few times when looking for emoticons, so I thought I'd try to explain it as best as possible. I did all the research so you don't have to, lol.

Keep in mind, this is the way I found easiest for Blogger. There is a way to make it so that when you enter certain words or symbols, an image will replace it, HOWEVER, I've learned you must be on Classic Blogger mode for this to work. How do you know if you're in Classic mode? If you click on your Design tab, and you see the words "Add or Arrange Page Elements" up near the top, you're not in Classic mode. You could switch, but you'd be sacrificing a lot of other features if you've upgraded... such as easy page layout editing, better customization without code knowledge, most Blogger layouts, the ability to search the history of your blog just by clicking on the "Past Entries" and "Newer Entries" links....

It's just easier this way. If you just happen to be on Classic Mode anyway, just go here and follow the directions and know that you can customize what to type in and what image comes up as a result.

If you're on Wordpress though, apparently you've got an emoticon section, and you can just upload the icons needed. None of this will mean anything to you, lol.

First, save the image to your computer. I'd suggest an extra folder. Icon collecting can be really addictive.

***Edit before this section: It seems that you now have to pay in ImageShack in order to have animated GIFs. If you have used this guide and have already uploaded some animated GIFs before March 26th, as of now, they still work, but any new ones uploaded will not be animated. Photobucket has fixed their merging issue (DO NOT use the bulk uploader though, it seems to still has the same problem, but via their regular uploading system, I've tested up to 100 uploaded at a time, with no problems), so I'd suggest you head there, or any other free uploading site you choose. I know with Photobucket, it's much easier to copy and paste your codes. If that changes, let me know, and I'll take this out!***

Upload them to something like Photobucket. You'll see a selection of things you can copy and paste, but you want the one marked 'HTML'. You could upload them through Blogger too, but I have no idea about that method when it comes to this.

Oh, if you're like me, and you tend to upload way more icons than you'll use (they barely take up any space on a computer, so I could have thousands!

), you may want to create an extra folder that's only full of icons you know you'll use often. I wouldn't be so quick to delete all of the extras though. you never know when you'll want to use it in the future either, even just once. Personally, I've got an Emoticon folder with two sub folders, one marked Use and one marked Prepare. This way, if I come across more icons, I save them to the Prepare folder, move the ones I don't want to the main folder and upload the ones I want, and move them to the Use folder, and I won't have to sift through icons and end up accidentally uploading a ton of icons I already uploaded. If I should ever lose my links or I need to upload somewhere else, I can always just reload them, because I know which ones I liked most! But that's just me, I'm weirdly anal about stuff like this, lol.

This next part is quite optional, but it'll help a lot. Anyway, open a WordPad or NotePad document. Put a short description of the icon, and then paste the icon code under it. This way, you'll have a one stop place for all of your icons!

If you have a lot of icons, you might even want to further divide them by type, like if it's a happy one, a sad one, so on, etc. Yeah, it may seem like a ton of work (especially if you tend to get them hundreds at a time

), but if you do it as you go, it's not so bad, plus as you download icons, they'll get jumbled up, so it'll be easier for you to pick what icon you want than to have to search through your collection. I'm just sayin', lol.

Now, if you hover over or click on your icon, it may display some words along the lines of "Hosted on blahblahblah". If you want to get rid of all of that, just delete everything BUT the "img src" section. Your code should look something like this when you've finished:

Of course, the link will be different, depending on the icon.

All the more reason to put them on a separate document, because you can do all of this ahead of time, and then when you need an icon, you'll be all set~ For the most part, it's easier on WordPad, because you can go to Replace, copy the line of code you want to get rid of, and leave the Replace With section empty. Replace All, and it's done!

I thought I'd say all of that because I know not everyone is HTML savvy. Fortunately, I knew enough to know what should and shouldn't be there in this case, but I know sometimes it can all just seem to be random letters and bits and bobs....

When you go to use your icons on Blogger, and you've pasted them on Compose mode, and you want to see how they look, just click on Edit HTML mode and then click back to Compose mode. Your icons should show up.

Now, three things will probably happen when you go to test everything.

The icons will be really spaced out.

There will be an ugly drop shadow around each icon.

They'll have a white background when they should be transparent (only noticeable if your background isn't white though).

To fix these, you're going to have to actually go through your blog's code! But don't worry, it's not so scary, just Ctrl + F to prepare and follow the directions below.

For the item spacing, this should help you.

For the drop shadow, this will do it.

For the white background, the fix is here, just scroll down a little.
But keep in mind, just because the background of an image starts off white doesn't mean it's supposed to be transparent.

Seriously, I'm no HTML expert at all, so if you've still got questions, you'll have to do some research, sorry! But I hope this will at least point you in some forward direction!