fantasyatemplates

Muitas pessoas me perguntam sobre colocar um menu horizontal no blog, ou como eu chamo, barra de navegação. Neste blog, na coluna lateral, eu indico alguns sites que disponibilizam códigos/imagens prontos para serem usados. Mesmo assim, alguns encontram dificuldade na hora de inserir no template.
Costumo fazer minhas descobertas estudando outros templates e códigos-fonte de páginas que considero interessantes. Assim, muitas vezes me esqueço onde encontrei um código, por isso, não me lembro de onde tirei o que eu uso...
Mas, enfim, vou passar o que eu costumo usar nos meus templates.

Aconselho sempre, antes de qualquer mudança no seu template, que você salve uma cópia do mesmo antes de tudo! E mais, nunca salve antes de visualizar o resultado, por que se não estiver bom, basta clicar em Limpar Edições (ou coisa assim) e tudo volta ao normal.

Pois bem, a primeira parte do código deve ser colocada de preferência logo depois de tudo o que se refere a header. Ou seja, vai estar mais ou menos assim no seu template (baseado no Mínima do Blogger):

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:890px;
height:150px;
margin:0 auto 0px;
}

#header {
margin: 0px;
width:888px;
height:140px;
background: #F7F7F7 url() bottom center;
border: 1px solid $bordercolor;
text-align: left;
color:$pagetitlecolor;
}

#header h1 {
margin:1px 0px 0;
margin-top: 20px;
padding-left:55px;
padding-top:25px;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;

}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:20 10px 0px;
padding-left:55px;
max-width:380px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.2em;
font: $descriptionfont;
color: $descriptioncolor;
}

(fim do Header)

Cole aqui este código:

#navigation{
height:40px;
width: 890px;
line-height:2.9em;
margin:-12px 10px 10px 5px;
background: url(ENDEREÇO DA SUA IMAGEM) repeat-x;
}

#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #787878;
white-space:nowrap;
}

#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #000000;
}

* html #navigation a {width:1%;}

#navigation .selected,#navigation a:hover{
background:#808080;
color:#000000;
text-decoration:none;
}

Todos os valores que aí estão (width, margin, color, etc) podem e devem ser modificados conforme o layout do seu template. Este que aí está é o que eu uso aqui, ou seja, do Template Work.
Antes de passar a segunda parte do código, vou explicar algumas coisas que podem ser modificadas:

#navigation{
height:40px;
width: 890px;
line-height:2.9em;
margin:-12px 10px 10px 5px;
background: url(ENDEREÇO DA IMAGEM) repeat-x;
}

Height é a altura que terá o menu
Width é a largura
line-height é a altura da linha (não confundir com o tamanho da fonte!)
Margin: a margin funciona no sentido horário; o primeiro valor se refere ao topo, o segundo à direita, o terceiro à base e o quarto à esquerda.
Background é o fundo, que pode ser uma cor ou uma imagem. Repeat-x garante que a cor ou imagem se repetirá horizontalmente.

#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #787878;
white-space:nowrap;
}

Este trecho se refere a lista em sí.
Float-left é flutuação à esquerda e você pode determinar também center ou right.
list-style-type: aqui se você deseja algum tipo de marcador à lista, deve ser especificado, mas como o espaço é pequeno, não recomendo. De qualquer maneira você pode acrescentar um marcador. círculo=disc, quadrado=square, ficando assim:
list-style-type: disc; (se for bolinha...). No caso do menu que eu uso, como não tem marcador, é none.
border: aqui você define se terá borda em toda a volta de cada item do menu (para isso deixe só Border: 1px solid...), se só à direita (right), esquerda (left), topo (top), ou base (bottom). Basta determinar antes dos valores:
border-bottom: 1px solid etc etc...
border-top: 1 px solid etc etc....
white-space:nowrap;: evita a quebra de linha.

#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #000000;
}

