8 de julho de 2009

Como inserir uma Linkbar no cabeçalho do Blogger


A existência de uma Linkbar (barra de links) no seu blog é muito importante, pois além de facilitar a navegação interna de seus leitores, indo até aos conteúdos que você classificou como sendo relevantes, permite também a indicação de outros blogs de sua preferência. Alguns blogs infelizmente não têm essa opção, mas com essa dica que irei passar para vocês, esse problema não existirá mais.

Neste post irei mostrar como adicionar uma Linkbar horizontal logo abaixo o cabeçalho do Blogger.

1 - É sempre bom lembrar que antes de qualquer alteração no seu blog, faça um backup do template atual.

2 - Agora vá em Lay out -> Editar Html.

Com a ajuda do Ctrl+F encontre: </b:skin> e adicione o código CSS seguinte acima dela.

/* ----- LINKBAR ----- */
#linkbar {
margin: 6px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 100%;
position: relative;
background: #000;
border: 1px solid #000;
border-bottom: 0;
}

#linkbar ul {
margin: 0px 0px 0px 0px;
padding: 5px 5px 7px 5px;
text-align: left;
list-style-type:none;
}

#linkbar li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#linkbar h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: none;
visibility: hidden;
}

#linkbar a {
clear: both;
margin: 0px -4px 0px 0px;
padding: 3px 20px 3px 20px;
width:100%;
text-decoration:none;
font-family: arial, sans-serif;
font-weight: bold;
font-size: 12px;
color: #fff;
border-right: 1px solid #fff;
}

#linkbar a:hover {
color: #000;
background: #fff;
}

Novamente com a ajuda do Ctrl+F encontre o seguinte código:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Testing templates (Header)' type='Header'/>
</b:section>
</div>

E adicione o seguinte código após o código acima:

<div id='linkbar-wrapper'>
<b:section class='linkbar' id='linkbar' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Linkbar' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>

</div>
</b:includable>
</b:widget>
</b:section>
</div>

Visualize e se tudo estiver certo salve as alterações.

Está feito. É isso.

