Como colocar uma linkbar no blogger
Gostaram da mudança de visual?
Agora, como já deu para reparar o blog possui uma linkbar mas, para que serve e como colocá-la?
Para que serve:
Ter uma linkbar é útil para colocar nossos principais links a disposição de nossos leitores.
Nele você coloca um botão de retorno ao ínicio, links para redes de relacionamentos, outros blogs...
Como colocá-la:
Agora, há duas possibilidades.A primeira: seu template já fornece a possibilidade de colocar uma widget no header.
Aí é só acrescentá-la e configurar seu CSS.
A segunda (e mais provável): você vai ter que colocá-la manualmente.
Procure no html do seu blog:
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='Header1' locked='false' title='Informática Desvendada (Cabeçalho)' type='Header'/>
</b:section>
Atenção se o seu maxwidgets for só '1' mude para '2' e em showddelement se estiver 'no' mude para 'yes'.
Agora logo após </b:section> cole:
<div id='linkbar-wrapper'>
<b:section class='linkbar' id='linkbar' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Linkbar' type='LinkList'/>
</b:section></div>
Salve.
Configurando o CSS:
Procure: /*Outer-Wrapper
Acima dela, cole:
/* ----- LINKBAR ----- */
#linkbar {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 100%;
position: relative;
background: #000080;
border: 0px solid #000;
border-bottom: 0;
}
#linkbar ul {
margin: 0px 0px 0px 0px;
padding: 3px 3px 3px 3px;
text-align: center;
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 0px 0px 0px;
padding: 6px 6px 6px 6px;
width:50%;
text-decoration:none;
font-family: arial, sans-serif;
font-weight: bold;
font-size: 24px;
color: #fff;
border-right: 1px solid #fff;
}
#linkbar a:hover {
color: #000;
background: #fff;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
Essa configuração é a da minha linkbar, portanto não esqueça de mudar a cor em background, width, height, o tipo de fonte e seu tamanho.
Agora vá em "Elementos da Página".
Provavelmente apareceu uma caixinha de linkbar embaixo do cabeçalho.
Clique em Editar.
Agora basta inserir os links, nomeá-los e escolher a ordem.
Salve e visualise.
Lembrete:
Para acessar o html do seu blog, clique em layout e depois em editar HTML.
Para localizar algo no código use CTRL + F.
21 Comentários:
Boa dica, eu gosto da linkbar, agiliza as buscas.
valeu!
abração
peguei tudo que foi possível obrigado pela atenção e pela facilidade de explicação...fuiiiiii
Obrigada já experimentei. Ficou bem
Abraços
Emilia
olá cecilia,comigo nao deu certo aparece esta mensagem: Não foi possível visualizar o modelo
Corrija o erro abaixo e envie o seu modelo novamente.
Mais de um item encontrado com o id: LinkList1. Os IDs de itens devem ser únicos e exclusivos.
o esta errado poderia me informar?obrigado
Cecília,
Deu muito certo e estou personalizando.
Valeu e Obrigado por mais esta dica!
A.:.S
Não aparece nada!!!
Olá cecília, deu tudo certo no meu blog, porém não sei configurar CSS, pode me ajudar?
Amigo, primeiramente parabens pelo seu blog. Fiz todo o processo, porém quando mando salvar aparece a seguinte mensagem: Corrija o erro abaixo e envie o seu modelo novamente.
Declaração de variável inválida na skin da página: A variável está sendo utilizada, mas não foi definida. Entrada: startSide
Você sabe me explicar como resolver este problema? segue meu e-mail: crcos@ymail.com
Desde já agradeço.
Att,
Carlos Costa
Pode ser que a variável (alguma configuração da sua linkbar, tipo tom, tamanho, fonte...) já está sendo usada nas variaveis na parte superior do template.
Pode também estar ocorrendo de seu HTML já conter uma div de linkbar (ctr + f e procure) ou o número do html está repetido (tipo HTML1, HTML2...
Provavelmente é a segunda ou terceira opção.
Pode me enviar o endereço de seu blog para verificar o código e apontar o problema.
Victor: configurar css você vai precisar de uma tabela de cores e alguns códigos básicos.
No google e no 4shared existem ótimas apostilas de CSS para baixar gratis (principalmente no 4shared).
Cecília,
Segue o endereço do meu blog: www.dicaseg.com
Obrigado.
Att,
Carlos Costa
Oi, Cecília,
Também não estou conseguindo inserir a linkbar no meu blog (http://segurosaudesuplementar.blogspot.com).
Dá o mesmo erro do Rogério "Mais de um item encontrado com o id: LinkList1. Os IDs de itens devem ser únicos e exclusivos.
o esta errado poderia me informar?obrigado.
Você poderia olhar meu código para ver o que é?
Obrigadíssimo.
Ah, em tempo, adoro seu blog, me ajuda muitíssimo.
Um abraço,
Douglas Trindade
Oii, parabéns pelo blog. Assim, eu fiz tudo direitinho, mas na hora de editar eu não consigo mover lá pra baixo do cabeçalho. Os gadgets que posso mover estão em cor meio pêssego, mas o linkbar está em branco e não dá pra mover. O que houve?
Muito bom o post, gostei muito de verdade, parabéns e obrigado, erao que eu procurava!
Olá Cecilia, tudo bem? A primeira vez que criei um linkbar o blog me deu a opção de colocá-lo no header ou ao lado, só pra testar coloquei ao lado e agora ele não me dá mais a opção de colocá-lo abaixo do header. No blog da minha mãe que é novo deu certinho, como não existia ainda nenhuma linkbar, pude selecionar a posição abaixo do header e deu certo. Segui seus passos acima para garantir. Você saberia me dizer como eu faço para mudar no meu blog?
oi Cecilia! Bom, não estou conseguindo achar o seguinte código : /*Outer-Wrapper ! como faço?
link do meu blog: http://des-plugadas.blogspot.com/
beijos e muito obrigada! ;*
tbm nao consigo achar o /*Outer-Wrapper e agr?
naão ha nenhum /*Outer-Wrapper
vlw consegui veio
lembrente; você deveria ter ensinado onde ficava o html no começo. Ha lembrente de novo: não seria mais conveniente você ter ensinado como procura codigos no comeõ também?
tambem nao achei o outer wrapper
Oi Cecilia, assim como outros colegas ai de cima eu também não consegui achar o código /*Outer-Wrapper.
Me dê uma resposta urgente!!!
Postar um comentário
Agradeço seu comentário, mas por favor não faça SPAM!