Como centralizar os anúncios do AdSense

Nível: iniciante

Para centralizar os anúncios do AdSense que são adicionados entre os posts do Blogger, basta ir até Layout ≫ Editar HTML e colocar o seguinte código na folha de estilos do blog, ou seja, acima da tag ]]></b:skin>:

#main-wrapper div.inline-ad {text-align:center; margin:30px; margin-left:auto; margin-right:auto;}
]]></b:skin>

Observe que eu aproveitei para aumentar a distância entre o anúncio e o texto usando margin:30px, já que a ausência desse espaço em branco é outro fator que torna os anúncios visualmente menos agradáveis. Você pode alterar esse número para que o anúncio se adeqúe melhor ao leiaute de seu blog.

Até mais!

29 temas para Google Chrome 3+

Já fazia alguns dias que estava usando o Google Chrome 3 Beta (agora já estou no 4), mas só ontem comecei a experimentar o recurso de temas. Eu, particularmente, amei essa possibilidade. Como já contei aqui, não é de hoje que estou enjoada desse azul-cueca-velha que o Google usa tanto no orkut como no Chrome, então a possibilidade de mudar muito me entusiasma.

Para ter acesso ao recurso de temas sem nenhuma gambiarra, é preciso ter o Chrome 3 ou 4 para Windows ou uma das versões em desenvolvimento para Mac e Linux.

É importante lembrar que nenhuma das versões está em fase final, isso significa que podem ser encontrados bugs. Estou usando o Chrome no Ubuntu 9 e o Chrome 4 no Windows XP e não tive problemas, mas recomendo que não instale se estiver em dúvida. Links para download:

• Google Chrome para Mac
• Google Chrome para Linux

Windows XP e Vista:

• Google Chrome 3 Beta
• Google Chrome 4 Beta
• Google Chrome 3 Beta Portable

Após instalar a versão de testes desejada, entre na Galeria de Temas e experimente. Ao clicar, você salva os temas em uma pasta pessoal. Assim, sempre que quiser trocar as cores do Chrome basta ir direto à pasta e clicar no tema desejado, sem precisar visitar a galeria novamente. A maioria dos temas são muito belos, como estes cinco que selecionei:

Candy

Cork Board

Floral Blue

Marble

Vertical Stripe

Assim como no Opera, não é preciso reiniciar o navegador para ver as modificações, basta aguardar o tempo de download do arquivo de tema. Sempre que quiser voltar à cor original, basta aplicar o tema Classic ou acessar Opções » Personal Stuff » Themes » Reset to default theme.

Divirta-se!

Li e recomendo “Cartas Entre Amigos”

Em maio deste ano a jornalista carioca Patrícia Haddad participou do lançamento do livro Cartas Entre Amigos: sobre medos contemporâneos e escreveu um simpático post em seu blog falando do livro, do lançamento e do hábito de escrever cartas, do qual fui fiel praticante durante quase cinco anos de minha adolescência - cheguei a contar 300 amigos por correspondência ao mesmo tempo de quase todos os estados do Brasil e de Portugal. O texto enxuto, informativo e bem ilustrado da Patrícia foi o que me incitou o desejo de ler o livro.

Dois meses depois eu ainda não tinha lido Cartas Entre Amigos, mas me deparei com outro texto, dessa vez do jornalista goiano Rafael Carneiro que sugestivamente escolheu o título A boa surpresa para falar da obra. Rafael, católico praticante, encerra o seu texto dizendo:

Católico, não me espelho necessariamente em homens como o Padre Fábio ou Gabriel Chalita. Mas me encanta ver imagens diferentes dos meus achismos em outros espelhos. Católico, me espelho muito nessa generosidade. Os generosos são surpreendentes.

O texto do Rafael, que não é membro da Renovação Carismática Católica, reavivou meu desejo de saborear o livro. Por motivos financeiros, só este mês tive condições de comprá-lo. A leitura, fácil e prazerosa, durou menos de três noites e já escolhi uma pessoa querida da minha família a quem vou presentear com o mesmo exemplar que li. Sou de uma corrente que defende que lugar de livro não é na estante, mas sim a trinta centímetros do nariz de um leitor.

