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.
Great tutorial. Pretty much anyone could reference this for a custom header. :]
ReplyDelete// ▲ itsCarmen.com ▲
This is literally brilliant! Thank you for sharing!
ReplyDeletexo, jill
www.BornFancy.com
You are welcome sweetie.
DeleteThis amazing !! Pretty much helpful
ReplyDelete