How to Design Your Navigation Buttons
While on my hunt for a free blogging platform I checked out Wordpress and Blogger. I didn't want to invest money off the bat before I had a chance to see where this might go. If it succeeds I will switch over to a paid host, but, in the mean time I wanted something free I could play with.At first I tried Wordpress. It is an awesome free platform for those that don't want to do their own styling. Personally, I found myself very frustrated at the lack of ability to make my blog mine. I blog for a creative outlet and on Wordpress I was not able to have all the creative freedom I wanted.
So, I went over to Blogger. It has been a process of learning as I haven't done HTML/CSS since the days of Myspace, but, so far I am loving it.
These tutorials are based on the Simple template and will produce a result similar to my drop down navigation bar.
The first thing you want to do is map out your navigation in your blogging notebook. This is a critical part of your blog. If your readers cannot find their way around your blog, they aren't going to spend time on your blog. If you are just starting out you can always go back and switch things up if you change your mind at a later time.
(Important reason to have a blogging notebook is so that you can keep track of what you do if/when it comes time to change it)
Even though I have a search bar, I am not a fan of them. I believe that if people use your search and you don't have what they are searching for they will get disappointed. But, with a well mapped out navigation bar you can with one click show them all of their choices.
The next step is to set up a test blog if you do not already have one and back up your template. Save your back up where you can easily find it.
Start a new template. I started out with 90x35. I wouldn't suggest going much larger in height that 35px. Adjust the width as needed. If you have too many images or go too long it will move them into a two row navigation bar.
From here select the text box and write out the first of your tabs. You can also add images. If you add images add them as a new layer. Get it looking how you want it to look.
 |
| I only used text on mine |
Then go into your dock labeled layers, channels, and paths. You should have two layers (three if you added an image) - background and your text. Right click on your background and delete your background layer.
Click file and go all the way down to export (Shift+Ctrl+e). Make sure the image is a .PNG and click export. In the next pop up box click export again. And the first part of your button is done.
Upload this to your imaging host. I use Picassa web since it is easy to use with Blogger. If you use Picassa web do not delete these photos from your Google+. They don't have to be visible to those in your circle, but, don't delete them.
As we do this go one image at a time. Play around with it. Have fun.