Gabriel Chalita e Padre Fábio têm narrativas muito parecidas. São poéticos, filosóficos, conselheiros, defensores do amor. Várias vezes, ao longo das dezoito cartas, eu me via perdida por alguns segundos tentando me lembrar quem escrevia para quem, até que encontrava algum vocativo dizendo “padre”, que é como Gabriel trata Fábio, ou “Gabriel”, que é como o padre chama o doutor em direito. Os vocativos “amigo” e “irmão” são comuns a ambos.

As cartas são repletas de testemunhos nos quais identificamos pessoas conhecidas de nosso convívio familiar e social, se não nós mesmos. Ao contrário do que eu imaginava antes, Fábio e Gabriel não fazem apologia ao catolicismo em si. Suas cartas são apologias ao amor, que está acima de qualquer religião. As frases são tão belas e definitivas que eu poderia fazer dezenas de citações aqui, mas vou encerrar com um parágrafo da décima terceira carta, escrita por Gabriel Chalita:

Somos avarentos porque temos medo de perder dinheiro, invejosos porque temos medo do sucesso do outro, ciumentos porque temos medo de que alguém roube o que fantasiamos nos pertencer. Arrogantes, porque temos medo de que percebam nossas fragilidades. Egoístas porque temos medo de dividir a rede. Preguiçosos porque temos medo da luta. Agressivos porque temos medo do amor.

Paz e bem!

Helen Fernanda

Membro do MCS Goiás

perfil.helenfernanda.com

Fontes compatíveis com Linux

Não são poucos os blogueiros que se assustam quando olham as fontes do próprio blog pela primeira vez em um outro navegador ou em outro sistema operacional. Isso ocorre simplesmente porque as fontes instaladas nos mais diversos sistemas operacionais não são as mesmas.

Como usuária de Windows XP e Ubuntu 9, vou listar o que considero como possíveis soluções para que blogueiros que usam Windows consigam definir suas fontes corretamente de forma que usuários Linux não sejam prejudicados.

CSS | Como personalizar a fonte

Este post foi atualizado em agosto/2009.

As propriedades em CSS que modificam a fonte são:

1. font-family
2. font-style
3. font-variant
4. font-weight
5. font-size
6. font

Família da fonte

Definimos o família de fonte com font-family:

<div style="font-family: 'Lucida Bright', serif">Este texto vai aparecer com a fonte Lucida Bright se você tiver ela instalada. Caso contrário, ele será mostrado com a fonte serifa padrão de seu navegador.</div>

Este texto vai aparecer com a fonte Lucida Bright se você tiver ela instalada. Caso contrário, ele será mostrado com a fonte serifa padrão de seu navegador.

Ao escolher a fonte, podemos definir a espécie (times new roman, verdana…) ou o gênero (serif, sans-serif) da fonte.

