How to make Customized Page Tabs

Hey everybody! I decided to make a quick tutorial that I think looks really nice and it's pretty simple to do!

How to make Customized Page Tabs

little sneak peek of my upcoming template!

So lets get started!

Step one:

Alright, for this first step you'll want to make the actual button. Usually they are around 125x125 pixels. Here is my example button:

This button is 125x124, the ideal size if you have about 5-6 pages that you would like to link to.

Step two:

Now you'll want to add text to your button, and do that for as many pages you have. You want to make the text stand out from any backgrounds (ex. white, patterned). To do that, I usually add a stroke or shadow to the text. Here are a couple examples:

Personally I like the stroke width better, but you can do what suits your blog best. Sometimes I even do stroke-width and shadow!

Step three:

Now I will show you the coding. Paste this into notepad or any other text editor.

<a href="PAGE_LINK"><img src="IMAGE_LINK" /></a>

Replace PAGE_LINK with the link of your page (ex. http://vasa12345.blogspot.com/p/chobots.html). Replace IMAGE_LINK with the direct link to your page tab image (ex. http://i.imgur.com/sUMvU6h.jpg). Don't remove the quotes! Make sure to do that for each page.

Step four:

Now we need to install the gadget. Go to Design >> Layout and then click "Add a Gadget" below the header, as shown below:

After you have pasted all the code in there, click "Save". You might end up with something that looks like this:

I personally do not like all the empty space this creates. To fix that, simply add a <center> tag before all the coding and a </center> tag after the coding. Now it should look like this:

Hit "Save" and you're done! If you have any questions, don't hesitate to ask in the comments.

Good luck and have fun,

Vasa12345