sábado, 31 de janeiro de 2009

Alinhamento de texto

nivel
Seus textos estão bem alinhados?

Mais um tutorial de HTML e CSS muito simples e necessário que todos poderão aplicar em seus blogs.

Texto centralizado

Centralizando com a tag center:
<center>Centralizando com a tag center.</center>

Centralizando com align:
<div align="center">Centralizando com align.</div>

Centralizando com text-align:
<div style='text-align:center;'>Centralizando com text-align.</div>

Texto alinhado à direita

Alinhado com align:
<div align="right">Alinhado com align.</div>

Alinhado com text-align:
<div style='text-align:right;'>Alinhado com text-align.</div>

Texto alinhado à esquerda

Alinhado com align:
<div align="left">Alinhado com align.</div>

Alinhado com text-align:
<div style='text-align:left;'>Alinhado com text-align.</div>

Texto justificado

Justificado com align. Justificado com align. Justificado com align. Justificado com align. Justificado com align. Justificado com align. Justificado com align. Justificado com align. Justificado com align:
<div align="justify">Justificado com align.</div>

Justificado com text-align. Justificado com text-align. Justificado com text-align. Justificado com text-align. Justificado com text-align. Justificado com text-align. Justificado com text-align. Justificado com text-align:
<div style='text-align:justify;'>Justificado com text-align.</div>

Exemplo na folha de estilos

.post div, p {text-align:justify;}
#comments {text-align:left;}
#post-comment-link .comment-link {text-align:center;}
blockquote {text-align:right;}
]]></b:skin>

Pratique alinhamento e melhore a qualidade visual de seus posts.

sexta-feira, 30 de janeiro de 2009

quinta-feira, 29 de janeiro de 2009

Como mesclar blogs no Blogger

Nível: avançado

Este post é para quem usa Blogger e precisa mesclar dois ou mais blogs. Isso ocorre principalmente nas seguintes situações:

  • Você tem vários blogs e, por quaisquer motivos, preferiu mesclá-los em um só para facilitar a atualização.
  • Você desistiu de seu blog e vai excluí-lo, mas quer que seus posts continuem disponíveis no blog de algum amigo que vai continuar atualizando.
  • Você e seu(s) amigo(s) resolveram mesclar seus blogs e manter um blog coletivo.

Você vai perceber que é bem simples e não é preciso copiar post por post, como muitos ainda acreditam. Veja os passos:

1. Escolha o blog que fica

Escolha o blog que fica, já que o(s) outro(s) será/serão eliminado(s) ou redirecionado(s). Para facilitar o tutorial vamos chamar o blog que fica de blog F e o blog que será eliminado de blog E.

Se você tem problema com Internet lenta e um blog tem muito mais posts que o outro, escolha o blog que tem mais posts como blog F. Exemplo: um blog tem 40 posts e outro tem 150, escolha o que tem 150 como blog F. Não se preocupe com template e endereço, isso você pode trocar depois.

2. Desative os comentários do blog E

Para não perder nenhum comentário durante o processo, sugiro que desative os comentários do blog E.

  • Entre no Blogger.
  • No painel do blog E, vá até Configurações » Comentários.
  • Marque a opção Ocultar.
  • Clique no botão laranja Salvar configurações.

3. Exporte o blog E

  • Vá até Configurações » Básico » Exportar blog.
  • Clique no botão laranja Fazer download do blog.
  • Escolha uma pasta e salve.

Não faça mais nada no blog E por enquanto.

4. Importe o blog E no blog F

  • Entre no painel do blog F.
  • Vá até Configurações » Básico » Importar blog.
  • Clique no botão Arquivo
  • Selecione o arquivo .xml que você acabou de salvar.
  • Escreva a palavra da imagem.
  • Sugiro que mantenha a opção Publique automaticamente… DESmarcada.
  • Clique no botão laranja Importar blog.
  • Aguarde o upload, que pode demorar alguns minutos se o blog importado tiver centenas de posts.

5. Escolha e publique

Observe que na lista de posts agora tem a classificação Importado.

Antes de publicar os posts, verifique se os marcadores estão corretos e edite se for necessário.

Se for publicar a maioria dos posts, sugiro que clique em Selecionar Todos e desmarque apenas os que não for publicar. Em seguida clique no botão laranja Publicação Selecionada:

