How to create custom tabs.

Creating Custom Tabs
So... you're checking out my page, and reading up on how to spiff up your blog. And, you may be wondering how I got my awesome custom blog tabs. Its really easy with the help of a really great website and a little creativity. (which is the fun part)

Often times in my online travels I come across some awesome tools, tut's, and websites that I would love to share with you. Image-maps.com is by far one of my favorites!  It allows you to create a custom link map of your image. So you guys can put links in any part of your image. This can have TONS of creative applications.

 To use this to make custom tabs or nav. bar, first you need to start with a image:

I made mine using Photoshop and some free fonts I picked up using Font Squirrel. But if you don't have Photoshop you can easily create a really simple image using paint or Pic Monkey; which is a great website for creating images. You can also search for some already made images, there are loads out there and they are easy to find. I may even be adding some for free soon here on my blog.

Then you will need to upload it to an image hosting site: like Photobucket or Image Shack. Once uploaded you want to copy the HTML code for your image.

It should look about like this for example:

http://####.photobucket.com/albums/####/yourname/photoname and number.png

Now you want to head over to Image maps and input your HTML image code.

Then start mapping!You have several great options to choose from, and the website is super helpful and user friendly.

When you are all done, click get my code and you will again copy the HTML code. It should be much longer by now :-].

To use this as a custom nav. bar on blogger:

Open up your blogger and click layout. Then you will want to create an HTML gadget and paste in your code. Move your gadget up to the top where the tabs should be, or wherever you want the image. And voila! You now have a custom nav. bar that you made your self! You will want to remove your old tabs widget from the top/side of your page.

No comments:

Post a Comment



Related Posts Plugin for WordPress, Blogger...


Email *

Message *