For this Blogger Tutorial I am going to show you how to create a navigation menu in Blogger. My good bloggy friend, Melissa over at Honey Bee Buzz sent me an email and asked for a little help in accomplishing this goal. This really is a LOT easier than it looks!
It requires only these three tools,
Okay so for starters, you will need to establish what tabs you want.
Next, if your posts do not have labels, you will need to label them. There is a super easy method of doing this in the edit posts section. Located in the upper left hand corner you will see a drop down menu titled "label actions" This allows you to select several posts related to one label topic and label them quickly.
Now, if you have not written an 'about me' post or a 'contact me' post and would like to have that as one of your tabs, you will need to do so. Remember to label them as about me or contact me Just be sure to click the "post options" link down in the lower left hand corner and change the date to sometime before you started blogging. Mine all are set for 1/1/09 Otherwise this will show up on your post wall as a newly published blog post! If you don't mind that, then don't worry about changing the date :D
Alright I know that I said it was easy right? Up until now it's been kind of time consuming. This is the easiest part yet! The part that should be the hardest... I am going to show you how to enter the code into the HTML/ java script gadget box
Go to your dashboard, go to layout, and add a gadget. Make sure to choose HTML/ java script and add the following code into the "content" box
<_a href="http://neuffj.blogspot.com/">| Home |<_/a>
This url will need to be changed to YOUR blog's url
This text may be changed if you choose something other than "home" to describe your homepage. This is the part that shows up on your page
For the purpose of this post I had to add these, so please remember to erase these spaces after you copy and paste this code!
Okay, now that we have done the easiest one, it's time for a more complicated one. This will be added in the same HTML/java script gadget box directly underneath the previous code (the home one)
<_a href="http://neuffj.blogspot.com/2009/01/well-here-is-run-down-on-lil-ole-me-i.html"> About Me |<_/a>
This url will need to be changed to YOUR about me url
This text may be changed if you are far more clever than I, and choose something other than "about me" This is the part that shows up on your page
For the purpose of this post I had to add these, so please remember to erase these spaces after you copy and paste this code!
If you need help finding your "About Me" URL I am going to walk through this right now. Okay, so lets head to the dashboard, then to edit posts. Due to our efforts from earlier we are able to find the post quickly on the left in the labels section. "about me" click it and then click view, viola a new window appears and you have at your disposal in your address bar your "About Me" url
After you have created all your wanted tabs, click the orange 'save' button in the gadgets window and it will disappear leaving you now with your "layout" screen. Being that you just created this new 'gadget' it will be located at the top of the list. Click it and drag it directly over top of the "Blog Post" section. If you are having trouble accomplishing this, when you are dragging the 'gadget' wait for a new box to appear just above the "blog post" section, it should be an almost yellow color. Once this has appeared, let go of the mouse and your 'gadget' is newly relocated. Although it won't stay there unless you click the orange "save" button in the upper right hand corner of the page.
This is how you create your personalized navigation bar/ tabs! If you have any questions you can feel free to email me. My contact info is located on my nav bar! Thanks for reading! Also, I've started a discussion on the blogfrog about adding more functionality to your blog. Swing by and add your thoughts.
It requires only these three tools,
Posts
Labels
Gadgets
Well then I guess it takes a little bit of copying and pasting, but other than that... eaZee peZee Labels
Gadgets
Okay so for starters, you will need to establish what tabs you want.
Next, if your posts do not have labels, you will need to label them. There is a super easy method of doing this in the edit posts section. Located in the upper left hand corner you will see a drop down menu titled "label actions" This allows you to select several posts related to one label topic and label them quickly.
Now, if you have not written an 'about me' post or a 'contact me' post and would like to have that as one of your tabs, you will need to do so. Remember to label them as about me or contact me Just be sure to click the "post options" link down in the lower left hand corner and change the date to sometime before you started blogging. Mine all are set for 1/1/09 Otherwise this will show up on your post wall as a newly published blog post! If you don't mind that, then don't worry about changing the date :D
Alright I know that I said it was easy right? Up until now it's been kind of time consuming. This is the easiest part yet! The part that should be the hardest... I am going to show you how to enter the code into the HTML/ java script gadget box
Go to your dashboard, go to layout, and add a gadget. Make sure to choose HTML/ java script and add the following code into the "content" box
<_a href="http://neuffj.blogspot.com/">| Home |<_/a>
This url will need to be changed to YOUR blog's url
This text may be changed if you choose something other than "home" to describe your homepage. This is the part that shows up on your page
For the purpose of this post I had to add these, so please remember to erase these spaces after you copy and paste this code!
Okay, now that we have done the easiest one, it's time for a more complicated one. This will be added in the same HTML/java script gadget box directly underneath the previous code (the home one)
<_a href="http://neuffj.blogspot.com/2009/01/well-here-is-run-down-on-lil-ole-me-i.html"> About Me |<_/a>
This url will need to be changed to YOUR about me url
This text may be changed if you are far more clever than I, and choose something other than "about me" This is the part that shows up on your page
For the purpose of this post I had to add these, so please remember to erase these spaces after you copy and paste this code!
If you need help finding your "About Me" URL I am going to walk through this right now. Okay, so lets head to the dashboard, then to edit posts. Due to our efforts from earlier we are able to find the post quickly on the left in the labels section. "about me" click it and then click view, viola a new window appears and you have at your disposal in your address bar your "About Me" url
After you have created all your wanted tabs, click the orange 'save' button in the gadgets window and it will disappear leaving you now with your "layout" screen. Being that you just created this new 'gadget' it will be located at the top of the list. Click it and drag it directly over top of the "Blog Post" section. If you are having trouble accomplishing this, when you are dragging the 'gadget' wait for a new box to appear just above the "blog post" section, it should be an almost yellow color. Once this has appeared, let go of the mouse and your 'gadget' is newly relocated. Although it won't stay there unless you click the orange "save" button in the upper right hand corner of the page.
This is how you create your personalized navigation bar/ tabs! If you have any questions you can feel free to email me. My contact info is located on my nav bar! Thanks for reading! Also, I've started a discussion on the blogfrog about adding more functionality to your blog. Swing by and add your thoughts.
9 comments:
Hmm, maybe I need to try this again in the morning after some sleep. I tried it out and I couldn't get it to work. When I posted, it just showed up as the words I had written on the side bar, instead of the code turning into the formatted tabs on the header. I'll let you know when I figure it out. Thanks so much for the post!
Melissa, thats cuz I forgot to tell you to move your gadget on top of your "blog posts" section in the lay out screen. Seeing as this is my first tutorial... I beg you to forgive me???? pretty please?
Oops, it was my fault. I didn't see the green _ that I was supposed to delete! I have my new navigation bar up and it is great! I tried to copy what you have for the Recipes and things, but it didn't work out. I have my posts labeled with the tags, but maybe your formatting is different that what it appears... (I just added search/label/recipes for all my posts labeled recipes but no luck).
Thanks for the great tutorial!
YAY!!! I did it =D Very good tutorial! Keep em coming please!
I love you ladies!!!! Thanks for the words of encouragement! I am glad it worked for you! I will post another tutorial soon then!
You are amazing! Thank you SO much. I have been trying to figure out how to do this for WEEKS and you made it so simple for me.
THANK YOU!
Thanks for this! My blog is looking a bit run-down lately, and I need to spruce it up. These instructions may help me out at bit!
You are a girl after my own heart. I love when blogs post useful stuff!
I'm following you for sure!
<3 Cole
http://www.simplicityembellished.com
Thank you so much for this tutorial! I've wanted to do this for so long but I didn't know if it was possible for a beginner like me. Thank you for your easy instructions!
Post a Comment