domingo, fevereiro 01, 2009

Buttons Me Adiciona

Aproveitei a minha inspiração para montar meus buttons do MeAdiciona e criei trinta a mais para disponibilizar aqui. São 35 buttons no total:

Imagens feitas com Button Maker

sábado, janeiro 31, 2009

Lindos backgrounds gratuitos

Outras galerias não tão belas na página delicious.com/helenfernanda/backgrounds.

Aprenda a inserir imagens no background de seu site.

Alinhamento de texto

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, janeiro 30, 2009

Divulgue seu blog no Live Messenger

Nível: iniciante

Eu e eu mesma no Messenger…

Vou adiantando que vale muito a pena atualizar seu Live Messenger. Antes de instalar dê uma checada nos requisitos do sistema.

» Leia todo o post

quinta-feira, janeiro 29, 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:

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!
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.
Xingo estranhos quando os vejo jogando lixo em ruas e calçadas.
Descobri que café-com-leite é um excelente acompanhamento para qualquer tipo de comida, doce ou salgada, quente ou fria.
Eu enjoo das pessoas e não escondo isso delas.
Acredito que pior do que ser pobre é ser um pobre que fez filhos.

Eu indico:

Bubuzando na Net
Christian Gump
Erika Lettry
~~Internet para Todos~~ - Participou aqui!
Lucky Star Downloads
Vida Digital

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

Bloguete no #BloGYN

Mais um site de variedades e mesmices no #BloGYN! Como já diz a descrição do blog:

Site criado para informar e entreter seus leitores.

Os autores já são conhecidos na blogosfera goianiense: Renatto Neves e Rodrigo Almeida.

Sem comentários anônimos, novamente

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, janeiro 28, 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.

» Leia todo o post

segunda-feira, janeiro 26, 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJVrh_KnqTB7sBt8owyRJhYeLoaEklYBi1qNuQXdnVptr_9giN3vzphUfkNQmHsKNdhLw7HrvTd_hFiA8wCWMQzTJP6u8rdGBxFis1nyFT0VgIC4K4ZEPELPaAYtR_CnFoUcHxo3U1Jt7v/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJVrh_KnqTB7sBt8owyRJhYeLoaEklYBi1qNuQXdnVptr_9giN3vzphUfkNQmHsKNdhLw7HrvTd_hFiA8wCWMQzTJP6u8rdGBxFis1nyFT0VgIC4K4ZEPELPaAYtR_CnFoUcHxo3U1Jt7v/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ANdcJoDtqHbhw2sJlcwhFrgNu6fQZByz8G13Vsck0slClXkAOqnzTzX83Z6hr6-QljL_xWVsFVQk-DkIxYBEADbU2wW2lXtFpkCLWZ2GUTlcE1iZ0fiFBtfxgBIJNDBJFIL0q2zfQoXe/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ANdcJoDtqHbhw2sJlcwhFrgNu6fQZByz8G13Vsck0slClXkAOqnzTzX83Z6hr6-QljL_xWVsFVQk-DkIxYBEADbU2wW2lXtFpkCLWZ2GUTlcE1iZ0fiFBtfxgBIJNDBJFIL0q2zfQoXe/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ANdcJoDtqHbhw2sJlcwhFrgNu6fQZByz8G13Vsck0slClXkAOqnzTzX83Z6hr6-QljL_xWVsFVQk-DkIxYBEADbU2wW2lXtFpkCLWZ2GUTlcE1iZ0fiFBtfxgBIJNDBJFIL0q2zfQoXe/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ANdcJoDtqHbhw2sJlcwhFrgNu6fQZByz8G13Vsck0slClXkAOqnzTzX83Z6hr6-QljL_xWVsFVQk-DkIxYBEADbU2wW2lXtFpkCLWZ2GUTlcE1iZ0fiFBtfxgBIJNDBJFIL0q2zfQoXe/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ANdcJoDtqHbhw2sJlcwhFrgNu6fQZByz8G13Vsck0slClXkAOqnzTzX83Z6hr6-QljL_xWVsFVQk-DkIxYBEADbU2wW2lXtFpkCLWZ2GUTlcE1iZ0fiFBtfxgBIJNDBJFIL0q2zfQoXe/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ANdcJoDtqHbhw2sJlcwhFrgNu6fQZByz8G13Vsck0slClXkAOqnzTzX83Z6hr6-QljL_xWVsFVQk-DkIxYBEADbU2wW2lXtFpkCLWZ2GUTlcE1iZ0fiFBtfxgBIJNDBJFIL0q2zfQoXe/s32/tile.719336865.gif) #000000 repeat fixed;}
blockquote {border:silver solid; border-width: 0px 2px 2px 0px; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ANdcJoDtqHbhw2sJlcwhFrgNu6fQZByz8G13Vsck0slClXkAOqnzTzX83Z6hr6-QljL_xWVsFVQk-DkIxYBEADbU2wW2lXtFpkCLWZ2GUTlcE1iZ0fiFBtfxgBIJNDBJFIL0q2zfQoXe/s32/tile.719336865.gif) no-repeat scroll left top;
.blog-title {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ANdcJoDtqHbhw2sJlcwhFrgNu6fQZByz8G13Vsck0slClXkAOqnzTzX83Z6hr6-QljL_xWVsFVQk-DkIxYBEADbU2wW2lXtFpkCLWZ2GUTlcE1iZ0fiFBtfxgBIJNDBJFIL0q2zfQoXe/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ANdcJoDtqHbhw2sJlcwhFrgNu6fQZByz8G13Vsck0slClXkAOqnzTzX83Z6hr6-QljL_xWVsFVQk-DkIxYBEADbU2wW2lXtFpkCLWZ2GUTlcE1iZ0fiFBtfxgBIJNDBJFIL0q2zfQoXe/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

Páginas