Personalize a Linkbar do seu blog


A Linkbar é aquele menu horizontal no qual podemos visualizar abaixo do banner principal. Ele serve para uma navegação mais rápida, fazendo com que o usuário perceba logo os principais pontos do blog, ou melhor dizendo, que ele veja os assuntos mais falados, mais propostos no blog.

Por que usar uma linkbar?
Exatamente pelo que eu acabei de dizer, quando um usuário acessa seu blog, ele procurará algo que o interessa, lógico, no entanto, muito não tem paciência para ficarem pesquisando e clicando em próxima página, logo, eles procurarão uma forma mais rápida, e a Linkbar é a forma mais fácil e eficaz de fazer com que o seu visitante enconte o que quer no seu blog.


Veja a minha linkbar (menu em azul) na imagem abaixo:

Perceba que quando você passa o mouse em cima de qualquer um dos links eles ficam com uma camada maior e laranja. Fiz isto hoje e gostei tanto que resolvi fazer este post. Mas antes vamos adicionar a Linkbar.
Se o seu blog ainda não tem uma linkbar, não se preocupe, indicarei dois tutoriais para você.
Com a linkbar já adicionada a seu template, vamos colocar este efeito que se chama Hover.
Vá em Editar HTML e procure por:

#linkbar a:hover

Logo abaixo, cole o seguinte:

#linkbar a:hover {
color:cordaletra;
background:cordofundo;
padding:15px 15px 15px 15px;
}

Perceba que existem dois textos em negrito, é neles nos quais você deve alterar.
No primeiro, o cordaletra, você deve procurar uma cor para a letra que ficará na Linkbar.
No segundo, o cordofundo do você deve procurar uma cor para a cor do fundo do efeito, ou seja, para quando o visitante passar o mouse em cima, ela aparecer. No meu caso eu coloquei laranja.
O padding é responsável pelo tamanha do quadrado do efeito, ou seja, quando um usuário passa o mouse em cima do link, ele ficará com um quadrado da cor que você escolheu, o padding é responsável pelo tamanho. No meu caso eu usei 15px, você pode alterar para mais ou para menos, contanto que você coloque os 4 elementos.

Exemplo: padding:10px 10px 10px 10px
Só para lembrar que... você deve colocar as cores em HTML caracteres hexadecimais.
Veja uma tabela de Cores em HTML aqui.

Feito este processo, clique em visualizar, e se estiver tudo OK, clique em Salvar Modelo!
É isso aí, espero que tenham gostado.
Muito obrigado por sua visita, volte sempre! :)

4 comentários:

  1. Passando para agradecer pela dica foi ótima!!!
    Estava procurando a algum tempo valeu!!!

    ResponderExcluir
  2. Olá, pelo o que vi o post de vocês devem me ajudar muito.
    Mas o meu problema com essa tal de linkbar está aumentando cada vez mais, pois quando vou procurar um código no HTML a barrinha fica vermelha (indicando que não há nenhum código referente ao que digitei por ex.: #linkbar a:hover {, eu não consigo achar ela de maneira nenhuma!
    E a minha linkbar ficou estranha, não sei se fiz algo errado na hora de editar o HTML dela, quem passou o post de como inserir uma linkbar foi um outro site de ajuda no blogger também.

    Estou muito confusa a respeito disso, não sei o que fazer. se puder entrar em meu blog e dar uma olhadinha como ficou a linkbar 'estranha' rs, por favor: www.toquelilasvc.blogspot.com.br

    Se vc puder fazer uma linkbar totalmente personalizada para mim eu dou até a senha do meu blog, pois imagino que você não fará nada a que me prejudique pois estou pedindo somente uma forcinha.

    Aguardo uma resposta o mais breve!

    ResponderExcluir
    Respostas
    1. Olá Julia.

      Acessei seu blog e vi que sua link bar está normal. Você usa um template "Designer do Modelo", do próprio Blogger, então, quaisquer alterações devem ser feitas no próprio painel "Modelo > Personalizar".
      A linkbar é a "Barra de links". No seu blog ela representa a "Inicio", "Testei", "Contato" e "Sorteios".

      Não posso acessar seu blog e recomendo que não passe sua senha para ninguém. Você não pode confiar em alguém que nunca viu só porque ele tem um blog de ajuda ;)

      Espero ter ajudado.

      Excluir

Visualizações dinâmicas

Arquivo do blog

Estamos aqui também

Copyright© 2010 - 2013 - Redes e Blogger - Todos os direitos reservados.

Redes e Blogger é orgulhosamente desenvolvido com Blogger


Termos de uso | Política de Privacidade | Mapa do blog

Template by Dicas Blogger | Modified by Wilamis Rogério