Web Tip: Horizontal Navbar with Images (Part 3)

05/18/2011 in tutorials,web tips

Blog Tip: Horizontal Navigation Bar (with Images)

This tutorial was requested by Nadia at Cupcake Couture. She wanted to know how to add an image-based navigation bar to Blogger . I go through the steps you need in the screencast after the jump.

 

Allen CoteI want to take a moment to thank Kate and Allen Coté. I mentioned on Twitter a few weeks ago that I was looking for some new music for my screencasts. I’ve exhausted all the lovely Annette Hanshaw music in the public domain and I was ready for new tunes. So, Kate referred me to her husband, Allen Coté, who is a musician and composer based in Wisconsin. His music, it turns out, is exactly what I’m looking for! I love all the tunes I’ve listened to and I look forward to incorporating more of them into my tutorials starting with today’s. The tunes I used in the screencast: This Spoon (Reminds Me of You) and Sam-I-Yam. Listen to more of Allen’s beautiful music here. Thank you, Kate and Allen!


By the way, if you notice the music fading in and out abruptly — sorry about that! I’m still learning how to edit movies and sound. I’m sure I’ll get better in time (I hope!).

♥ credits:
blog photo overlays (part 4)
demo blog banner (in screencast): vintage envelopes from Fuzzimo
poppy: Mellowmint
fonts: Lullababy, Superscript, Cheap Pine

{ 25 comments }  

1 amanda 05/18/2011 at 4:50 pm

Honestly – I spent *forever* searching for a tutorial like this when I was getting ready to launch my new blog – and never found anything, so I gave up and hired someone to do it for me. Now I can do it myself. :) So clear and helpful! Thank you!

2 ana 05/18/2011 at 5:06 pm

love the music! :D thanks for sharing.
& great post. thanks so much for spoiling us all.
& a double thanks for your lovely comment about my pups :) they send kisses.

3 Joy 05/18/2011 at 5:43 pm

Yay for more tutorials. And great music picks!

4 Amy 05/18/2011 at 7:17 pm

Yay! I’ve been waiting on this! THANKS sooo much Katrina. Can’t wait to do it!!! :)

5 Brittany Erin 05/18/2011 at 7:37 pm

This was perfect! thank you so much!

6 Jillian 05/18/2011 at 8:00 pm

I have been waiting for this very tutorial! Thank you so much for putting it together. I can’t wait to check it out.

7 Sarah Rooftops 05/19/2011 at 12:05 am

I was going to search for this very topic this weekend! Thanks!

8 Will 05/19/2011 at 12:25 am

I just watched from start to finish – so useful. Thank you.

9 Danielleorama 05/19/2011 at 1:23 am

cant wait to check this out! I could just SQUEEEEZE you<3 you're so awesome for providing this info. I'm downloading the new photoshop tonight, cs5. Do you know if the stuff you do in cs3 is compatible with cs5? I'm hoping it's not too far off so i can be a premium member ;)

10 carolyn 05/19/2011 at 6:19 am

Holy smokes! I love this and can’t wait to revamp my nav bar!

11 Jenny 05/19/2011 at 7:44 am

I think you can do this with WP too but I haven’t figured out how to yet :P I should and then make a tutorial.

12 sarah 05/19/2011 at 8:46 am

As always, you have the best tutorials! You make changing, designing and having a blog so much more fun. Thank you!!!

13 Emily 05/19/2011 at 8:56 am

Are you mostly focusing on Blogger with the tutorials, or can the WP people among us chime in with questions, as well?

14 Anna 05/19/2011 at 9:26 am

It’s so clear and detailed… thank you so much for this tutorial!! And I love your blog!

15 Nadia - Cupcake Couture 05/19/2011 at 11:52 am

Thank you so much for this wonderful tutorial.
I just can’t wait to get started! THANK YOU! xxx

16 shaina 05/19/2011 at 1:13 pm

can’t wait to give this a try!! thanks so much for your helpful tutorial. love it!!

17 Katrina 05/19/2011 at 3:06 pm

@danielleorama: not sure, but i found this @ forums.adobe.com:

“Photoshop seems to work ok opening it’s files in older versions but I think you have to keep File Compatability mode on (in the preferences).”

@jenny: yes, you can and complexity will depend on your wp theme. :)

by the way: if you don’t want to deal with several images, another way to add an image-based nav bar is to create an image map. this way, you only have to work with a single image.

http://www.puglypixel.com/2010/11/17/pixel-pointers-image-maps/

18 Alix H. 05/19/2011 at 4:58 pm

THANK YOU. So helpful.

19 Allie 05/25/2011 at 12:52 am

I love this! I’ve been trying to figure out how to do this forever, but for some reason I can’t get it to work!

20 Danielleorama 06/10/2011 at 10:39 pm

I finally got a chance to watch this! It is sooo understandable and I can’t tell you how much I appreciate you making this available! for free no less! You have me very inspired to work on an awesome blog layout but for now “lemon meringue is serving me very well :)

21 PamH 06/20/2011 at 4:19 pm

You are thebomb!!

22 Jen 06/22/2011 at 12:37 pm

We’re not worthy! I will be eternally grateful. YOU, my dear, are AMAZING. Thank you for all you do.

23 nova 06/29/2011 at 1:11 pm

Oh my gosh you made the impossible possible! I DID IT ALL BY MYSELF, hahaha. Yay!

24 Christine Rowan 06/30/2011 at 5:12 pm

So amazing you’re!!! I was able to do it all on my own. My next question is how do you do the drop downs and link with the blog. Does that make sense? Like for instant one of my tabs is categories and I would want the drop down to have engagements, weddings, newborns, etc.
Is there a tutorial for this?

Thank you a million times!

25 dian tjahaju 07/04/2011 at 11:06 am

thanks a zillion Katrina.. i’m kinda try to find this tutorial for some yearrsss. i was so desperate, and last time when i have no time for make my own i just pick one of the free-template and upload it.
and because of your easy to understood tutorials, i start to do it by myself. hope you don’t mind that i mention your name for my scheduled maintenance re-design template :)
still working on my blog though. thanks again for inspiring me :D

Previous post:

Next post: