DESIGN YOUR OWN HEADER AND NAVIGATION BAR

Designing your own blog may seem hard at first, but I promised myself that anything I learn along the way I’ll share it with you, so you can design your own blog in a very easy way. In this week’s post from the series Designing your blog I’ll show you how to design your own customized header and navigation bar in very very simple way.  I wanted to start with that step because I believe that the header is the first thing that is noticed in any blog, so having your own custom header and navigation bar would provide a sense of professional look for your blog.

First things first, let me remind you this post is for blogger blogs only; as Wordpress.com doesn’t provide customizing service and it is only for Wordpress.org, so if you want to design your own custom header for your blogger blog then you came to the right place.

I designed my picture using photoshop, but if you don’t have photoshop, pic monkey offer a great substitute for you and it is easy way.

STEP (1):

Make a new image on photoshop. You would have to make the width and the height to suit your blog, but I think that making the header with max 1200 width is better because of different sizes of the pc and laptops. As or the height. I thought about making it 300, but then changed my mind to 300.  It is really a matter of what would suit your blog best.

STEP (2):

Select the font you wish to use and the size of it and begin to design the header of your dreams. I used MontereyFLF font. The header name was 72pt and the pages/navigation 14pt.  Save your image after you finish, don’t forget to change it to jpg.

STEP (3):

Open image-map site and browse your image.  This would make you add the links that your navigation or page would links to. This step is what would customize your navigation bar.

STEP (4):

Right click on your targeted text and choose create a rect. Adjust it to suit the text and then add the targeted link to Map URL. Do this step to all the text till you finish them.

STEP (5):

Right click on the image and choose get code and then go to html code and copy the code on the bottom.

STEP (6):

Add Html gadet under the header and paste this code in it without title.

STEP (7):

Create a new image with dimensions 30 as width and also 30 as height.

STEP (8):

Replace your header with this image.

VIOLA you have your won custom header now.

Please note that what I did for the header and navigation bar or pages were on the same image, but you can totally do it on your navigation bar with no header, if you don’t want them to be linked together.