Pesquisa personalizada

31/07/2009

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:

Terezinha Bolico disse...

Boa dica, eu gosto da linkbar, agiliza as buscas.
valeu!
abração

Professor moreijo disse...

peguei tudo que foi possível obrigado pela atenção e pela facilidade de explicação...fuiiiiii

Mikasmi disse...

Obrigada já experimentei. Ficou bem

Abraços
Emilia

Unknown disse...

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

João Moreira disse...

Cecília,

Deu muito certo e estou personalizando.

Valeu e Obrigado por mais esta dica!

A.:.S

Ana CaTrin disse...

Não aparece nada!!!

Anônimo disse...

Olá cecília, deu tudo certo no meu blog, porém não sei configurar CSS, pode me ajudar?

Anônimo disse...

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

Cecília Parente disse...

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).

Anônimo disse...

Cecília,
Segue o endereço do meu blog: www.dicaseg.com

Obrigado.

Att,
Carlos Costa

Anônimo disse...

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

Karen disse...

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?

Rir faz bem a saúde disse...

Muito bom o post, gostei muito de verdade, parabéns e obrigado, erao que eu procurava!

Andréa Palomo disse...

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?

Des'Plugadas' disse...

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! ;*

Little Sunshine disse...

tbm nao consigo achar o /*Outer-Wrapper e agr?

Anônimo disse...

naão ha nenhum /*Outer-Wrapper

Q.R.A Scapini disse...

vlw consegui veio

kevin simpson disse...

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?

Lemnitti disse...

tambem nao achei o outer wrapper

Julia Nayra disse...

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!

"sprintrade network"

  ©Template by Dicas Blogger.

TOPO