quinta-feira, janeiro 15, 2009

Adicionar slide de imagens ao Blogger

Para quebrar o jejum de quase um mês sem tutorial para Blogger, vou mostrar um recurso muito fácil e pouco explorado: apresentação de slides com fotos ou quaisquer imagens de álbum ou flog que você já tenha na web.

» Leia todo o post

[Defasado] Alinhamento de imagens

Atualizado dia 02/01/2013 às 18h43.

02/01/2013 → Abra o post Alinhar imagens com CSS que está mais atualizado. Este aqui está defasado, mas continuará no ar para consulta histórica.

Alinhando direto na tag `<img>`

Para alinhar a imagem em uma das margens, podemos usar align ou style=float, veja:

À esquerda

Usando apenas HTML:

Usando CSS:

À direita

Usando apenas HTML:

Usando CSS:

Centralizando

Para que a imagem fique centralizada, você pode usar a tag <center>:

Alinhando com `text-align`

Você utiliza div com text-align quando não quer que o texto e/ou outro elemento fique em volta de imagem, como nos casos supracitados.

À esquerda

À direita

Centralizando

Alinhando na folha de estilos

Para poupar código você pode definir o alinhamento de imagens na folha de estilos. Há muitas e muitas formas de fazer isso, mas vou dar um exemplo onde cada posição de imagem que desejo tem sua própria ID.

#meio {text-align:center; margin:auto; display:block; padding:5px;}
#dire {float:right; padding:5px;}
#esqu {float:left; padding:5px;}
]]></b:skin>

Imagem do post no álbum Gifs Animados

02/01/2013 → Abra o post Alinhar imagens com CSS que está mais atualizado. Este aqui está defasado, mas continuará no ar para consulta histórica.

Blogs que ajudam a blogar

Eu estou tão envolvida com os vários posts que estou escrevendo ao mesmo tempo (são mais de cinco, o que é normal para mim, já que meu cerébro sempre funcionou melhor no modo não-linear) que só agora percebi que o Mestre Blogger me indicou em uma peteca que ele mesmo criou: Blogs que ajudam a blogar.

Você deve apontar (linkar) numa postagem em seu blog com o título Blogs que ajudam a blogar os blogs que mais o ajudaram na blogsfera - de 3 (três) a 10 (dez) - e, se possível, colocar uma pequena descrição.
A seguir você deve indicar 5 (cinco) ou mais blogs para participarem do meme.
Você deve deixar uma referência para o blog que o indicou.

Muitos dos blogs que me ajudaram a blogar no início, há mais de 6,5 anos, nem existem mais, mas vou colocar aqui os que resistem:

1. Blog a La Carter: Em português. Excelentes tutoriais para Blogger.
2. Blogger Buster: Em inglês. Fonte maravilhosa de tutoriais para Blogger.
3. By Marina: Em português. Quem começou na minha época se lembra dos famosos Templates by Marina. Usei vários antes de começar a criar os meus.
4. CSS no Lanche: Em português. Confesso que ainda não consigo entender todos os posts, alguns são muito avançados para minha cabecinha de não-programadora, mas tem muitos tutoriais legais de CSS que iniciantes também conseguem acompanhar.
5. Interney: Em português. Quando comecei, Interney era sinônimo de meta-blog.
6. PurpleMoggy: Em inglês. Apesar de não ser atualizado há mais de 1,5 ano, continua sendo referência por causa dos muitos tutoriais para Blogger, muitos deles usei no Helen Fernanda Ponto Com.
7. Templates para novo Blogger: Em português. Foi o blog que me salvou quando aceitei deixar o template clássico do Blogger.
8. Tiago Dória Weblog: Em português. Comecei a ler o Tiago em 2004 quando ele ainda fazia faculdade de Jornalismo, tinha um blog gratuito no Blogger e no seu perfil se identificava como jornalista e webdesigner, como eu. Até hoje me identifico muito com os posts do Tiago e “quando eu crescer” quero ser uma pro-blogger-jornalista-consultora-de-mídia que nem ele.
9. Tie Dye POA: Em português. Uma das minhas primeiras inspirações quando comecei o blog Sacoleira.
10. Usuário Compulsivo: Em português. Também uso muitos tutoriais e widgets dele. Quem não usa?

Eu indico para darem continuidade à peteca:

Indicaram o HTMHelen como blog que ajuda a blogar:

Espero continuar ajudando!

Joelma + Maria Clara = Milena

Joelma Mendes + Maria Clara Gueiros = Milena do BBB 9

Tô mentindo?

Programa de Trainees J.Macêdo

Pré-requisitos:

Graduados e/ou pós-graduados no período de dez/2006 a dez/2008.
Cursos: Administração, Economia e Engenharias (Alimentos, Elétrica, Mecânica e Produção).

» Leia todo o post

quarta-feira, janeiro 14, 2009

6 erros cometidos em nomes de blogs

Indisponível. E agora?

Erros cometidos em nomes de blogs atrapalham o posicionamento da marca (sim, o nome de seu blog é uma marca) e passam uma imagem negativa, em maior ou menor escala, de:

» Leia todo o post

Novos produtos Monange nas prateleiras

Este post foi transferido para o blog Consultoras de Beleza.

terça-feira, janeiro 13, 2009

Coloque seu blog no MySpace

