Complete Code for the Above Navigation Bar, (CSS coded image rollovers)
Don't worry about copyright on this code, it's not mine. This is a collage of code bits and pieces that I put together from numerous coders who are much more talented than I. I picked the parts I liked and combined them to display this very versatile and customizable navbar which suits me perfectly...and perhaps you as well.
With this navigation bar you can easily change the size of the tabs or text, the length of the bar, the font size, style, or weight, and the spacing between the tabs. If you have an image processor you can even tweak the simple image file associated with this navigation bar to better assimilate on your website or blog; however, the provided image is very generic and would probably look acceptable on just about any page.
One of the coolest and most user-friendly features of this menu, is that it self-sizes the background tab image (displayed below) depending on text length in the tab, and, only ONE image is necessary for the entire menu.
Actual Image Size: Right Click Image and 'Save Picture As'.
Previously, I had to use seven different images which were sized to fit each tabbed text. Every time I changed the tabbed text, I would have to change the corresponding image! What a pain. I hope this is beneficial to you as well.
We'll make this a THREE-STEP procedure with STEP 1 being the code between the head tags, STEP 2 being the code between the body tags, and STEP 3 being the downloading and uploading of the image file...
STEP 1:
Select and copy this first box of code and then paste it between the HEAD tags of your web page, or, between the HEAD tags in the "edit HTML" page of your blog.
IMPORTANT: To customize code in this box, you need to change the image address to correspond to your uploaded image. Font attributes of color, size, and weight can be modified depending on your expertise with these attributes.
STEP 2:
Select and copy this second box of code and paste it between the BODY tags of your web page, or, in the "HTML" box of your blog element or widget.
IMPORTANT: To customize code in this box, you need to, ONE, change all link addresses to correspond to your navigation destinations, ie; either an address to a different page, or a different post on your blog. TWO, change button text, and THREE, change the 'title' tag text.
STEP 3:
Just a reminder to download the above image for your rollover tabs, and then upload it to where you can access it with your code.
NEED SOME HELP? For most of you this is relatively easy if you've been coding for a while, but if in the event you get stuck, don't hesitate to shoot me an email with your problem. If you prefer a phone call, send me your phone number and time to call, or, request my phone number, which ever you prefer. I will answer any question you have at no charge. However, if you require me to actually do any of these steps myself, we will need to discuss the cost. ...ENJOY!
E-Mail: sermonwriter@gmail.com