Add colourful multicoloured link tabs as a widget to your blog

This widget did not take me long to create and it is best located across the entire width of your blog, just below your header for example. There are two parts to this code, the css code and the HTML code. As in the example below the header on this site, each background for each tab is coloured differently and each tab (when hovered over) has its own different background colour. You can also set a different font colour for each tab text when the tab is not hovered over.

Go to your dashboard, then design then edit template. Find in your template the ]]></b:skin> . Copy and paste the code below directly above the ]]></b:skin> .


/* COLOURED MENU TABS WIDGET
----------------------------------------------- */
#coloredmenu {
width:100%;
float:left;
margin:0 0 0 -10px;
padding:0;
overflow:show;
}
#coloredmenu a {
border:0;
color:#B8860B;
margin:0;
padding:2px;
}
#coloredmenu a:hover {
text-decoration:none;
color:#fff;
}

Click on "Save Template".

Then click on the Page Elements tab and click on an "Add a Gadget" link. Select a "HTML/Javascript" widget, then paste all the code below straight into the widget:

<div id='coloredmenu'>

<a href='#'><img src='http://www.animated-gifs.eu/love-hearts-7/0005.gif' height='20px' style='margin-bottom:-5px;padding:2px 4px' /></a><a expr:href='data:blog.homepageUrl'><span onmouseout='style.backgroundColor=&quot;#ff0000&quot;' onmouseover='style.backgroundColor=&quot;#ff6600&quot;;' style='background-Color: #ff0000;color:#000; margin-right:1px;padding:2px' width='100%'>Home</span></a><a href='#'><span onmouseout='style.backgroundColor=&quot;#ff6000&quot;' onmouseover='style.backgroundColor=&quot;#ffc000&quot;;' style='background-Color: #ff6600;color:#000; margin-right:1px;padding:2px;'>Info</span></a><a href='#'><span onmouseout='style.backgroundColor=&quot;#ffc000&quot;' onmouseover='style.backgroundColor=&quot;yellow&quot;;' style='background-Color: #ffc000;color:#000; margin-right:1px;padding:2px;'>Notes</span></a><a href='#'><span onmouseout='style.backgroundColor=&quot;yellow&quot;' onmouseover='style.backgroundColor=&quot;#9fff00&quot;;' style='background-Color: yellow;color:#000; margin-right:1px;padding:2px;'>Notices</span></a><a href='#'><span onmouseout='style.backgroundColor=&quot;#9fff00&quot;' onmouseover='style.backgroundColor=&quot;#3fff00&quot;;' style='background-Color: #9fff00;color:#000; margin-right:1px;padding:2px;'>Gallery</span></a><a href='#'><span onmouseout='style.backgroundColor=&quot;#3fff00&quot;' onmouseover='style.backgroundColor=&quot;lime&quot;;' style='background-Color: #3fff00;color:#000; margin-right:1px;padding:2px;'>Friends</span></a><a href='#'><span onmouseout='style.backgroundColor=&quot;lime&quot;' onmouseover='style.backgroundColor=&quot;#00ff60&quot;;' style='background-Color: lime;color:#000; margin-right:1px;padding:2px;'>Tutorials</span></a><a href='#'><span onmouseout='style.backgroundColor=&quot;#00ff60&quot;' onmouseover='style.backgroundColor=&quot;#00ffc0&quot;;' style='background-Color: #00ff60;color:#000; margin-right:1px;padding:2px;'>More</span></a><a href="#"><span onmouseout='style.backgroundColor=&quot;#00ffc0&quot;' onmouseover='style.backgroundColor=&quot;cyan&quot;;' style='background-Color: #00ffc0;color:#000; margin-right:1px;padding:2px;'>Home</span></a><a href="#"><span onmouseout='style.backgroundColor=&quot;cyan&quot;' onmouseover='style.backgroundColor=&quot;#00c0ff&quot;;' style='background-Color: cyan;color:#000; margin-right:1px;padding:2px;'>Ask</span></a><a href="#"><span onmouseout='style.backgroundColor=&quot;#00c0ff&quot;' onmouseover='style.backgroundColor=&quot;#0060ff&quot;;' style='background-Color: #00c0ff;color:#000; margin-right:1px;padding:2px;'>Theme</span></a><a href="#"><span onmouseout='style.backgroundColor=&quot;#0060ff&quot;' onmouseover='style.backgroundColor=&quot;blue&quot;;' style='background-Color: #0060ff;color:#000; margin-right:1px;padding:2px;'>FAQ</span></a><a href="#"><span onmouseout='style.backgroundColor=&quot;blue&quot;' onmouseover='style.backgroundColor=&quot;#551A8B&quot;;' style='background-Color: blue;color:#000; margin-right:1px;padding:2px;'>Submit</span></a><a href="#"><span onmouseout='style.backgroundColor=&quot;#551A8B&quot;' onmouseover='style.backgroundColor=&quot;#6600cc&quot;;' style='background-Color: #551A8B;color:#000; margin-right:1px;padding:2px;'>Mine</span></a><a href="#"><span onmouseout='style.backgroundColor=&quot;#6600cc&quot;' onmouseover='style.backgroundColor=&quot;#9f00ff&quot;;' style='background-Color: #6600cc;color:#D4A017; margin-right:1px;padding:2px;'>Banners</span></a><a href="#"><span onmouseout='style.backgroundColor=&quot;#9f00ff&quot;' onmouseover='style.backgroundColor=&quot;magenta&quot;;' style='background-Color: #9f00ff;color:#000; margin-right:1px;padding:2px;'>Banner Info</span></a><a href="#"><span onmouseout='style.backgroundColor=&quot;magenta&quot;' onmouseover='style.backgroundColor=&quot;#ff00c0&quot;;' style='background-Color: magenta;color:#000; margin-right:1px;padding:2px;'>Fansigns</span></a><a href="#"><span onmouseout='style.backgroundColor=&quot;#ff00c0&quot;' onmouseover='style.backgroundColor=&quot;#CD1076&quot;;' style='background-Color: #ff00c0;color:#000; margin-right:1px;padding:2px;'>Codes &amp; Links</span></a><a href='#'><img src='http://www.animated-gifs.eu/love-hearts-7/0004.gif' height='20px' style='margin-bottom:-5px;padding:2px' /></a><br />

