April 13, 2015

How to Make a Navigation Bar Span the Top of Your Blogger Blog


Look up right now. I mean, not at your ceiling, just to the top of my blog.

See how I have some things expanding the whole width of my blog? And by "some things," I mean these things:


Yes, well those things took me about ten years to figure out how to do. Which is fine because, you know, it's not like I wanted to spend that decade doing something... useful. Or productive. Or serving my fellow man or saving the world or anything.

But in case you do have plans in this decade to be useful or productive or to serve others or save the world, I'm going to save you ten years and tell you how to do it.

(Note: This will only work if you use Blogger. So, Wordpress and/or other blogging platform users, check back next century; I should have figured it out for those sites by then.)

To the code...

Step 0: Back up your layout. Seriously, just save yourself the agony.

Step 1: Decide which widget you want to span the top of your page. (Almost all of the widgets I use are "HTML/Java Script" so I can customize them myself.)

For example, you might want to have a header with an image map (see Sarah's awesome tutorial on that here) or you might just want a bunch of simple links for a navigation bar.

Step 2: Go to "Template" then "Edit HTML."

Step 3: Now find the gadget you want to span the top of your blog. You can do this by going to "Jump to widget" and finding the widget you want.

Step 4: This button should bring you to a code that looks something like this:

<b:widget id='HTML2' locked='false' title='' type='HTML'> blah blah blah HTML stuff  </b:widget>

Step 5: Cut (not copy) that code, beginning with <b:widget and ending with </b:widget>

Step 6: Now go back here...

...and click on "Navbar1." It should take you to a code that looks like this:

<b:widget id='Nav Bar1' locked='false' title='Navbar' type='Navbar'> blah blah blog stuff </b:widget>

Step 7: Paste the code that you cut in step 5 right after </b:widget> of the Navbar code. It should look something like this:


And now it's there, so now you're DONE!

...Just kidding. If you look at your blog now, it probably looks pretty... well, effed up. Which is why there is a bit more coding to do, this time of the CSS variety. (Don't be frightened.)

Step 8: Go back to "Template" and now click "Customize"

Step 9: Click on "Advanced" on the left sidebar, then scroll down and click on "Add CSS"


Step 10: In that box where it says "Add CSS here...," you're going to add CSS there. This is the CSS I have for my topmost widget:


The important parts of this code:

#HTML2 You're going to replace "HTML2" (keep the "#") with whatever your widget's name is.

top: -5px; You're going to play around with this number to move the widget vertically on your blog.

padding: 30px; Play with this to adjust the amount of space between your widget content and the edges of the widget.

z-index: 100; The z-index controls which widgets appear on top if you have overlapping widgets. (The widget with the highest "z-index" number appears on top.) For example, in my layout, my big cartoon head has a z-index number of "102," so it appears on top of the other widgets.

background-image: url(http://i.imgur.com/ycNhlQb.png); Change the URL between the parenthesis to whatever background image you want.

And here are some other codes I sometimes use, just for fun. (If you use them, make sure to put them between the {}'s of the CSS code above.)

border-top: 1px solid white; You can change the border however you'd like by changing the appropriate words. (If you want the border to go around the entire widget, just remove "-top".

background-color: #1C1C1C; Use any color you want. (ANY COLOR YOU WANT.)

position: fixed; This will make your widget "stick" where it is on the screen, even when you scroll.

And now we're really done, for real.
Let me know if you have any questions or need any help!