Okay, I already had menu buttons up on my site. However, I needed to add a new button today for the 2nd Saturday Art Hop of Redding, California. This should of been an easy task for me, since I had already spent hours researching adding buttons/pages last time I made them. BUT...it took some time. So, I thought I would write myself up a quick tutorial for the next time I need to change them so I don't make the same mistakes.
I got all the information I needed from two different sites that I love. The first site is The CoffeeShop Blog where I relearned how to add menu buttons to my blog. The second site is April Showers Blog where you learn how to connect your menu button to the page you want it linked to.
I suggest going to google docs to have somewhere to store all of our HTML code and a place to save it for the day you decide to change things around again. Wish I had done that!
To begin I created my own buttons in CS5 and made the document 150 pixels wide by 75 pixels tall. I used House of 3's digital negative frame for the frame you see on my buttons that looks like...you guessed it...a film negative. Then I added a drop shadow, but I am not too sure it is even noticeable on my blog...oh well. Last I added my text in one of my many fonts, I think it was Adler. After that I turned off the eye in the layers palette to make it a transparent document and saved it as both a .psd and .png. The .psd file was so I could make more buttons without the work, just change the type layer and wah lah, now you have a new button that says About Me instead of Home. And then saved as a .png so that my buttons would have a transparent background.
After that I followed the Coffeeshop blog's advice of going to Tiny Pics to upload my newly create menu button to get the code needed to make it appear on my blog. After you upload the button, copy the code that says "layout". With this now copied, go to google docs and paste it for future reference, do this with all of your buttons. I labeled next to each code what it was for. Example "crazy code that I just copied from Tiny Pics Home Menu Button" That way I knew which code was for which button. Do this for each button.
Now, you need to take that little code from Tiny Pics that is now in your google doc for easy access and paste that puppy right after the =" in the code below. So, now you need to delete all of the code that says http://menubutton1-direct-link.jpg/ since you just put your button info in the correct spot.
I am not able to imput the code here....so here is a link showing the code.
Once you have all this crazy code written in your handy google doc, lets go do something with it. Go to blogger where you usually do your posts. Click on "Design" which takes where you can add different things/gadges. I chose the html/gadget right below header, since I wanted my buttons under my header. Click on the "edit" button in the gadget below your header, and it brings you to a pop up window. So, now is the moment of truth...paste that big code into that window and click save. Then, if everything was imputed correctly, and pray it was...cause fixing the code is a pain in the arss! One extra character or missing character will really mess up your code...believe me. So, go view your blog....are there buttons? Hope so!
The next part is easier and I got all this information from April Showers Blog. To attach a page to the button you first need to create a page. Go back to blogger and create a page by going to where you normally create new posts and click on "Edit Post" and click on "Edit Pages". Write whatever you want...today I did an "Art Hop" page. Once I was done with my page I clicked "publish post" and it asks if you want to add a gadget, click NO. The view post to see is it worked. Do you see your latest post? Click on the URL, which is the address for the page and copy it.
Now for the easy part, go back to where you pasted your menu button codes and click "Edit" again. You will see your box full of code...if you still have it saved in google docs then go to the next step...if you don't SAVE IT! Just in case you goof up! Now, click on "Rich Text" and you will see your beautiful little buttons. Click on the button you want to connect a page to, for me it was "Art Hop" and then click on the hyperlink, the picture of the world with a paperclip on it. Then paste your code in the little link box! Then click save. Go check it out, did it work? Hope so! Now do this to all the rest of your buttons with all of the URLs from the pages you want attached to each button.
Hope this wasn't too confusing, and if it was...go check out those links I have included for you.
The next part is easier and I got all this information from April Showers Blog. To attach a page to the button you first need to create a page. Go back to blogger and create a page by going to where you normally create new posts and click on "Edit Post" and click on "Edit Pages". Write whatever you want...today I did an "Art Hop" page. Once I was done with my page I clicked "publish post" and it asks if you want to add a gadget, click NO. The view post to see is it worked. Do you see your latest post? Click on the URL, which is the address for the page and copy it.
Now for the easy part, go back to where you pasted your menu button codes and click "Edit" again. You will see your box full of code...if you still have it saved in google docs then go to the next step...if you don't SAVE IT! Just in case you goof up! Now, click on "Rich Text" and you will see your beautiful little buttons. Click on the button you want to connect a page to, for me it was "Art Hop" and then click on the hyperlink, the picture of the world with a paperclip on it. Then paste your code in the little link box! Then click save. Go check it out, did it work? Hope so! Now do this to all the rest of your buttons with all of the URLs from the pages you want attached to each button.
Hope this wasn't too confusing, and if it was...go check out those links I have included for you.
No comments:
Post a Comment