29 comentários:

  1. Kara Vlw. Todos os site que tentei dava errado, até que enfim encontrei.Vlw Mesmo.

    ResponderExcluir
  2. Olá, Adm "Ruffy"

    Estamos aqui para ajudar. Fico feliz que tenha encontrado o que procurava aqui no blog.

    Fique atento que teremos mais dicas.

    Abraço.

    ResponderExcluir
  3. olá
    Idenaldo
    até que enfim encontrei o que procurava
    obrigada
    continue sempre assim
    qualquer coisa
    estamos aí
    grata
    edile-amor

    ResponderExcluir
  4. OI
    QUANDO
    FUI FAZER
    deu a seguinte mensagem:

    Mais de um item encontrado com o id: LinkList1. Os IDs de itens devem ser únicos e exclusivos.

    ai num deu certo.

    Que fazer?

    ResponderExcluir
  5. Edilene,

    É bem provável que o template onde esteja querendo aplicar esse widget já tenha uma linkbar, por isso a razão da mensagem.

    Tente instalar este recurso novamente seguindo cada um os passos e caso a mensagem ainda continue, tente apagar as referências esse antiga linkbar.

    Qualquer dúvida estamos aqui.

    Grande abraço.

    ResponderExcluir
  6. Bom dia, Idenaldo
    Como pocso apagar?
    Abraços


    É bem provável que o template onde esteja querendo aplicar esse widget já tenha uma linkbar, por isso a razão da mensagem.

    Tente instalar este recurso novamente seguindo cada um os passos e caso a mensagem ainda continue, tente apagar as referências esse antiga linkbar.

    Qualquer dúvida estamos aqui.

    Grande abraço.

    ResponderExcluir
  7. Ola, Eduardo.

    Não entendi qual é a sua dúvida.

    Mande novamente a pergunta.

    Grande Abraço.

    ResponderExcluir
  8. Boa Noite Idenaldo.
    Muito obrigago pela atenção e por ter gostado blog,ocorreu que tive o mesmo problema da Edilene, e acabei tendo que trocar o template, muito obrigado foi muito útil sua dica!
    Abraços

    ResponderExcluir
  9. fiz tudo certinho e naum apareceu nada em meu blog
    será que meu template naum aceita linkbar???

    ResponderExcluir
  10. Boa tarde, Lênin!

    A respeito de sua dúvida eu teria que dar uma olhada mas minuciosa no código do template. Em alguns templates que são adaptados pode não dar certo, pois o widget foi baseado no modelo padrão do Blogger.

    Repita todo o procedimento novamente e persistir em não aparecer, você me fale e podemos tentar outra solução.

    Grande abraço e parabéns pelo blog.

    Idenaldo

    ResponderExcluir
  11. Muito obrigado pela atenção e a ajuda, mas eu acho que descobri o porque, na html do meu template não tinha esse codigo inserido na /* Variable definitions

    inseri ele e tudo certo!

    valeu mesmo e seu blog concerteza de ótima utilidade ajudando nos blogueiros!

    ResponderExcluir
  12. muito bom o blog, de ótima utilidade, até mesmo pra quem não manja muito de html e essas coisas...
    valeu
    abraço

    ResponderExcluir
  13. apareceu bX-ghj512 esta coisa veia

    affs
    eu tenhoq fazer um blog pra o povo q dança ai fica dando estes pit vc pode me ajudar ?

    ResponderExcluir
  14. Idenaldo,boa noite, vê se você pode me ajudar, fiz esse procedimento e a linkbar entrou, acontece que eu preciso criar link ou pastas, que se movimentem dentro do meu blog.

    Ex.: quero separa alguns trabalhos por temas (Azul, verde, amarelo) e queria usar os links para que as pessoas clicassem e aparecesse apenas as postagens referentes aquela cor!!

    Me dá uma amigo, pelo menos já percebi que você manda bem!

    att.

    Rodrigo Iezze

    ResponderExcluir
  15. Erlan, esses pits acontecem quando existe algum problema no Blogger. Pode tentar novamente que vai dar certo. Mas siga todos os passos rigorosamente.

    Rodrigo, é fácil fazer o que você está querendo. Basta você criar marcadores (tags) específicos para cada tema que você deseja e ai é só colocar o link na Linkbar.

    Explicando melhor: Você cria um marcador com o nome "Amarelo". O Blogger vai criar um link que irá relacionar todos os posts que estejam relacionados a este marcador. Basta você pegar esse link e colocar na linkbar.

    Espero que tenha ajudado.

    Abraço.

    ResponderExcluir
  16. O problema é onde ir para achar esses marcadores e como fazer a conexão deles com os conteúdos relacionados.

    Me ajuda pleeeease!!!

    ResponderExcluir
  17. Olá!
    Muito obrigada pelo excelente tutorial. Deu super certo.
    Gracias.

    ResponderExcluir
  18. Olá...
    Não estava conseguindo, mas deletei, fiz tudo de novo e deu certo.
    Muito obrigada!
    Bjs.

    ResponderExcluir
  19. Consegui colocar e agora como personalizo???

    ResponderExcluir
  20. O template do meu Blog tem algumas alterações que consegui fazer, o logotipo (cabeçalho) tem um tamanho além do que a maioria dos outros blogs possui, segui todos os passos mas não obtive êxito. Os códigos acima para que sejam incorporados tem alguma relação com o tamanho do logo do blog?

    ResponderExcluir
  21. Olá! Estou mundando o visu. do meu blog
    e queria colocar o menu (linkbar) mas não está dando muito certo.Segui todos os passos acima, e está aparecendo diversos códigos.
    Gostaria que me informa-se o que devo fazer
    para criar um link de endereço etc.
    desculpe, eu ainda sou meio novata no mundo da blogosfera...
    se puder, entra lá no meu blog http://brisasdotempo.blogspot.com
    e dá uma olhada no menu e veja como ele está...


    um abraço

    ResponderExcluir
  22. cara te amo.. vc quebrou mais do q meu galho..
    tentava de tudo.. pegar tempaltes.. e modificar codigos de outro site pelo nosso.. enfim.. fiz o linkbar de acordo com o tutorial acima..
    e vc realmnete quebrou meu galho.. !
    Obrigado, fico realmente agradecido !

    ResponderExcluir
  23. Não acontece nada no meu blog, faço tudo certo, não da nenhum erro!
    mesmo assim não da certo, não aparece nenhuma linkbar!

    ResponderExcluir
  24. Olá Ideraldo eu não consigo encontrar o segundo códico nem com o ctrl F o que eu faço?

    ResponderExcluir
  25. tô na mesma situação q a Kirah. O que eu faço?

    ResponderExcluir
  26. Nossa adorei!
    Esse deu certo, obrigada mesmo. :D

    ResponderExcluir
  27. psé ._. o seguundo códiigo que eu deveriia achar não teem no meu blog .-.
    comofas?

    ResponderExcluir
  28. Oi, gente. Se acusar que já existe um "Linklist1", é porque outro elemento está usando essa "id". É só você trocar a id da linkbar que você quer colocar por "Linklist2", ou 3, se já tiver uma segunda. Abraços.

    ResponderExcluir

LEIA AS REGRAS COM MUITA ATENÇÃO:

- Seu comentário precisa ter relação com o assunto do post;
- Não inclua links desnecessários no conteúdo do seu comentário;
- Se quiser deixar sua URL, comente usando a opção OpenID;
- Comentários com CAIXA ALTA, miguxês ou erros de ortografia não serão aceitos;
- Ofensas pessoais, ameaças e xingamentos não são permitidos.