Saturday, August 20, 2011

TUTORIAL - how to make blog tabs

Have you ever wondered how to get those cute and fancy sidebar buttons that all the 'big' bloggers have? I know I have! And even when you look it up, there really are no tutorials out there! :( Well... now there's a EASY tutorial for blogger sidebar tabs out there! This is what mine look like right now:
For this you are going to need a Picnik account and a Photobucket account. So first you're going to design your button/tab using THIS tutorial {blog dropbox button}
When you're done, save to photobucket and then continue editing changing the name of the tab each time. Repeat until you're done. :) This keeps them all the same size etc. Also... make sure they are the right size. don't make them the size of the page... they should be the able to fit in your sidebar.
Go to photobucket and grab your image direct link:

This is basically the same as a blog button. The difference is that you will not have a dropbox and you'll link it to one of your pages/tabs.

{sorry if this gets confusing... I'm not good at explaining things :)}
{BTW I'm going to use blogger in draft for the tutorial because that's what I use... so if you want to know how to too, click here.}

I advise pulling up a Microsoft word page or something similar for this part.
1. go to 'pages' {it's going to look like this}

now you choose DON'T SHOW. the bottom one.

2. now that you've done that, click onto a page and copy the webpage address. Paste it in word. Repeat until you're done will all of the tabs.
3. Paste THIS (down) in word as many times as the number of tabs you have.

<center><a href="THIS IS WHERE THE CODE FOR YOU WEBSITE GOES" target="_blank" title="Button"><img alt="Button" src="THIS IS WHERE YOU PUT YOUR PHOTO LINK" /></a><center>

4. Copy and paste the webpage addresses into the HTML codes. {sorry I'm so bad at explaining!} So each webpage address will have it's own HTML code.
5. Go to photobucket and copy the direct links from each tab picture and paste them in the right part of the HTML code. {matching the right web address w/ the right photo link}

6. Go to 'layout'>'add a gadget'>'Javascript/HTML'>paste all of your codes in there and save. Move it to where you want it on your sidebar. :)

Now just to be safe check them all! I accidentally made my about me page go to advertising :P

I think that's it... if you have any questions just leave a comment. :) And if you like what you see you should follow me, you'd make my day! :D



Nay said...

I'm not so lame that I actually write ideas down (I'm teasing ;D), but I think about it before I go to sleep, calculating the amount of money it will take to buy supplies (wow, that sounds so nerdy! I don't mind, though). Haha, I also draw out projects I want to make and once wrote out the tutorial in the back of my math notebook. o(^__^o)

MrsWardy88 said...

@ Nay I think the same way. Dont feel bad. :)

Jennifer said...

Great tutorial!! I have been wondering, and now need to try this!! Thanks for linking this up to Saturday Social!

- Jenn @ Social Salutations

Anonymous said...

Hey Alyssa, great tutorial. I have wondered how this worked. Thank you for sharing. You have done a great job on your blog. The colors are so fun and bright. Hope you have a great week!

Mindie Hilton said...

Awesome. Thanks for sharing at Bacon Time.

Lavina said...

Thank you loads and loads for this awesome tutorial! :D

Anonymous said...

So, it's a couple years later, but my tabs are on top of each other and not side by side. Any tips on how to get them side by side?