Neste trecho não aconselho a mudar nada, a não ser color, que determinará a cor que os links terão antes que se passe o cursor sobre eles.

* html #navigation a {width:1%;}

#navigation .selected,#navigation a:hover{
background:#808080;
color:#000000;
text-decoration:none;
}

Aqui se determina cor dos links e background quando se passa o cursor por cima e quando clicado. Você pode e deve (fica muito melhor) modificar a cor do backround e de color, deixando-o diferente de quando em descanso.

Pronto, agora você já sabe como deixar o menu a cara do seu template. Agora vamos à segunda parte do código.

Encontre este trecho do código (fica lá embaixo, na parte de HTML):

remplaza_fecha('20 Abril 2008');

20

Abr

2008

Retirando borda das imagens

Postado por rogerio thomas

retirar e por bordas, então vou postar para todos: por padrão, os templates do Blogger vem com borda nas imagens (e como faço meus templates modificando o Mínima do Blogger, meus templates, na maioria também tem), o que não agrada à todos. Para retirar a borda das imagens, procure este trecho do código: .post img { padding:2px; border:1px solid $bordercolor; } E apague o que está em negrito. Você também pode modificar esta borda, por exemplo, alterando a largura dela ou seu tipo. Recapitulando os tipos de borda: * dotted: borda pontilhada * dashed: borda tracejada * solid: borda contínua * double: borda dupla * groove: borda entalhada * ridge: borda em ressalto * inset: borda em baixo relevo * outset: borda em alto relevo É isso.

    0 comentários Marcadores: tutorial

removeRelatedDuplicates(); printRelatedLabels();

mudando o plano de fundo do blogger

Postado por rogerio thomas

Para mudar o plano de fundo, basta encontrar a tag Body no código do seu template e alterar o que está em Background: body { background-color: #610E03; color:$textcolor; Se você deseja alterar somente a cor, faça como no exemplo: background-color e aí coloca o código da cor. Se deseja colocar uma imagem, coloque assim: background: url(endereço da imagem) repeat; color:$textcolor; é onde se colocará a cor do texto do blog, mas isso geralmente se pode alterar no painel de cores e fontes do blog. Dica: para que o navegador Intenet Explore consiga "ler" o código, dê um espaço maior entre o endereço da imagem e repeat, caso contrário não aparecerá no navegador, apesar de aparecer normalmente no Firefox e no Ópera.

    0 comentários Marcadores: Background, tutorial

removeRelatedDuplicates(); printRelatedLabels();

configurar menu horizontal

Postado por rogerio thomas

Quem deseja colocar o e-mail em Contatos no menu horizontal, como eu fiz, basta seguir o exemplo :

Contato

Se você quiser usar uma imagem de âncora (como eu fiz no meu menu, com o feed), basta fazer assim:

window.external.AddFavorite('endereço do seu blog','nome do seu blog' );
} else if (browsName == "Netscape") {
alert ("Para adicionar meu blog aos Favoritos aperte CTRL+D");
}
}
// -->

Salve o template. Agora vá no código do menu e insira esta linha:

Adicionar aos favoritos

Cuidado para não apagar nenhuma das aspas ou o código não funcionará!

Para quem usa o navegador IE, ao clicar no botão, já aparecerá a janelinha para adicionar aos favoritos. Nos demais Navegadores, surgirá uma mensagem pedindo que se tecle CRTL+D, isso é normal.

Em tempo: Me perguntaram na comunidade do Orkut se era possível linkar um marcador ao menu: sim, é possível,sem problemas. Clique com o botão direito sobre qualquer dos seus marcadores e copie o link. Depois transfira este link para o menu (como nos exemplos) e dê o nome que quiser. Esta é uma maneira bacana de tornar mais visível um dos marcadores do seu blog.

    0 comentários Marcadores: tutorial

removeRelatedDuplicates(); printRelatedLabels();

Do Melhor Linkk | del.icio.us

Deixar um Comentário