Aguarde a mensagem de confirmação:

Somente após ter certeza de tudo foi importado corretamente, exclua os posts do blog E.

Sugiro que ao menos durante um mês não exclua o blog E, mas matenha-no com um aviso apontando para o blog F. Se preferir pode também usar um redirecionamento.

Seis coisas, seis links

O HTMHelen foi indicado para essa peteca pelo blog Fronteiras no Tempo. Se não me falha a memória, foi só esse. Tive outras indicações para essa mesma brincadeira em outros blogs, por isso estou meio confusa.

A brincadeira consiste em postar seis curiosidades aleatórias sobre você e apontar seis blogueiros para que façam o mesmo. O objetivo é que os leitores e os companheiros da blogosfera possam conhecer mais cada um dos blogueiros que participarem.

Regras:

  • Linkar o blog da pessoa que te indicou.
  • Escrever as regras do meme da peteca em seu blog.
  • Contar 6 curiosidades aleatórias sobre você.
  • Indicar mais 6 pessoas e colocar os links no final do post.
  • Ao publicar o post, avise cada um de seus indicados, deixando comentários nos blogs.

Sobre mim:

  1. Sou virgem e pretendo morrer assim. Me divirto muito dizendo isso porque sei que a maioria não acredita. Vocês precisam experimentar esse prazer de contar uma verdade polêmica que você pode dizer sem medo porque a maioria não acredita. Como diria a Fabíola, é orgástico!
  2. Só aprendi a dizer palavrões na faculdade de Jornalismo, mesmo tendo sido criada por pais que diziam um palavrão a cada duas palavras.
  3. Xingo estranhos quando os vejo jogando lixo em ruas e calçadas.
  4. Descobri que café-com-leite é um excelente acompanhamento para qualquer tipo de comida, doce ou salgada, quente ou fria.
  5. Eu enjoo das pessoas e não escondo isso delas.
  6. Acredito que pior do que ser pobre é ser um pobre que fez filhos.

Eu indico:

  1. Bubuzando na Net
  2. Christian Gump
  3. Erika Lettry
  4. Internet para Todos - Participou aqui!
  5. Lucky Star Downloads
  6. Vida Digital

Aproveito o post “social” para agradecer ao Ferramentas Blog pela indicação em um post exclusivo. Chique de doer!

Sem comentários anônimos, novamente

Sombra
Saia da sombra e exista!

Gente, por um tempo eu liberei os comentários para que parceiros como Christian pudessem utilizar a opção Nome/URL. Infelizmente, para deixar a opção Nome/URL disponível é preciso liberar também os comentários anônimos. Foi aí que lascou tudo!

Esse é um blog pessoal, opinativo, indignado. Eu escrevo o que desejo, sem censura, porém dou minha cara a tapa. Se eu for numa entrevista de emprego e uma psicóloga perguntar qual foi a sensação de ter publicado a foto do Paulinho, posso até mijar na roupa, mas sou EU quem vai ter que assumir as conseqüências consequências, só EU e “zefini”.

Infelizmente há muita gente por aí que não tem 1/10 da minha coragem e se aproveita da opção de comentários anônimos para dizer o que não sabe, o que não sente, com palavras que não usaria se eu soubesse quem escreve. Assim, acabo perdendo muito tempo lendo e recusando esses comentários covardes que não valem nada, já que não têm dono. Anônimo não é ninguém. Um covarde não é ninguém. Anônimos me dâo nojo porque covardia me dá nojo. Talvez Rodrigo Alves se lembre que penso assim desde os tempos da faculdade.

Assim sendo, para comentar você terá que usar sua conta do Google/Blogger ou sua Open ID. Você vai perceber que não é tão ruim quanto parece.

Imagem do blog Eu e a Minha Sombra

quarta-feira, 28 de janeiro de 2009

Feed, clipagem, mesa e chance

Depois de muito procrastinar, tirei a tarde de hoje para resolver o problema do feed coletivo BloGYN. Não foi simples, tive que fazer umas firulas lá no Pipes, mas o trabalho valeu a pena, nosso feed já está funcionando normalmente com todos os blogs. Se o feed voltou, o Twitter @blogyn também está atualizado.

segunda-feira, 26 de janeiro de 2009

Como colocar imagem no background