Serif
<div style="font-family:serif">Este texto vai aparecer com a fonte de serifa padrão de seu navegador.</div>	Este texto vai aparecer com a fonte de serifa padrão de seu navegador.
<div style="font-family:georgia, serif">Este texto vai aparecer com a fonte Georgia, mas se você a desinstalou, vai aparecer a fonte serifa padrão do navegador.</div>	Este texto vai aparecer com a fonte Georgia, mas se você a desinstalou, vai aparecer a fonte serifa padrão do navegador.
<div style="font-family:garamond, serif">Este texto vai aparecer com a fonte Garamond, mas se você a desinstalou, vai aparecer a fonte serifa padrão do navegador.</div>	Este texto vai aparecer com a fonte Garamond, mas se você a desinstalou, vai aparecer a fonte serifa padrão do navegador.
<div style="font-family:'Monotype Corsiva', serif">Este texto deve aparecer com a fonte Monotype Corsiva, mas se ela não existe em seu computador, aparecerá com a fonte serifa padrão do navegador.</div>	Este texto deve aparecer com a fonte Monotype Corsiva, mas se ela não existe em seu computador, aparecerá com a fonte serifa padrão do navegador.
Sans-serif
<div style="font-family:sans-serif">Este texto vai aparecer com a fonte sem serifa padrão de seu navegador.</div>	Este texto vai aparecer com a fonte sem serifa padrão de seu navegador.
<div style="font-family:verdana, sans-serif">Este texto deve aparecer com a fonte Verdana, mas se ela não existe em seu computador, aparecerá com a fonte sem serifa padrão do navegador.</div>	Este texto deve aparecer com a fonte Verdana, mas se ela não existe em seu computador, aparecerá com a fonte sem serifa padrão do navegador.
<div style="font-family:trebuchet ms, sans-serif">Este texto deve aparecer com a fonte Trebuchet MS, mas se ela não existe em seu computador, aparecerá com a fonte sem serifa padrão da máquina.</div>	Este texto deve aparecer com a fonte Trebuchet MS, mas se ela não existe em seu computador, aparecerá com a fonte sem serifa padrão da máquina.
<div style="font-family:'Arial Rounded MT Bold', sans-serif">Este texto deve aparecer com a fonte Arial Rounded MT Bold, mas se ela não existe em seu computador, aparecerá com a fonte sem serifa padrão do navegador.</div>	Este texto deve aparecer com a fonte Arial Rounded MT Bold, mas se ela não existe em seu computador, aparecerá com a fonte sem serifa padrão do navegador.
Monospace
<div style="font-family:monospace">Este texto vai aparecer com a fonte monoespaçada padrão de seu navegador.</div>	Este texto vai aparecer com a fonte monoespaçada padrão de seu navegador.
<div style="font-family:'OCR A Std', monospace">Este texto deve aparecer com a fonte OCR A Std, mas se ela não existe em seu computador, aparecerá com a fonte monoespaçada padrão do navegador.</div>	Este texto deve aparecer com a fonte OCR A Std, mas se ela não existe em seu computador, aparecerá com a fonte monoespaçada padrão do navegador.
<div style="font-family:'Lucida Console', monospace">Este texto deve aparecer com a fonte Lucida Console, mas se ela não existe em seu computador, aparecerá com a fonte monoespaçada padrão do navegador.</div>	Este texto deve aparecer com a fonte Lucida Console, mas se ela não existe em seu computador, aparecerá com a fonte monoespaçada padrão do navegador.
<div style="font-family:courier new, monospace">Este texto deve aparecer com a fonte Courier New, mas se ela não existe em seu computador, aparecerá com a fonte monoespaçada padrão do navegador.</div>	Este texto deve aparecer com a fonte Courier New, mas se ela não existe em seu computador, aparecerá com a fonte monoespaçada padrão do navegador.
Cursive
<div style='font-family:cursive;'>Este texto deve aparecer com a fonte <b>cursiva</b> padrão do navegador.</div>	Este texto deve aparecer com a fonte cursiva padrão do navegador.
<div style="font-family:'Lucida Calligraphy', cursive;">Este texto deve aparecer com a fonte <b>Lucida Calligraphy</b> ou com a fonte cursiva padrão do navegador.</div>	Este texto deve aparecer com a fonte Lucida Calligraphy ou com a fonte cursiva padrão do navegador padrão do navegador.
Fantasy
<div style='font-family:fantasy;'>Este texto deve aparecer com a fonte <b>fantasy</b> padrão do navegador.</div>	Este texto deve aparecer com a fonte fantasy padrão do navegador.
<div style='font-family:Impact, fantasy;'>Este texto deve aparecer com a fonte <b>Impact</b> ou com a fonte <b>fantasy</b> padrão do navegador.</div>	Este texto deve aparecer com a fonte Impact ou com a fonte fantasy padrão do navegador.

Estilo da fonte

Definimos o estilo da fonte com font-style:

<div style='font-style:inherit;'>Com inherit o texto segue o estilo herdado da tag onde estiver inserido.</div>	Com inherit o texto segue o estilo herdado da tag onde estiver inserido.
<div style='font-style:normal;'>Com normal o texto segue a inclinação padrão do tipo.</div>	Com normal o texto segue a inclinação padrão do tipo.
<div style='font-style:italic;'>Com italic o texto fica inclinado para a direita.</div>	Com italic o texto fica inclinado para a direita.
<div style='font-style:oblique;'>Com oblique o texto fica inclinado para a direita.</div>	Com oblique o texto fica inclinado para a direita.

Essa propriedade não causa qualquer alteração em fontes que não têm a opção de estilo itálico.

Variação da fonte

Definimos a variação da fonte com font-variant:

<div style='font-variant:inherit;'>Com <strong>inherit </strong>a fonte terá a mesma <i>variant</i> que o elemento no qual a tag está inserida.</div>	Com inherit a fonte terá a mesma variant que o elemento no qual a tag está inserida.
<div style='font-variant:normal;'>Com <strong>normal</strong> a fonte fica assim.</div>	Com normal a fonte fica assim.
<div style="font-variant: small-caps;">Com <strong>small-caps</strong> a fonte fica assim.</div>	Com small-caps a fonte fica assim.

Antes de tirar conclusões erradas, observe atentamente a diferença entre um texto com small-caps (maiúsculas menores) e um texto com uppercase (maiúsculas):

<div style='font-variant:small-caps;'>Eu, Helen Fernanda, mantenho voluntariamente o blog HTMHelen, atualizando-o nas minhas horas livres com assuntos que interessam a blogueiros iniciantes.</div>	Eu, Helen Fernanda, mantenho voluntariamente o blog HTMHelen, atualizando-o nas minhas horas livres com assuntos que interessam a blogueiros iniciantes.
<div style='text-transform:uppercase;'>Eu, Helen Fernanda, mantenho voluntariamente o blog HTMHelen, atualizando-o nas minhas horas livres com assuntos que interessam a blogueiros iniciantes.</div>	Eu, Helen Fernanda, mantenho voluntariamente o blog HTMHelen, atualizando-o nas minhas horas livres com assuntos que interessam a blogueiros iniciantes.

Espessura da fonte

Definimos a espessura da fonte com font-weight:

<div style="font-weight:inherit;">Com <em>inherit</em> o texto segue o padrão do elemento em que a tag está inserida.</div>	Com inherit o texto segue o padrão do elemento em que a tag está inserida.
<div style="font-weight:bolder;">Com <em>bolder</em> o texto fica em negrito.</div>	Com bolder o texto fica em negrito.
<div style="font-weight:bold;">Com <em>bold</em> o texto fica em negrito.</div>	Com bold o texto fica em negrito.
<div style='font-weight:normal;'>Com <em>normal</em> o texto fica com a espessura padrão.</div>	Com normal o texto fica com a espessura padrão.
<div style='font-weight:lighter;'>Com <em>lighter</em> o texto fica mais claro que o normal.</div>	Com lighter a fonte fica menos espessa que o normal.

Além dos exemplos supracitados, esta propriedade também aceita valores numéricos de 100, 200, 300… até 900.

Tamanho da fonte

Definimos o tamanho da fonte com font-size:

Valores absolutos
<div style="font-size:xx-large">Com <em>xx-large</em> o texto fica muito maior.</div>	Com xx-large o texto fica muito maior.
<div style="font-size:x-large">Com <em>x-large</em> o texto fica maior.</div>	Com x-large o texto fica maior.
<div style="font-size:large">Com <em>large</em> o texto fica grande.</div>	Com large o texto fica grande.
<div style="font-size:medium">Com <em>medium</em> o texto fica mediano.</div>	Com medium o texto fica mediano.
<div style="font-size:small;">Com <em>small</em> o texto fica pequeno.</div>	Com small o texto fica pequeno.
<div style="font-size:x-small;">Com <em>x-small</em> o texto fica menor.</div>	Com x-small o texto fica menor.
<div style="font-size:xx-small;">Com <em>xx-small</em> o texto fica muito menor.</div>	Com xx-small o texto fica muito menor.
Valores relativos
<div style="font-size:smaller;">Com <em>smaller</em> o texto fica menor do que estava antes.</div>	Com smaller o texto fica menor do que estava antes.
<div style="font-size: inherit">Com <em>inherit</em> o texto segue o tamanho padrão do elemento ao qual ele pertence.</div>	Com inherit o texto segue o tamanho padrão do elemento ao qual ele pertence.
<div style="font-size:larger">Com <em>larger</em> o texto fica maior do que estava antes.</div>	Com larger o texto fica maior do que estava antes.

Esta propriedade também aceita valores numéricos em pixels (px), pontos (pt) e porcentagem (%).

Todas em uma

Podemos definir todas as cinco características da fonte dentro da propriedade font:

<div style="font:small-caps bold 13px 'comic sans ms';">Texto com várias propriedades em uma só.</div>	Texto com várias propriedades em uma só.
<div style="font:italic bolder 15px 'Lucida Bright';">Texto com várias propriedades em uma só.</div>	Texto com várias propriedades em uma só.