Neste post vou mostrar como eu fiz para colocar os últimos posts do meu blog na minha página de perfil do MySpace. Pré-requisitos:

Ter conta no MySpace.
Ter blog, microblog, vlog, flog, álbum de fotos ou qualquer outra página pessoal com feed próprio.

» Leia todo o post

Margens e espaçamento interno

Nível: intermediário

Margens (margin) e espaçamento interno (padding) ajudam a manter seu blog bonito e fácil de ler. Em muitos casos é só isso que falta para que a página fique realmente agradável.

Não são raros os blogs todo “espremidinhos” que encontro todo dia, em que o título “disputa” espaço com o texto que “briga” com as imagens. Muito desagradável. Em qualquer design o espaço em branco é muito bem-vindo quando utilizado corretamente. Muitos dos casos de elementos espremidos em blogs e outros sites podem ser resolvidos com margin e padding.

Margin

A margem é o espaço externo. Se minha casa fosse um elemento HTML, a margem dela seria a calçada. Quando um elemento utiliza margens, ele está dizendo a cada um dos demais: Hei, mantenha-se a pelo menos X pixels de mim, ok?

Calçada surrupiada do Panóptico

Texto com margem

Código:

<div style='margin-top:4px; margin-bottom:5px; margin-left:100px; margin-right:7px;'>Neste exemplo de texto, as margens foram definidas na própria tag.<div>

Visualização:

Neste exemplo de texto, as margens foram definidas na própria tag.

Texto e imagem com margem

Código:

<img style='margin:5px; margin-right:100px;' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX6w0ELSvZnT9BqcFSIMx2w2-AxggVkIJvBBiB0RnrqhLC1hR8nbvODytOU73yxNFbLoH5TBicK9TTOSJhWMCDnaAb8tjcj9eVUSYYdcWiYMgdTZFWKGeh0DV_FzvMNUvDEbrDWw0pZTcd/s400/yahoo.jpg" align='right' />Observe que a imagem tem margem de 100px à direita e 5px nos outros três lados, de forma que não atrapalha a visibilidade do texto.

Visualização:

Observe que a imagem tem margem de 100px à direita e 5px nos outros três lados, de forma que não atrapalha a visibilidade do texto.

Padding

Se margin é a calçada, padding é o quintal, o espaço entre o muro (bordas) e o elemento (espaço construído da casa). Vejamos alguns exemplos:

Exemplo sem padding

<div style='border:1px solid black;'>Este é um texto sem padding, observe que as bordas estão encostando no texto e deixando a aparência um tanto quanto desagradável.</div>

Visualização:

Este é um texto sem padding, observe que as bordas estão encostando no texto e deixando a aparência um tanto quanto desagradável.

Exemplo com padding 1

<div style='border:1px solid black; padding:5px;'>Este é um texto com padding, observe que usei a mesma medida dos quatro lados.</div>

Visualização:

Este é um texto com padding, observe que usei a mesma medida dos quatro lados.

Exemplo com padding 2

<div style='border:1px solid black; padding:5px; padding-left:50px; padding-right:10px;'>Este é um texto com padding, observe que usei medidas diferentes dos quatro lados.</div>

Visualização:

Este é um texto com padding, observe que usei medidas diferentes dos quatro lados.

Margin e padding

Exemplo de código:

<div style='text-align:justify; border:1px solid salmon; height:228px; padding:5px;'><img style='margin:5px;' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX6w0ELSvZnT9BqcFSIMx2w2-AxggVkIJvBBiB0RnrqhLC1hR8nbvODytOU73yxNFbLoH5TBicK9TTOSJhWMCDnaAb8tjcj9eVUSYYdcWiYMgdTZFWKGeh0DV_FzvMNUvDEbrDWw0pZTcd/s400/yahoo.jpg" align='right' />Observe que o elemento div tem padding de 5px que é o espaço entre as bordas e o texto e entre as bordas e a imagem, enquanto a imagem tem margin de 5px que é a distância entre ela e o texto.</div>

Como fica:

Observe que o elemento div tem padding de 5px que é o espaço entre as bordas e o texto e entre as bordas e a imagem, enquanto a imagem tem margin de 5px que é a distância entre ela e o texto.

Na folha de estilos

Para mudar as margin e padding de qualquer elemento na folha de estilos é muito simples também. Veja o exemplo:

h2 {padding:5px; margin-top:10px; margin-bottom:5px;}
blockquote {padding:5px; padding-left:50px;}
body {border:0px; margin:0px; padding:5px;}
blockquote #cita {margin-top:5px; margin-bottom:10px; margin-left:25px; margin-right:50px;}
]]></b:skin>

Divirta-se!

segunda-feira, janeiro 12, 2009

Reforma ortográfica

Eu não estou aqui para ensinar, já que ainda estou aprendendo. Sempre que tenho que escrever palavra com hífen, por exemplo, fico em dúvida e tento substituir por algum sinônimo. Pior ainda são as palavras que não tinham hífen e passam a ter. Jornalistas, blogueiros, professores, vestibulandos, concurseiros… todos em estado de nervos com essas mudanças. Imagine então eu, que sou jornalista-blogueira-concurseira? Loucura!

» Leia todo o post

Páginas

quinta-feira, janeiro 15, 2009

Adicionar slide de imagens ao Blogger