15 de setembro de 2016

Como mapear um cabeçalho ou menu passo a passo.

Big tutorial como mapear cabeçalho ou menu.

 Hoje vou atender um pedido feito pela ask é esse aqui:
pedido ask png



Big tutorial maper cabeçalho pngA imagem que ela fala é o meu cabeçalho que foi mapeado embora pareça complicado ele é muito simples de fazer só é um pouco longo,vamos lá.Primeiro você deverá fazer seu cabeçalho normalmente só que nele você vai colocar as paginas que você quer que apareça no menu,pode ser colocada em qualquer lugar do cabeçalho, eu trouxe como base para vocês o menu em baixo, esse cabeçalho foi feito no tamanho 1112 px então se você for usar a base deverá mudar seu template para esse valor ok,eu trouxe também uma base transparente no mesmo tamanho caso você queira fazer seu cabeçalho,vamos ao tutorial:

Primeiro faça seu cabeçalho se quiser pode usar essa base transparente ,se ela não estiver preta passe o mouse em cima para encontra-la.
Base transparente PNG

Ou essa onde você só precisara colocar os nomes das paginas e do seu blog e alguns brushes se quiser tem bastante espaço.

CABEÇALHO  IMG PNG


Abra seu editor se não tiver um sugiro o Photoscape pois é esse que eu uso você poderá baixa-lo aqui.

Faça o seu cabeçalho ou abra a base que você baixou e clique no T que tem na lateral escreva os nomes das paginas arraste até o rodapé do cabeçalho e clique em foto+objeto feito isso salve.

O meu ficou assim:
CABEÇALHO MAPEADO IMG PNG

Agora será necessário que você hospede sua imagem em um  site de sua preferência, se não souber como sugiro que leia este artigo como hospedar imagens no blogger.

Depois de hospedada sua imagem copie o URL DA IMAGEM e vá até esse site Image Mapper vai aparecer a seguinte tela role a pagina até encontrar essa parte ,cole a URL DA IMAGEM que você copiou e clique em load image.
mapeando imagem PNG

Agora clique em New link e arraste o quadradinho acima da frase que você quer mapear.

Em link copie o link que deseja que se abra quando clicar em cima como o exemplo abaixo o link e nome do blog.
mapeando imagem PNG

Siga o mesmo procedimento em tudo que você quer mapear terminado, role até  o final da pagina e clique em faça código clique em visualizar e se estiver tudo ok copie o código,senão refaça os procedimentos novamente. 
 Depois de copiado o código vá até seu blog em Layouts adicionar Gadgets e procure por HTML/JavaScript cole o código e salve.

Para colocar o cabeçalho mapeado você deverá  remover o cabeçalho do blog veja como nesse post.

Você pode mapear qualquer imagem como por exemplo só o menu veja esse.
Menu mapeado img PNG
Dica se você não souber como esconder o menu do blogger e o url da pagina que quer colocar veja o final desse post.
 Então meus amores por hoje é só espero que gostem e que eu tenha explicado direitinho,mas qualquer duvida podem perguntar nos comentários e se quiserem algum tuto podem pedir que eu faço ok ,beijos e até o próximo post...

Continue lendo ››

18 de junho de 2014

Como personalizar o Gadgets marcadores do blogger

O tutorial de hoje será como personalizar os marcadores do blog,para quem não sabe os marcadores é um Gadgets que separa suas postagens por assuntos(categorias),esse é um dos Gadgets mais importantes em um blog,pois deixa o blog organizado e facilita a navegação dos leitores ao nosso blog pois o leitor pode procurar direto o tipo de assunto que levou ele ao blog.
E deixar esse Gadgets com um estilo diferente chama a atenção para os marcadores que você estipulou em seu blog e provavelmente quem visitar seu blog clicará em mais postagens.

O modelo depois de personalizado ficara assim,mas com as cores de sua escolha.

marcadores 1



Esse tutorial eu aprendi com o blog Prodeveloper. então créditos a ele.

Lembrando que esse tutorial só ira funcionar se você já tiver marcadores em suas postagens,caso não saiba como coloca-los, sugiro que leia este artigo Como separar as postagens por assuntos.

Então vamos ao tutorial

Para começar verifique se os marcadores de seu blog já estejam no formato nuvem, caso não esteja, marque a opção "cloud" como mostrado na imagem abaixo:
marcadores



vá até modelo editar HTML ,aperte Ctrl+F e pesquise por 
]]></b:skin>. Veja a imagem:


exemplo
Acima dessa  Tag cole esse código.




Visualize para ver se está tudo  ok e salve.

Para mudar as cores modifique as partes que começão com # veja a tabela de cores aqui.

Continue lendo ››

22 de maio de 2014

Como deixar a seleção de texto do blog colorida.

No tutorial de hoje vou ensinar   como deixar a seleção de texto do blog colorida ,é algo bem simples de se fazer e muito útil também pois deixa nosso blog com a nossa cara,são esses pequenos detalhes que fazem a diferença e deixa o blog com uma cara mais profissional então vamos lá.

Primeiro veja uma preview do antes e o depois.

antes


depois

Em seu blog vá até modelo editar HTML de um clique dentro dos códigos e aperte Ctrl+F juntos e procure por  ]]></b:skin> .

Quando encontrar cole o código abaixo (logo a cima como na imagem ).


codigo html


 
 Nesse código que eu passei para vocês a
seleção de texto é rosa,mas você pode modificar para uma cor de sua preferencia  basta mudar as partes
que começam com # ,pela cor que você escolher veja a tabela de cores aqui,depois de feita as alterações salve o modelo e pronto.
Por hoje é só pessoal espero que tenham gostado,se quiserem que eu faço algum tutorial peçam pelos comentários que assim que puder eu faço,beijo e até o próximo post...

Continue lendo ››

11 de abril de 2014

Menu para sidebar super fofo.

No tutorial de hoje eu trouxe um menu para sidebar muito fofo com efeito veja a preview e vamos ao tutorial...
image preview
Em seu blog vá até modelo,editar HTML e aperte Ctrl+F juntos e procure por: ]]></b:skin>
exemplo

copie e cole o código abaixo acima dessa Tag como na imagem.

inicio/*menu por Liah - Cherry Bomb - credite sempre*/#menucb { 
float: left; 
display: line; 
margin:1px; 
background:#f2eee8; /*Cor de fundo */ 
width: 87px; /*Largura de cada link do menu */ 
height: 25px; 
text-align:center; 
font-size: 16px; /*Tamanho da fonte*/ 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; 
-moz-box-shadow: 1px 0px 9px #cccccc; 
-webkit-box-shadow: 1px 0px 9px #cccccc; 
box-shadow: 1px 0px 9px #cccccc; 
text-shadow: 0px 1px 5px #cccccc; 
-webkit-transition: color 0.7s ease-out;-moz-transition: 
color 0.7s ease-out;transition: color 0.7s ease-out; 

#menucb:hover { 
background: #cfd9f6; /* Cor de funo quando passa o mouse*/ 
color: #fff; /*Cor do texto quando passa o mouse*/ 
}
Vá até o layout do seu blog, adicione um gadget de HMTL/Javascript onde você quiser que o menu apareça e coloque esse código:
Repita ele para cada link que for colocar no menu e substitua a url e o nome do link. Depois é só salvar o Gadgets e pronto!
Obs:Para mudar as cores basta mudar os trechos que comecem com # tabela de cores aqui
salve as alterações.


<a href='LINK' id='menucb'>TÍTULO DO LINK</a>



Continue lendo ››

Design por Viviane Sonia/Dicas no Blog | Tecnologia do Blogger | Todos os direitos reservados ©2013