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.uspost2 26-04-2008 GTM 1 @ 04:35
fantasyatemplates —
- - http://fantasyatemplates.blogspot.com/ 0.5 2008-04-26T03:37:46+00:00 daily - http://fantasyatemplates.blogspot.com/2008/04/68o87o789o.html 0.5 2008-04-26T03:37:46+00:00 daily - http://fantasyatemplates.blogspot.com/2008/04/voc-gosta-da-numerao-que-aparece-ao.html 0.5 2008-04-26T03:37:46+00:00 daily - http://fantasyatemplates.blogspot.com/feeds/posts/default 0.5 daily - http://fantasyatemplates.blogspot.com/2008/04/templates-novo-blogger-diferenca-entre.html 0.5 2008-04-26T03:37:46+00:00 daily - http://fantasyatemplates.blogspot.com/2008/04/html-basico.html 0.5 2008-04-26T03:37:46+00:00 daily - http://fantasyatemplates.blogspot.com/2008/04/colocando-tradutor-no-seu-blog.html 0.5 2008-04-26T03:37:46+00:00 daily - http://fantasyatemplates.blogspot.com/2008/04/tutoriais-para-photoshop.html 0.5 2008-04-26T03:37:46+00:00 daily - http://fantasyatemplates.blogspot.com/2008/04/colocando-margem-nos-widgets-do-blogger.html 0.5 2008-04-26T03:37:46+00:00 daily - http://fantasyatemplates.blogspot.com/2008/04/escripts-para-para-blog.html 0.5 2008-04-26T03:37:46+00:00 daily - http://fantasyatemplates.blogspot.com/2008/04/colocando-data-abaixo-do-titulo-do-post.html 0.5 2008-04-26T03:37:46+00:00 daily - http://fantasyatemplates.blogspot.com/2008/04/adicionar-uma-coluna-no-template_21.html 0.5 2008-04-26T03:37:46+00:00 daily - http://fantasyatemplates.blogspot.com/2008/04/marcadores-como-menu-horizontal.html 0.5 2008-04-26T03:37:46+00:00 daily - http://fantasyatemplates.blogspot.com/2008/04/retirando-borda-das-imagens.html 0.5 2008-04-26T03:37:46+00:00 daily - http://fantasyatemplates.blogspot.com/2008/04/mudando-o-plano-de-fundo-do-blogger.html 0.5 2008-04-26T03:37:46+00:00 daily - http://fantasyatemplates.blogspot.com/2008/04/colocando-e-mail-e-adicione-aos.html 0.5 2008-04-26T03:37:46+00:00 daily
removeRelatedDuplicates(); printRelatedLabels();
Templates Novo Blogger: Diferenca entre margin e padding
Templates Novo Blogger: Diferenca entre margin e padding AQUI FORA O QUE QUISER Leia tudo...
Se você é como eu e vive xeretando o código do seu template, com certeza se depara com determinados valores que podem deixá-lo confuso. À princípio a diferença entre margin e padding me confundiu um pouco, por isso vou explicar para vocês o resultado de um e outro:
Margin determina a distância de um elemento para outro no template, por exemplo, a distância entre uma coluna e outra. Padding dá um espaço entre o conteúdo deste elemento para as bordas.
Visualmente para que se compreenda bem, veja na imagem1 a coluna do post, que está envolvida por uma borda vermelha. Esta coluna tem margin-left: 10px, ou seja, um espaçamento de 10 px entre o seu limite à esquerda e o limite da outer-wrapper (que é o 'corpo' do template). Já o texto em sí, que é o conteúdo do elemento main-wrapper (ou a coluna do post), está com margin e padding 0px e o resultado é que o texto fica colado nas bordas da coluna:
Aqui eu coloquei uma borda preta em torno do texto para que se visualize melhor:
Para arrumar esta distância entre o post e os limites da coluna, procure por:
.post {
margin: 0px;
border: 1px solid #000000;
}
Agora vou aplicar uma margin: 10px no post, ficando assim:
Agora vou acrescentar um padding: 15px;
Vejam como texto se afatou das bordas pretas.
Neste caso, você pode, por exemplo, estabelecer uma cor para a coluna e outra para o post, o que torna de grande importância o uso de padding.
Agora, quando você for xeretar o código do seu template e encontrar, junto a propriedade 'margin', padding, já sabe o que é e prá que serve. 
removeRelatedDuplicates(); printRelatedLabels();
remplaza_fecha('24 Abril 2008');
24
Abr
2008
html basico
Nesta edição do HTML básico, vamos ver como criar tabelas simples.
Exemplo:
Celula 1 Célula 2 Celula 3 Celula 4
| Celula 1 | Célula 2 |
| Celula 3 | Celula 4 |
(Fechou a tabela) Resultado:
Primeiro usamos a Tag
- Abre uma nova coluna;
(Abriu a 1ª coluna)
coluna 1 - linha 1 (Abriu a 2ª coluna)
coluna 2 - linha 1
coluna 1 - linha 1
coluna 2 - linha 1
Agora iremos inserir um Segunda linha a essa tabela:
Aplicando:
| (Abriu a 1ª coluna da 1ª linha) coluna 1 - linha 1 |
(Abriu a 2ª coluna da 1ª linha) coluna 2 - linha 1 |
||
| (Abriu a 1ª coluna da 2ª linha) coluna 1 - linha 2 |
(Abriu a 2ª coluna da 2ª linha) coluna 2 - linha 2 |
coluna 1 - linha 1 | coluna 2 - linha 1 |
| coluna 1 - linha 2 | coluna 2 - linha 2 |
Após escrever todo o código de sua tabela no editor do blogger, junte todas as linhas do código em uma só, se não fizer isso a tabela irá ficar desconfigurada, Siga o exemplo abaixo:
coluna 1 - linha 1 |
coluna 2 - linha 1 |
| coluna 1 - linha 2 |
coluna 2 - linha 2 |
Código arrumado corretamente do editor:
| coluna 1 - linha 1 | coluna 2 - linha 1 |
| coluna 1 - linha 2 | coluna 2 - linha 2 |
removeRelatedDuplicates(); printRelatedLabels();
Colocando Tradutor no seu Blog
Colocando Tradutor no seu Blog
Português - InglêsPortuguês - FrancêsPortuguês - AlemãoPortuguês - ItalianoPortuguês - PortuguêsPortuguês - EspanholPortuguês - Russo Para colocar este tradutor no seu blog você deve: → Criar uma widget no formato de HTML → Colar o código abaixo na widget e posicionar na sua sidebar ou onde quiser no seu blog. NÃO SE ESQUEÇA DE COLOCAR O ENDEREÇO DO SEU BLOG ONDE ESTÁ INDICADO NO CÓDIGO. Clique em continue lendo e copie o código continue lendo...
removeRelatedDuplicates(); printRelatedLabels();
remplaza_fecha('23 Abril 2008');
23
Abr
2008
Tutoriais Para Photoshop
neste post vou enscinar a trabalhar no Photoshop Leia tudo...
7. Nesse ponto você pode deixar tudo assim, que terá um efeito de blend bonito, mas digamos que você queira algo com uma área desbotada (fade) em branco e no meio da imagem. Existem vários modos de fazer isso. O mais fácil seria selecionar a layer em branco do background, e preencher com uma cor a sua escolha. Você pode ter algo como isso: (Eu escolhi a cor azul nesse exemplo):
Ou você pode escolher até outra imagem, talvez um tipo de cenário e por o mesmo abaixo das 2 layers (camadas) blendadas. Há muitas possibilidades. Outra opção é adicionar uma 3ª layer (camada) ao topo e fazer um blend nela também, que é o que eu fiz abaixo. Mas, nessa etapa, nós só vamos centralizar a imagem e desbotar (fade) as margens de fora. Com a layer (camada) 2 selecionada, abra a 3ª imagem que está no ‘zip’ que é a imagem de Pip e Merry. Arraste-a pra dentro da imagem marcada (layer 2), certificando que essa será a layer mais evidente da imagem. Centralize a imagem.
8. Como você fez com a 1ªs duas layers (camadas) você vai clicar no ícone “Add layer mask” que está ao fundo.
9. Agora com a ferramenta gradient tool (G) ativada, você vai selecionar o ‘Reflected Gradient’
10. Quando você clica e arrasta a cruz começa no meio da sua imagem e arrasta até a direita ou esquerda da margem.
11. Com esse blend feito, nós podemos ver que cobre toda a imagens abaixo então vamos arrumar a opacidade da imagem.
12. Pronto! Sua imagem ao final deve estar parecida com a de baixo. Mas, isso é só o começo. Você pode adicionar quantas layers quiser, só se lembre de começar do lado que você quer que seja mais escuro, e termine no lado que você quiser mais desbotado/claro (fade). Se você quiser mais claro, não arraste tudo. Apenas jogue um pouco com a técnica pra descobrir outros resultados. Se não gostar do resultado final, retorne e comece tudo de novo. No resultado final você pode colocar os efeitos que quiser, brushes ou apagar as margens do canvas. Depende da sua imaginação
0 comentários Marcadores: Tutoriais Para Photoshop
removeRelatedDuplicates(); printRelatedLabels();
Colocando margem nos widgets do blogger
Para que as widgets (Elementos de Página) que você insere no seu blog não fiquem coladas às bordas, procure este trecho do código (baseado no Mínima, em outros templates existem pequenas variações):
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:10px;
padding:0px;
}
Basta mudar o valor da margin que lá está para esta que coloquei, 10px. Se você preferir maior ou menor distância da borda, altere este valor.
removeRelatedDuplicates(); printRelatedLabels();
remplaza_fecha('22 Abril 2008');
22
Abr
2008
escripts para para blog
Janela Popup
Passe o mouse
Script que é só passar o mouse
Tem Vaca na Moita
Topo da página
topo
Texto riscado
Seu texto riscado
Efeitos em link : passe o mouse em cima para ver os efeitos
Efeito flores
Mensagem que modifica ao clicar
Efeito fogo
Link que aumenta as letras
Botão para fechar a janela
fechar
0 comentários Marcadores: scripts
removeRelatedDuplicates(); printRelatedLabels();
Colocando a data abaixo do titulo do post
Vou ensinar como colocar a data do post abaixo do titulo do mesmo.
Vá no html do seu template, marque Expandir Modelo de Widget e encontre este trecho (lembre de usar o Ctrl+F para localizar mais rápido):
O que vocês terão que fazer é deslocar este trecho para outro trecho mais acima. Selecione e recorte este trecho do código e depois encontre esta outra parte:
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.
removeRelatedDuplicates(); printRelatedLabels();
remplaza_fecha('21 Abril 2008');
21
Abr
2008
Adicionar uma coluna no template
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
removeRelatedDuplicates(); printRelatedLabels();
Marcadores como menu horizontal
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
removeRelatedDuplicates(); printRelatedLabels();
Retirando os numeros ao lado dos marcadores
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
removeRelatedDuplicates(); printRelatedLabels();
Colocando menu horizontal no blog
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.
removeRelatedDuplicates(); printRelatedLabels();
remplaza_fecha('20 Abril 2008');
20
Abr
2008
Retirando borda das imagens
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
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
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
removeRelatedDuplicates(); printRelatedLabels();
-
Quem Sou
Categorias
Tags
Sindicar
- RSS
- RSS dos comentários