e cole logo abaixo o código que você recortou antes. Deve ficar assim:
Visualize e se tudo estiver ok, salve. Se não estiver correto, é só clicar em Limpar Edições e tentar novamente.
0 comentários
21
Abr
2008
Adicionar uma coluna no template
Postado por rogerio thomas
Você tem um template que adora e não está nem um pouco afim de trocar ele só para conseguir uma coluna extra...Ok, seus problemas acabaram! Vou explicar passo à passo como adicionar uma nova coluna no template.
Vamos nos familiarizar com o seguinte trecho do código do seu template (pode haver pequenas variações mas o básico é isso):
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:0px;
text-align:left;
font: $bodyfont;
background-color: #bgcolor;
}
#main-wrapper {
background-color: #bgcolor;
margin-left: 3px;
border: 1px solid $bordercolor;
width: 468px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
background-color: #bgcolor;
border: 1px solid $bordercolor;
margin-right: 0px;
width: 210px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Onde Outer-Wrapper contém tudo o que está no template, main-wrapper contém a coluna do post e sidebar-wrapper contém a coluna lateral.
O que vamos fazer é adicionar outra coluna colando logo abaixo de sidebar, este código:
#newsidebar-wrapper {
background-color: #bgcolor;
border: 1px solid $bordercolor;
margin-left: 0px;
width: 210px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Não precisa ter necessariamente background e border, isso vai à gosto do freguês...mas o resto, tem que ser tin-tin por tin-tin o que está aí. Agora atenção para as medidas. A soma da largura do post mais as duas sidebar tem que ser menor do que o valor width de Outer-Wrapper. Não esqueça de somar bordas e o espaçamento que talvez você deseje que tenha entre as colunas. Vá testando e visualizando até ficar bom (e recomendo visualizar em navegadores diferentes para não ter depois que ouvir um amigo dizer que seu template é um horror!).
Mas, antes de visualizar, desça a página até encontrar esta parte do código:
e cole imediatamente abaixo este:
É isso. Mas, veja bem, se a sua sidebar está a esquerda, a nova tem que estar a direta e vice-versa. Ou seja, atenção onde está float: right; float: left;
Assim, você irá acrescentar este último código que eu coloquei na ordem que deve aparecer no template. newsidebar-main-sidebar, ok? (por que aqui, neste exemplo, a nova coluna fica à esquerda)
É mais simples do que parece. Dúvidas é só mandar.
EDIT: Nem todo template tem a div Content-Wrapper. Se o seu template não tem, insira a nova coluna depois da div Header, assim:
Ou ainda, após :
se o seu template conter este trecho
0 comentários
Marcadores como menu horizontal
Postado por rogerio thomas
Se você não tem muitos marcadores na sua página e gostaria de dar mais destaque à eles, pode transformá-los num menu horizontal abaixo (ou acima, como quiser) do título do blog. Para isso, vamos pegar o modelo de menu horizontal que uso nos templates que faço (e que já disponibilizei aqui). Coloque no seu template o modelo todo como está no tutorial indicado, mas na segunda parte, do HTML, substitua o código apresentado por este aqui:
O que você estará fazendo é transformando o menu em uma nova div, um novo elemento na página.
Feito isso, basta ir em Modelo->Adicionar Elemento de Página e escolher a opção Marcadores. Arraste s Marcadores para o novo espaço que surgiu sob o cabeçalho do blog e salve. Para ficar com uma estética melhor, recomendo retirar os números que aparecem indicando a quantidade de postagens relacionadas com o marcador. Para isso, siga este tutorial.
A vantagem deste método é que deixa de existir a necessidade de editar os links no código do template, além de que, você pode colocar neste espaço, uma lista de links por exemplo (a opção está em Adicionar Elementos de Página também), transformando-o em um menu com destaque.
Espero que gostem da dica. Boa semana!
0 comentários Marcadores: tutorial
Retirando os numeros ao lado dos marcadores
Postado por rogerio thomas
Você gosta da numeração que aparece ao lado dos marcadores - entre parênteses assim: música(6), poemas (5),etc - apontando quantos posts estão relacionados ao assunto? Bem, eu não gosto, acho esteticamente feio e além de tudo, desnecessário. Se você pensa como eu e deseja retirar a numeração, procure no código do seu template o trecho relacionado à Marcadores (ou o nome que tenha dado à lista). Vá no HTML do seu blog, clique em Expandir Modelo de Widgets e procure por:
Apague o que está em negrito, visualize e se estiver ok (ou seja, se tiver sumido a numeração), salve. OBS: aqui no exemplo, a widget Marcadores está seguida de
0 comentários Marcadores: tutorial
Colocando menu horizontal no blog
Postado por rogerio thomas
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):
Tudo o que está em negrito é parte do código do menu que deve ser inserido. O restante dos códigos estão aí só para você se localizar no template. Aqui no exemplo o menu está abaixo de Header (título), mas você pode posicioná-lo acima. Onde você colocar este trecho do código (na parte do html, lógico) definirá onde aparecerá no template. Eu tenho templates com o menu acima e abaixo da header como também acima da sidebar.
A sinalização para inserir os links não aparece no template. Os exemplos estão aí, tal qual coloco nos meus templates, de como inserir os links, descrição do link, endereço. Cuidado para não apagar nenhum < e > e tudo o que está entre aspas deve ficar assim. Qualquer detalhe que for apagado erradamente fará com que o menu não funcione.
Boa sorte à todos.
É isso.
1 comentários
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
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
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 :
Se você quiser usar uma imagem de âncora (como eu fiz no meu menu, com o feed), basta fazer assim:
} 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:
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
Assinar: Postagens (Atom)
Do Melhor
Linkk
del.icio.usDeixar um Comentário
-
Quem Sou
Categorias
Tags
Sindicar
- RSS
- RSS dos comentários
Não há Comentários »