fantasyatemplates http://fantasyatemplates.nireblog.com Sat, 07 Nov 2009 16:30:52 +0100 fantasyatemplates http://static.nireblog.com/imagenes/logo.png http://fantasyatemplates.nireblog.com http://nireblog.com qaw http://fantasyatemplates.nireblog.com/post/2008/04/26/qaw http://fantasyatemplates.nireblog.com/post/2008/04/26/qaw Postado por rogerio thomas

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

0 comentários

Templates Novo Blogger: Diferenca entre margin e padding
Postado por rogerio thomas

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

0 comentários

24
Abr
2008
html basico
Postado por rogerio thomas

Nesta edição do HTML básico, vamos ver como criar tabelas simples.

Exemplo:

Código

Celula 1 Célula 2
Celula 3 Celula 4

Resultado

Celula 1 Célula 2
Celula 3 Celula 4

Agora vamos entender

Primeiro usamos a Tag

, Nela fica a formatação da tabela, como cor das bordas, cor do fundo, tamanho, etc...

Formatações

As formatações, com exceção da borda e cor de fundo, ficam dentro de uma sub-tag, que é a style="formações".

Veremos aqui algumas formatações usadas nessa tabela acima:

width:300px - Indica que a largura da tabela é de 300 pixels.
text-align: left - Indica que o texto está alinhado a esquerda (Podendo você trocar por: Center - Centro, Left - Esquerda e Right - Direita)

Formatações fora da Style=""

Essas formatações ficam fora da tag style="", exemplo:

Formatações

border=1px - Indica que a espessura da borda é de 1 pixel.
bordercolor=#ff0000 - Indica que a cor da borda é vermelha - Veja lista de códigos de cores em HEX.
bgcolor=#0000ff" - indica que a cor de fundo é azul.

Numero de Linhas e colunas na tabela

O número de linhas e colunas da tabela é definido pelas tags

:

- Abre uma nova linha.

Aplicando:

e

- Abre uma nova coluna;

(Abriu a tabela)

(Abriu a 1ª linha)

(fechou a 1ª coluna)

(Fechou a 2ª coluna)

(Fechou a 1 linha)

(Abriu a 1ª coluna)
coluna 1 - linha 1 		(Abriu a 2ª coluna)
coluna 2 - linha 1

(Fechou a tabela)

Resultado:

coluna 1 - linha 1 coluna 2 - linha 1

Agora iremos inserir um Segunda linha a essa tabela:

Aplicando:

(Abriu a tabela)

(Abriu a 1ª linha)

(Fechou a 1ª coluna da 1ª linha)

(Fechou a 2ª coluna da 1ª linha)

(Fechou a 1ª Linha)

(Abriu a 2ª linha)

(Fechou a 1ª coluna da 2ª linha)

(Fechou a 2ª coluna da 2ª linha)

(Fechou a 2ª linha)

(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

(Fechou a Tabela)

Resultado:

coluna 1 - linha 1 coluna 2 - linha 1
coluna 1 - linha 2 coluna 2 - linha 2

Atenção:

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:

Código escrito antes:

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

Na próxima edição iremos ver tabelas mas complexas.

0 comentários

Colocando Tradutor no seu Blog
Postado por rogerio thomas

Colocando Tradutor no seu Blog
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...

0 comentários

23
Abr
2008
Tutoriais Para Photoshop
Postado por rogerio thomas

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

Colocando margem nos widgets do blogger
Postado por rogerio thomas

Leia tudo...

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.

0 comentários

22
Abr
2008
escripts para para blog
Postado por rogerio thomas

Janela Popup
Passe o mouse

Passe o mouse

Script que é só passar o mouse
Tem Vaca na Moita

NOME DO LINK

Topo da página
topo

topo

Texto riscado
Seu texto riscado

ESCREVA AQUI">topo

Efeitos em link : passe o mouse em cima para ver os efeitos

Efeito flores

Mensagem que modifica ao clicar


CLIQUE

Efeito fogo

Link que aumenta as letras

Botão para fechar a janela

fechar

fechar

0 comentários Marcadores: scripts

Colocando a data abaixo do titulo do post
Postado por rogerio thomas

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.

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:
id='newsidebar' preferred='yes'>


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: