Tutorial: Colocando links no menu do blog

Boa tarde meninas, hoje eu vou ensinar o passo a passo de como fazer o menu do blog e colocar links no mesmo. Em primeiro lugar é importante ressaltar que ter um blog não é nada fácil e depois de decidir fazer vocês tem que ter muita paciência até que ele fique do jeitinho que vocês querem, então vamos aprender logo como fazer isso.

01. A primeira coisa a ser feita é criar as páginas para obter links para o seu blog, para fazer isso vocês vão o blog e daí procurem por PÁGINAS no lado esquerdo da tela, encontrando páginas criem uma nova página exatamente com o nome que vocês vão colocar no "MENU PERSONALIZADO". Criem o tanto de páginas que terá no seu menu, depois vocês vão em layout e procurar pela aba ''páginas" e ir marcando na ordem que vocês querem que apareça. Ficando assim:

02. Depois de criar as páginas vocês vão fazer o menu com a letra e objetos que desejarem no Photoscape, lembrando que esse menu tem que ser em um fundo transparente (vou deixar o fundo aqui no blog prontinho para que vocês não se confundam na hora de fazer. Bem as dimensões para fazer o menu são 766 x 64.

• Sugestão de fontes para o menu: Tem fontes que eu em particular acho muito bacana para fazer o menu, mas também do estilo do seu blog, vou colocar os nomes. 

dimensão de menu

sugestão de fontes

sugestão de fontes

03. Com o menu pronto agora nós vamos hospedar os links nele. O site para fazer isso é o Image Maps . Ao abrir o site, abra a foto de menu que você criou no Photoscape e clicar em Start Mapping, É importante vocês prestarem bastante atenção nessa parte e fazer tudo como vai seguir aqui. Depois de clicar em Start Mapping seu menu deve aparecer em uma nova tela, clique com o botão direito do mouse e selecione a opção "Create Rect"e depois vai aparecer um pequeno quadro assim: 

Nessa parte que diz ''Map URL" digite o URL da página que criamos lá no início e depois vocês vão em "Settings" e tirem o "visible" o troquem por "hidden" depois salvem. E isso cês vão fazendo até prencher todas as páginas criadas.

04. Depois de fazer tudo isso aí citado acima, cliquem novamente com o botão direito do mouse e clicar em "Get Code" e ele vai gerar um código HTML que vocês vão copiar ele, mas antes de copiar escrevam isso acima do código <divstyle-"text-alling:center:"> e isso abaixo </div>

06. Agora vocês vão em layout e vão criar uma nova aba de "HTML/ JAVA SCRIPT" e nela colar o código que foi gerado pelo Image Maps