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.
Kara Vlw. Todos os site que tentei dava errado, até que enfim encontrei.Vlw Mesmo.
ResponderExcluirOlá, Adm "Ruffy"
ResponderExcluirEstamos aqui para ajudar. Fico feliz que tenha encontrado o que procurava aqui no blog.
Fique atento que teremos mais dicas.
Abraço.
olá
ResponderExcluirIdenaldo
até que enfim encontrei o que procurava
obrigada
continue sempre assim
qualquer coisa
estamos aí
grata
edile-amor
OI
ResponderExcluirQUANDO
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?
Edilene,
ResponderExcluirÉ 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.
Bom dia, Idenaldo
ResponderExcluirComo 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.
Ola, Eduardo.
ResponderExcluirNão entendi qual é a sua dúvida.
Mande novamente a pergunta.
Grande Abraço.
Boa Noite Idenaldo.
ResponderExcluirMuito 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
fiz tudo certinho e naum apareceu nada em meu blog
ResponderExcluirserá que meu template naum aceita linkbar???
Boa tarde, Lênin!
ResponderExcluirA 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
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
ResponderExcluirinseri ele e tudo certo!
valeu mesmo e seu blog concerteza de ótima utilidade ajudando nos blogueiros!
muito bom o blog, de ótima utilidade, até mesmo pra quem não manja muito de html e essas coisas...
ResponderExcluirvaleu
abraço
apareceu bX-ghj512 esta coisa veia
ResponderExcluiraffs
eu tenhoq fazer um blog pra o povo q dança ai fica dando estes pit vc pode me ajudar ?
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.
ResponderExcluirEx.: 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
Erlan, esses pits acontecem quando existe algum problema no Blogger. Pode tentar novamente que vai dar certo. Mas siga todos os passos rigorosamente.
ResponderExcluirRodrigo, é 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.
O problema é onde ir para achar esses marcadores e como fazer a conexão deles com os conteúdos relacionados.
ResponderExcluirMe ajuda pleeeease!!!
Olá!
ResponderExcluirMuito obrigada pelo excelente tutorial. Deu super certo.
Gracias.
Olá...
ResponderExcluirNão estava conseguindo, mas deletei, fiz tudo de novo e deu certo.
Muito obrigada!
Bjs.
Consegui colocar e agora como personalizo???
ResponderExcluirThanks. Muito obrigado. :)
ResponderExcluirO 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?
ResponderExcluirOlá! Estou mundando o visu. do meu blog
ResponderExcluire 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
cara te amo.. vc quebrou mais do q meu galho..
ResponderExcluirtentava 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 !
Não acontece nada no meu blog, faço tudo certo, não da nenhum erro!
ResponderExcluirmesmo assim não da certo, não aparece nenhuma linkbar!
Olá Ideraldo eu não consigo encontrar o segundo códico nem com o ctrl F o que eu faço?
ResponderExcluirtô na mesma situação q a Kirah. O que eu faço?
ResponderExcluirNossa adorei!
ResponderExcluirEsse deu certo, obrigada mesmo. :D
psé ._. o seguundo códiigo que eu deveriia achar não teem no meu blog .-.
ResponderExcluircomofas?
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