Alguns exemplos para você experimentar em posts do seu blog de testes.

Como determinar a imagem:

<div style='background:url(http://lh3.googleusercontent.com/_HlIyV_enpD8/SX4lFZSnmVI/AAAAAAAALQM/eVd9iLAzAKw/s190/09.jpg); width:400px; height:200px; margin:auto; text-align:center;'>Exemplo de imagem de fundo.</div>
Exemplo de imagem de fundo.

Imagem centralizada:

<div style='background:url(http://lh3.googleusercontent.com/_HlIyV_enpD8/SX4lFZSnmVI/AAAAAAAALQM/eVd9iLAzAKw/s190/09.jpg) center center; width:400px; height:200px; margin:auto; text-align:center;'>Exemplo de imagem de fundo centralizada.</div>
Exemplo de imagem de fundo centralizada.

Imagem de fundo fixa:

<div style='color:white; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC4oeZ3kZ3u825jnoAwxZQc5J9PHqdY8oMXYTT1IF0-RmTLzNNoGw_FGCH5awRPlMV_wMQY_vcvTI4rHhhd069c6NHgeBdlSxjGXztQv_ONVBeHoSGDRjZLGnSknaBQ3XvomquKvTnQ7sV/s0-r/bg%255B1%255D.jpg) fixed; width:400px; height:200px; margin:auto; text-align:center;'>Exemplo de imagem de fundo fixa.</div>
Exemplo de imagem de fundo fixa.

Repetição na vertical:

<div style='border:1px #ffcc00 solid; background:url(http://lh3.googleusercontent.com/_HlIyV_enpD8/SYZTvPwEB0I/AAAAAAAALQM/xyzJlyVJhtQ/s32/tile.719336865.gif) repeat-y; width:400px; height:200px; margin:auto; text-align:center;'>Exemplo de imagem de fundo que se repete na vertical.</div>
Exemplo de imagem de fundo que se repete na vertical.

Repetição na horizontal:

<div style='border:1px #ffcc00 solid; background:url(http://lh3.googleusercontent.com/_HlIyV_enpD8/SYZTvPwEB0I/AAAAAAAALQM/xyzJlyVJhtQ/s32/tile.719336865.gif) repeat-x; width:400px; height:200px; margin:auto; text-align:center;'>Exemplo de imagem de fundo que se repete na horizontal.</div>
Exemplo de imagem de fundo que se repete na horizontal.

Não se repete:

<div style='border:1px #ffcc00 solid; background:url(http://lh3.googleusercontent.com/_HlIyV_enpD8/SYZTvPwEB0I/AAAAAAAALQM/xyzJlyVJhtQ/s32/tile.719336865.gif) no-repeat; width:400px; height:200px; margin:auto; text-align:center;'>Exemplo de imagem de fundo que não se repete.</div>
Exemplo de imagem de fundo que não se repete.

Imagem centralizada que não se repete:

<div style='border:1px salmon solid; background:url(http://lh3.googleusercontent.com/_HlIyV_enpD8/SYZTvPwEB0I/AAAAAAAALQM/xyzJlyVJhtQ/s32/tile.719336865.gif) center center no-repeat; width:400px; height:200px; margin:auto; text-align:center;'>Exemplo de imagem de fundo centralizada que não se repete.</div>
Exemplo de imagem de fundo centralizada que não se repete.

Imagem no canto inferior direito:

<div style='border:1px salmon solid; background:url(http://lh3.googleusercontent.com/_HlIyV_enpD8/SYZTvPwEB0I/AAAAAAAALQM/xyzJlyVJhtQ/s32/tile.719336865.gif) right bottom no-repeat; width:400px; height:200px; margin:auto; text-align:center;'>Exemplo de imagem no canto inferior direito.</div>
Exemplo de imagem no canto inferior direito.

Folha de estilos:

Alguns exemplos de imagens no background determinadas na folha de estilos:

