Blogueiras de primeira viagem #8--Cabeçalho com menu mapeado
13:00Heyy galerinha,hoje vou ensinar vocês a fazer um cabeçalho com menu mapeado, é bem simples e eu aprendi usando o tutorial da Cherry Bomb ***se quiser ver o tutorial aqui*** e trouxe uma forma mais fácil e sem precisar de programas como Photoshop para fazer,então vem comigo.
Esse post está enorme,então clique em Leia Mais para vê-lo por completo
Abra o site: http://apps.pixlr.com/editor e coloque em Criar nova imagem,selecione a opção transparente e coloque Largura:960 e Altura:450 (esses são os valores que eu usei para que a imagem ficasse boa no blog,mas se preferir reduzir não deixe abaixo de 800 e 350,não recomendo aumentar os valores,não achei no tutorial da Cherry alguma indicação quanto aos valores, é que depende do tamanho do seu blog e tal,recomendo que teste o cabeçalho antes de colocar no blog em definitivo.
Agora vá em Camada>Adicionar imagem como camada e selecione seus pngs,brushes e afins que deseja colocar no cabeçalho,eu recomendo deixar sem escrever,porque aí você usa fontes mais bonitas que tem no pixl express que a gente vai entrar já já.
Depois de colocar os pngs vá em Arquivo>Salvar,como eu falei antes,vamos deixar para escrever no pixlr express,lembre-se de salvar o arquivo como PNG,porque se não vai ficar com fundo branco quando você for colocar no blog.
Agora vá em http://apps.pixlr.com/express esse é Pixlr Express onde vamos terminar nosso cabeçalho e incluir o menu.
Clique em Browse e abra a imagem que você salvou.
Depois de abrir sua imagem,você pode colocar algum efeito se quiser,mas eu irei direto a parte importante,escrever o nome do blog e as abas do menu.
Clique em Type e escolha uma das opções,dentro de cada uma você tem uma variedade de fontes, é só escolher a sua preferida e escrever o nome do blog.
Vocês podem ver que imagem tem o fundo cinza clássico do pixlr express,isso significa que a imagem está realmente em PNG e pode ser usada sem problemas :)
Depois de escolher a fonte para escrever o nome do blog,escolha uma fonte que você usará como padrão nos nomes do menu,o único problema do pixlr express é que ele não abre na fonte que você usou anteriormente,então memorize qual a fonte usada ok.
***As fontes usadas foram:No cabeçalho--> Daniel (da aba Handwritten) /// No menu-->Caviar Dreams (da aba Sans)
Você escreve cada nome da aba do seu menu convencional,que já existia,e depois que terminar coloque em Save e use Quality:100
Agora vamos chegar na parte do mapeamento da imagem,o mapeamento nada mais é do que linkar seu menu para que ao clicar você seja redirecionado para a aba,por exemplo,se quiser ir para o Início você clicará e será redirecionado para o começo do blog e por aí vai...Antes de começar a mapear você precisa hospedar a imagem,porque se você abrir direto do pc a imagem não vai ficar em PNG quando for mapear,aí seu cabeçalho vai ficar com fundo,então recomendo hospedar em www.tinypic.com é só colocar em Procurar,selecionar sua imagem,Upload Now e colocar o código que eles pedem e esperar carregar,quando terminar vai aparecer uma variedade de códigos,a última opção é Direct link for layouts é a que você vai selecionar,copiar o código e guardar ele com você,aí entre no site www.image-maps.com e coloque o código que você copiou, depois clicar em Start Mapping,depois de carregar coloque em click to continue
Depois de tudo isso,sua imagem vai aparecer assim:
**A parte escrita do cabeçalho não está aparecendo muito bem porque deixei na cor branca,mas você pode escolher uma cor que se destaque com o fundo do seu blog ou usar sua cor preferida :D
Clique com o botão da direita para abri o menu,coloque em Create Rect e selecione uma aba do menu,partes importantes:
-Em Map URL você coloca o link da sua aba,se for inicio coloque o link do seu blog,e por aí vai.
-Em Map URL você coloca o link da sua aba,se for inicio coloque o link do seu blog,e por aí vai.
-Deixe todo resto em branco
-Vá em Settings e coloque Opacity:0.0, isso vai deixar a seleção transparente e quando você clicar na aba ela ficará pontilhada.
-Depois que acabar clique em Save
-Depois que acabar clique em Save
Faça isso em todas as abas,e também na parte do cabeçalho,coloque o link do seu blog.
Depois de feito clique novamente com o botão da direita e selecione Get Code>HTML Code e copie esse código,recomendo que cole numa página do Word ou Bloco de Notas,o meu código é esse:
****no final do código acrescente </div> como a parte vermelha do meu código
<img id="Image-Maps-Com-image-maps-2015-03-20-160618" src="http://i62.tinypic.com/a4yag0.png" border="0" width="960" height="450" orgWidth="960" orgHeight="450" usemap="#image-maps-2015-03-20-160618" alt="" />
<map name="image-maps-2015-03-20-160618" id="ImageMapsCom-image-maps-2015-03-20-160618">
<area alt="" title="" href="http://www.littlewonderscrm.blogspot.com" shape="rect" coords="156,344,266,395" style="outline:none;" target="_self" />
<area alt="" title="" href="http://www.littlewonderscrm.blogspot.com" shape="rect" coords="281,347,394,397" style="outline:none;" target="_self" />
<area shape="rect" coords="958,448,960,450" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
</map></div>
Agora entre no seu blog,vá em Modelo>Editar HTML e procure por Header1 vai aparecer mais ou menos isso <b:widget id='Header1' locked='true' title='NOME DO SEU BLOG (Cabeçalho)' type='Header'/>
apague todo esse código e seu cabeçalho irá desaparecer
apague todo esse código e seu cabeçalho irá desaparecer
Salve,e vá em Layout>Adicionar Gadget>HTML/Java Script e cole o código gerado pelo image maps,vai ficar mais ou menos assim
Agora é só salvar,visualizar e ver se funciona
Se você não gostar do resultado é só apagar esse gadget,colocar em Adicionar Gadget e no final da lista tem o Cabeçalho,selecione ele e coloque seu cabeçalho antigo.
Espero que tenham gostado,ficou meio grandinho,mas o passo a passo ajuda bastante,qualquer dúvida estou por aqui oks.
Para conferir o meu menu entre aqui, o blog está um caos,não reparem,estou fazendo alguns tutos para testar e trazer para vocês :)
Beijos doces ^.^
4 comentários
Guria oi! Olha muito bom seu post! com certeza vai ajudar muitas pessoas parabéns viu te desejo muito sucesso beijos da Ju http://www.cantinhojutavares.com
ResponderExcluirObrigada Ju,que linda,sucesso em dobro pra ti minha flor :D
ExcluirBeijos ^.^
Jennyfer, belo tutorial!
ResponderExcluirApesar de estar na blogosfera, não entendo grande coisa de layouts e companhia, por isso , tenho uma parceria com uma estudante de design que me ouve e faz o layout como quero. Se dependesse de mim, não sei não.. rs
Creio que ajudará muitas pessoas!
Obrigada Jheni :D
ExcluirTento fazer tudo sozinha,porque contratar um designer sai um pouquinho caro por aqui, é só pesquisar bastante que dá pra montar layouts bem legais, é muito bom ter alguém pra ajudar né,ainda mais um especialista rsrs
Obrigada,espero que ajude mesmo :D
Beijos ^.^
Obrigada por ter lido a postagem
Conte-me o que achou *--*
Deixe seu link nos comentários para que eu possa retribuir a visita <3
Se preferir para deixar seu link use
Esse código para comentar