AJ Blogger Resources + Tutorials

Hey Jammers! You might not be able to tell from my current layout, but I know quite a lot about blog design. *cue laugh track*

Alright, I'm not saying I'm an expert, but having worked on this blog for 5 years I've picked up some tips and resources that will definitely be helpful for new AJ bloggers, or anyone who wants to put together some pretty AJ graphics. 

These resources and tips will focus on design. Thankfully, Animal Jam has a lot of pretty art and icons that can be used as buttons and sidebars for your AJ blog or graphics, so we're already one step ahead! :)

Part 1: Planning

Before you change your blog layout, it might be a good idea to draw what you want it to look like. It doesn't have to be complicated, all you need are the basics. 

Do you want your banner to have a big leaf behind it? Do you want your page tabs to be centered? Do you want one sidebar, two, or none? Do you want a little "About Me" box... or do you want it to be an "About Me" circle? Anything you want, you can probably do it.

If you'd like, you can also make a list. It might look like this:

Header

- Centered

- Big leaf behind text

- Some kinda AJ font

Page Tabs

- Centered

- 5 tabs

- Nature-y background behind each tab

Posts

- Aligned to the left

- Centered post titles

- Pink background

Sidebars

- 1 sidebar to the right

- Square "About Me"

- Popular posts widget

...Or, if you're not picky about the layout, you can just wing it and see how it goes. :)

Part 2: Graphics, Backgrounds, and Fonts

If you haven't noticed already, Animal Jam uses some nice graphics. Sign-board buttons, icons, items... you can easily cut them out and use them on your blog like a collage!

Sometimes making these images transparent can be a pain, especially if you don't have Photoshop or any other software, but that's alright! Other Jammers with access to those programs have posted hundreds of these useful images to the internet for you!

RESOURCE LINK: My personal favorite place to get pre-made graphics is the blog Animal Jam Graphic Central. Ran by awesomepanda868, the blog is currently inactive, but it's a treasure trove of well-organized AJ icons and backgrounds you can use. Just remember to credit the creators. ;)

You can also find backgrounds, albeit of a more limited selection, on the official Animal Jam wallpaper page.

Fonts are a bit of a different story. Above are the two main fonts used on AJ, DigitalDelivery and TikiIsland. On AJ, DigitalDelivery is used in content text, like in chat bubbles or in Jamaa Journal articles, whereas TikiIsland is often used in titles and announcements.

I know downloading these fonts will allow you to use them in Photoshop or other image editing software when putting together your graphics, but you might not be able to use them in most free web-based image editors. Actually, it depends on what editor you use. I'll talk about that later.

RESOURCE LINK: Downloading these fonts is simple, but different for each one. I've only downloaded TikiIsland because (I think) it was easier to download and the last time I checked, DigitalDelivery cost $100, but Animal Jam Archives provides you with free download links to both. I'd trust this site because it's run by snowyclaw, a Jammer who now works for AJHQ.

There are different ways to install these fonts depending on your computer, so I suggest you look up an article specific to your system on how to download fonts.

And remember, you don't need these fonts to have a cool-looking AJ blog. They're just an added extra! :)

Part 3: Get your Graphics Together! (Without Photoshop)

Okay, so you got your transparent blank board, courtesy of AJ Graphic Central...

You got the coolest screenshot possible of your best animal, too...

And you've also downloaded the font TikiIsland.

You want to make a little "About Me" picture to put at the side of your AJ blog. How do you do that, if you don't have Photoshop?

RESOURCE LINK: In short, you find a good free online image editor. For this tutorial, I'll use PicMonkey. I don't personally use it, but I think it's a good free replacement for Photoshop.

Before you start, make sure you crop your screenshot if you want the crocodile to be in focus.

So on the home page, click "Edit an image" and when it takes you to the editor, upload the image that will be behind everything. In this case, the black sign:

Now click the "Overlay" icon and upload your screenshot.

Great! Now about that font...

Click the "Text" button and click "Yours". Then, search up your chosen font and select it to use it!

Make it a little bigger...

Add another text box below, and you're good! If you think you're done, that is. These are just the basics. If you decide to use PicMonkey to put together AJ graphics, you'll inevitably figure out how to do more.

Part 4: Coding, but Easier – Page Tab Tutorial

A few days ago, Violet AJ asked me about how I replaced my page tabs with images. It took me a while to figure that out when I started this blog, so I thought I'd tell you all how I do it.

The secret is... it's all one image!

I made this graphic in Photoshop from a mix of icons, boards, little string things,  the TikiIsland font, and a stick.

If you're wondering why it's tightly cropped except for a blank space to the left, it was to push it into being centered beneath the header. Use transparent space to your advantage!

In Blogger, there is a "Pages" gadget in the layout design area that you probably use:

Well, I don't use that gadget. Instead, delete that gadget and replace it with an HTML gadget:

But what do we put in that "content" box?

The HTML to an image map, of course.

RESOURCE LINK: Image-maps.com allows you to put multiple links into one image. Link to each of your pages within one image! This allows you to have more control over the design.

To make an image map, go to that website and upload your image.

Because each of the areas I want to add a link to are rectangular, I'd click "Create Rect". In the same way, if you want to add multiple circular links to an image you'd click "Create Circle".

 When people click the board that says "Home", it will take them to whatever link you write under "Map URL". In this case, it will take them to AJ Stream's home page.

Same thing with my codes page.

When you've fully linked the image, click "Get Code" to copy and paste the HTML code into your Blogger HTML widget. It'll look something like this:

And once you save your widget, you'll have a really cool looking page tab!

If you don't use Blogger like I do and use WordPress or something like that, you can still make an image map and get the code. You'll probably have another way of uploading it to your blog, though.

Final Tip

If you want to do something with your blog, Blogger, WordPress, or otherwise, look it up. There will most definitely be a tutorial for that somewhere, and if there isn't, you can easily find enough information to do it yourself.

It all depends on what you search. I'd suggest keeping it as generic and simple as possible. Instead of "how can I put backgrounds behind widgets in blogger?" search "blogger widget background" to find more resources.

Also, I may not be an expert, but ask me anything if you're having trouble with your blog's template. I think I can answer a lot of your questions.

That's all for now, Jammers– I'll see you in Jamaa! :D