CSS Lesson 01 - Custom Navigation Blogger Buttons

I've had several people ask me how I did my custom navigation buttons at the top. (Home, Portfolio, About, Contact, Etc.)  This post will explain.  I will try and answer simple questions that you might have...but I did go to school for this and cannot do it for your blog, for free.  I'm still paying back student loans to have this knowledge.  So if you are interested in custom creations or coding, please get in touch and I will be happy to send over a quote.  Also feel free to leave suggestions for future CSS Lessons.

Since today (03.25.12) the Sunday #bblogger chat was about CSS, HTML and design, I figured today was a perfect day to start doing mini lessons on design tricks I have figured out with blogger.  I was actually going to post this before the chat, but my screen on my computer decided to play dead, so I had to go sit in the Apple doctor office aka The Genius Bar to get them to give my poor MacBook CPR.  Luckily they brought it back to life, so I'm able to continue this evening with my normal computer activities. (thank goodness!!)

On the Pages tab in the blogger dashboard, you have the options: "Top Tabs", "Side Links" or "Don't Show".  For this tutorial, they will need to be set to "Don't Show".  For the URL links below, this refers to the specific page URL that you are linking to.  Don't forget, links are case sensitive and the "http://" must be included in all the URL links, otherwise the links won't work.

Make sure the total combined width of all your buttons together does not exceed the width of your blog....otherwise your button line will have two lines, which for my OCDness, is a complete design disaster.  My blog is set at 930px, so I set my document size to 900px wide x 40px high. That gives it 15px on the left and right for margin.  They I slice them up individually and crop each one, so they are different image files.  Your height can be anything, depending on if you have short or tall buttons.  I also make all my buttons the same height, so they line up evenly on the baseline, without having to do extra coding for each button.  Upload your button graphics to an image hosting domain, like photobucket.com or dropbox.com.  After you have your graphics uploaded, follow the coding instructions below.  Have fun!!

HTML DIRECTIONS
-----------
• LAYOUT Page
• ADD CUSTOM HTML/JavaScript Gadget
• ADD the code below and link appropriate URLs with your blog button graphics.

* Notes:
URLTOBLOGBUTTON can be (.jpg), (.jpeg) or (.png) just make sure to change the extension in the html code.

**** FOR HTML CODE ONLY:  ALL " [ " characters will need to be changed to " < "  and ALL " ] " will need to be changed to " > " when adding the codes to your HTML/Javascript Widget.

START HTML CODE BELOW THIS LINE --------------------------

[div id="customPageLinks"]
[a href="http://www.URLTOBLOGPAGE01.html"][img src="http://www.URLTOBLOGBUTTON01.jpg"/][/a]
[a href="http://www.URLTOBLOGPAGE02.html"][img src="http://www.URLTOBLOGBUTTON02.jpg"/][/a]
[a href="http://www.URLTOBLOGPAGE03.html"][img src="http://www.URLTOBLOGBUTTON03.jpg"/][/a]
[a href="http://www.URLTOBLOGPAGE04.html"][img src="http://www.URLTOBLOGBUTTON04.jpg"/][/a]
[/div]

END HTML CODE ABOVE THIS LINE --------------------------


CSS DIRECTIONS
----------
• TEMPLATE Page
• Edit HTML
• Open Template Designer
  - Advanced Tab (bottom, last one)
  - Add CSS (bottom, last one)
• Add the code below.

* Notes:
The height should match the height of your buttons.
The width can either be the total width of your buttons or the width size of your blog.
The margin-top & margin-bottom can be adjusted to make space more or less space between your buttons.
The padding-left can also be adjusted to line up exactly where you want it. A padding-right can also be used.
" padding: 10px; " will add 10px padding on all 4 sides; right, left, top, bottom, or add.
" padding: 0 10px; " will add no padding to top and bottom but 10px padding to the right and left.
Background-position refers to the position of the (.jpg) button.


START CSS CODE BELOW THIS LINE --------------------------

#customPageLinks {
      height: 40px;
      width: 900px;
      margin: 0 auto;
      padding-left: 40px;
}

#customPageLinks img {
      background-position: 0 0;
      margin-top: -15px;
      margin-right:-5px;
}

END CSS CODE ABOVE THIS LINE --------------------------