A ordem dos valores na propriedade font é: font-style | font-variant | font-weight | font-size | font-family.

Personalizando a nuvem de marcadores do Blogger

Nível: intermediário

Como muitos de vocês já devem ter lido no Dicas Blogger ou no Ferramentas Blog, o Blogger finalmente implementou nos Marcadores os recursos de:

[Desativada] Gente de Fé, rede social do portal Canção Nova

Usando Wordpress MU, mesma plataforma da rede social Blog Católico, a rede social Gente de Fé é uma das mais novas iniciativas do portal Canção Nova.

Sua página na rede Gente de Fé terá o seguinte formato:

gentedefe.com/members/nomedeusuario

Apesar de ser a principal finalidade do Wordpress MU, o recurso de criação de blogs atualmente está inativo na rede.

Embora use a mesma interface, o site Gente de Fé tem novidades em relação à rede Blog Católico. A primeira é estar totalmente em português, a segunda é a integração com outros sites, como Twitter, Flickr e YouTube. Após uma simples configuração de usuário e senha, suas atualizações nesses sites aparecem automaticamente em seu perfil, como no aparecem no meu:

gentedefe.com/members/helenfernanda

Paz e bem!

Helen Fernanda

Membro do MCS Goiás

A falácia da “vontade divina”

Este é um artigo sobre Igreja.

Comecei hoje a ler Cartas Entre Amigos e já quero citar dois parágrafos do Padre Fábio de Melo:

Escuto absurdos sobre Deus, quando pessoas movidas por boas intenções resolvem explicar as fatalidades do mundo. Frases simplórias e descomprometidas com a verdade não resolvem; ao contrário, agravam ainda mais o sofrimento, porque geram orfandade, descrença e abandono.

Justificam as tragédias humanas como “vontade divina”, retirando assim a responsabilidade humana dos acontecimentos, fruto das escolhas que fazemos. Respondem a tudo e a todos como se o desvelamento do mistério pudesse resolver as questões.

O trecho do livro serve apenas para embasar um desabafo que há muito tempo eu queria fazer, pois se trata de uma situação que muito me incomoda.

Template Flowers

Nível: intermediário

Confesso que não tinha a intenção de fazer esse template, ele nasceu de uma tentativa “frustrada” de fazer um template para outro blog. Não serviu para o blog em questão porque já estava ficando cute demais.

Então resolvi terminá-lo mesmo assim para publicar aqui, mesmo não sendo uma tradição minha disponibilizar templates. Não sou propriamente uma designer, então desde já peço desculpas por qualquer coisa.

Ver template - Download

Principais arquivos:

templateflowers.xml

Template, que só deve ser inserido depois que você fizer backup do seu template atual e de todos os seus widgets.

header.png

Imagem do cabeçalho, deve ser inserida Por trás de título e descrição.

As demais imagens que estão zipadas são backups de outras imagens utilizadas no template. Você só vai precisar delas se alguma das atuais não abrir ou apresentar lentidão, portanto, guarde em local seguro.

22/08/2009 → Atendendo o pedido da Anny, seguem as instruções para mudar o nome da cidade que atualmente está configurado como Goiânia.

Personalizando a cidade:

1. Entre em Layout » Editar HTML.

2. Marque a opção Expandir modelos de widgets.

3. Procure pelo texto “Goiânia” para encontrar a seguinte linha de código:

<h3 class='date-header'>Goiânia, <data:post.dateHeader/></h3>

4. Onde está escrito Goiânia, coloque o nome de sua cidade. Alguns exemplos:

<h3 class='date-header'>Altamira, <data:post.dateHeader/></h3>

<h3 class='date-header'>Brasília, <data:post.dateHeader/></h3>

<h3 class='date-header'>Catalão, <data:post.dateHeader/></h3>

Você também pode apagar o nome da cidade se não quiser mostrar nenhuma. Para isso, substitua o código supracitado por apenas:

<h3 class='date-header'><data:post.dateHeader/></h3>

5. Visualize e, se estiver conforme desejado, salve.

Anny, obrigada por me lembrar!

Até mais!

10 coisas que odeio em parentes

Este é um post sobre humor na minha vida.

Para não dizer que meus parentes nunca me renderam nada*, vou escrever um post sobre eles e tentar faturar alguma coisa com os links patrocinados.