CSS Lesson 01 – Custom Navigation Blogger Buttons

Posted: Monday, March 26th, 2012 at 3:44 AM
Written by
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 ————————–

Ashley Elizabeth is a beauty blogger and professional make-up artist currently residing in Atlanta, Georgia. She started her blog with the intent to display her portfolio but soon discovered she absolutely loves to blog about beauty! Her weekly posts include product reviews, tutorials and color swatches along with her favorite make-up tips and tricks.

Other Posts You Might Like...

Share
Article Categories:
graphic design · tutorial

Comments

  • What a great + helpful post! Thanks!!!

    http://brightandsassy.blogspot.com/

    Alexa March 26, 2012 2:42 pm
    • Thanks for checking it out!!

      ♥♥♥

      Ashley Elizabeth March 26, 2012 6:18 pm
  • Thank you so much for this post! I finally figured it out, just had to do some tweaking since I use WordPress.

    You’re the best! 🙂 🙂

    Beth March 26, 2012 5:44 pm
    • Aww thanks!! Was it a lot different on WordPress? I only piddled around in WordPress.

      ♥♥♥

      Ashley Elizabeth March 26, 2012 7:13 pm
  • Thanks this is very helpful esp for people like me who are a bit rusty on all the coding!

    Ashley K March 31, 2012 2:14 am
    • Go glad to hear! I’ll try and do more little tricks as I find which ones people would like the most!! 😀

      ♥♥♥

      Ashley Elizabeth April 1, 2012 9:01 pm
    • I made my buttons today and installed everything this works like a charm 🙂

      Ashley K April 4, 2012 9:12 pm
  • hun!! Cute blog! I love this post. I have actually been wondering about this. I should be studying and not blogging right now, but I keep procrastinating so I’ll try to read this once I’m done writing my essay:(!!! I was thinking you might like to participate on our Lotus Mendes ring giveaway. Beautiful pieces! here’s the link in case you like them 😀 http://angelasquared.blogspot.com/2012/03/3-lotus-mendes-giveaways.html

    Squared March 31, 2012 4:06 am
  • You have a great blog ! and it looks so professional !
    Thanks for sharing it (:

    xoxo
    NEW FOLLOWER
    http://foreveralifestyle.blogspot.com/

    NishaMae April 4, 2012 5:40 pm
  • Just found your blog – thanks for sharing, I soooo needed help with this 🙂

    XO
    http://www.pearlsandpaws.blogspot.com

    Heather April 5, 2012 11:34 am
  • You made this all yourself? WOW! Can you do YouTube backgrounds? I’d love to have someone professionally do mine. Mine are garbage.

    Samantha April 6, 2012 5:52 am
    • Yes ma’am I did…I’m kinda nerdy like that. I’m sure I could…but as you’ve learned I’m not the YouTube guru like you…but yeah, let’s talk. 😛

      ♥♥♥

      Ashley Elizabeth April 6, 2012 8:53 am
  • http://www.Saeedbaba.com
    very nice post and nice blog
    it is really helpfull forblogger

    M Saeed December 24, 2012 12:06 pm
  • Simple & easy tutorial! Thanks so much.

    danielle riebel June 3, 2013 12:42 am
    • Glad you got some use out it. Thank you!! 😀

      Ashley Elizabeth June 13, 2013 5:10 am
Beauty Blogger Reviews