body {background:url(http://lh3.googleusercontent.com/_HlIyV_enpD8/SYZTvPwEB0I/AAAAAAAALQM/xyzJlyVJhtQ/s32/tile.719336865.gif) #000000 repeat fixed;}
blockquote {border:silver solid; border-width: 0px 2px 2px 0px; background: transparent url(http://lh3.googleusercontent.com/_HlIyV_enpD8/SYZTvPwEB0I/AAAAAAAALQM/xyzJlyVJhtQ/s32/tile.719336865.gif) no-repeat scroll left top;
.blog-title {background:url(http://lh3.googleusercontent.com/_HlIyV_enpD8/SYZTvPwEB0I/AAAAAAAALQM/xyzJlyVJhtQ/s32/tile.719336865.gif) no-repeat left; padding-left:20px;}
]]></b:skin>

Propriedades separadas:

Nos exemplos supracitados, eu coloquei todas os atributos de fundo dentro da propriedade background, mas também é possível determinar cada um deles separadamente. Veja:

body {background-image:url(http://lh3.googleusercontent.com/_HlIyV_enpD8/SYZTvPwEB0I/AAAAAAAALQM/xyzJlyVJhtQ/s32/tile.719336865.gif);
background-color:#000000;
background-repeat:repeat;
background-attachment: fixed;}
background
Todas os atributos de fundo podem ser definidos aqui separados por espaço.
background-color
Cor de fundo.
background-image
Imagem de fundo seguindo o modelo url(nome-da-imagem.ext). Os navegadores atuais aceitam imagens com as extensões .gif, .jpg, .jpeg e .png. Imagens com extensão .bmp não devem ser usadas.
background-position
Posição da imagem de fundo. Valores aceitos:
  • top - topo
  • right - direita
  • bottom - base
  • left - esquerda
  • center - centro
  • porcentagem - Exemplos: 50% 0%, 40% 100%. O primeiro valor é a distância da esquerda para a direita e o segundo valor é a distância do topo para baixo.
  • lenght - Exemplos: 100px 0px, 40px 300px. O primeiro valor é a distância da esquerda para a direita e o segundo valor é a distância do topo para baixo.
  • combinação - Exemplos: bottom left, center 20%, 100px bottom, 50% 200px. O primeiro valor é a distância da esquerda para a direita e o segundo valor é a distância do topo para baixo.
background-repeat
Repetição da imagem de fundo. Valores:
  • repeat (lado a lado)
  • no-repeat (não repete)
  • repeat-y (repete na vertical)
  • repeat-x (repete na horizontal)
background-attachment
Valores:
  • fixed - imagem de fundo fixa. Quando você rola a barra, a imagem continua no mesmo lugar e só os elementos rolam.
  • scroll (padrão) - imagem rola junto com os elementos da página.
  • inherit - conforme o padrão do site (geralmente determinado em body)

Escolher o background de seu blog ficou fácil agora!

Update 1º/02/2009
Conheça galerias com Lindos backgrounds gratuitos.

Fonte: HTML Dog

Promoção Avon Color Trend - A Estrela é Você

A Estrela é Você

Essa promoção é tão boa que tenho que me controlar para não comprar o portfólio inteiro da linha Color Trend só para receber muitos cupons.

Como participar

  • A cada 3 (três) produtos Color Trend adquiridos nas campanhas 04 e 05/2009, você recebe um cumpom que pode ter um dos mil prêmios instantâneos.
    • Exceção: O produto esmalte de longa duração não dá direito a cupom.
  • Cupons não-premiados poderão concorrer aos 125 prêmios em sorteio se enviados ao CEP da promoção ou cadastrados no site até o dia 17/04/2009.

1.000 (mil) prêmios instantâneos:

  • 30 (trinta) câmeras fotográficas digitais.
  • 300 (trezentas) assinaturas da revista Gloss por um ano.
  • 700 (setecentos) kits Color Trend contendo:
    • 21 (vinte e um) produtos de beleza Color Trend
    • 1 (uma) bolsa exclusiva

125 (cento e vinte e cinco) prêmios em sorteio:

  • 100 (cem) pen drives em formato de coração. Pode ser usado como colar.
  • Mesada de R$ 500,00 por mês durante um ano para 15 (quinze) ganhadoras.
  • Final de semana de ESTRELA para 10 (dez) ganhadoras. Programação:
    • Viagem a São Paulo.
    • Hospedagem em hotel de luxo (com translado e alimentação).
    • Visita à redação da Revista Gloss, na Editora Abril.
    • Consultoria de moda e beleza com a estilista da Revista Gloss.
    • Book fotográfico com participação de Isis Valverde.

Mais informações:

Boas compras e boa sorte!