</div>

Click the "Save" widget button and you are done, almost. Move the widget to below your header or to a place near the top of your blog that will allow the widget to use 100% of your blog's width. Click on "Save" at the top of the Design page.

HOW TO EDIT THE MULTICOLOURED LINK TABS:

For convenience's sake separate each lot of links with a line space when editing them. When finished editing the entire lot of code, remove all the line spaces. If confused = Check the bottom-most code I've added to this post to see the entire link code for each tab link.

In the last few lines of the code above (which is actually for one entire link) I have changed the colour of some of the code. In green, change the colour of the background to either another hex colour or a word (e.g. lime) but if you add a word for the colour remove the # symbol. This has to be done twice per link tab. In green, this colour is what your link tab will look like on your blog when you just look at the link tab without moving the mouse arrow anywhere. You need to add the new colour twice into the code because the code for each link has 3 function commands: a normal background color; a mouseover background colour; and a mouseout background colour. However, the order of which these 3 commands work in sequence is: normal background > mouseover background > mouseout background > normal background - again. You need the normal background colour to reset the link tab's background colour back to it's normal colour again, and that is why you have 2 lots of background colour just for the non-hovered over link tabs.

If you want to change the mouseover background colour then change the hex colour code in blue to whatever colour you want. This is only done once per link tab.

To change the text colour of each link change the hex colour in orange to whatever colour you want.

Lastly, to add an actual clickable link to each link tab, replace the # symbol in red with the url of the page you want the link to go to; and replace the text in red with the words you want to display for that link tab on your blog.

Click on "Save" and now you are done.

If by any chance you want to delete some of the tab links, or add more so the whole thing takes up 2 rows of tabs, then add or remove the code below for every link you want to remove or add. Say you want to remove 4 tab links from the code - then remove 4 lots of the code below. To add more tab links, copy and add the code as many times as you need them.

<a href="#"><span onmouseout='style.backgroundColor=&quot;#ff00c0&quot;' onmouseover='style.backgroundColor=&quot;#CD1076&quot;;' style='background-Color: #ff00c0;color:#000; margin-right:1px;padding:2px;'>Codes &amp; Links</span></a>

To give you an example of why the background colour for each tab link needs to be changed twice, click on this link to a previous post, and notice the original background colour to the widget at the top of the post. Then run your mouse arrow over the page links. What happens?