Como criar botões com CSS

Com o advento e avanço do CSS 3, muitos designers estão optando por reduzir o uso de imagens em sites, a fim de aumentar a velocidade das páginas da web. Eu já ensinei algumas técnicas legais pra deixar seu blog do Blogger mais bonito e profissional e hoje vou explicar como criar botões (buttons) usando apenas CSS.
Entre no site Button Maker e utilize o painel da direita para personalizar o botão:

Use os 3 controles deslizantes para escolher o tamanho e profundidade do botão.
Embaixo, escolha as cores da seguinte maneira:

• Top Gradient Color: cor do topo em gradiente
• Bottom gradiente color: cor de baixo em gradiente
• Top Border Color: cor da borda do topo
• Hover background color: cor do fundo ao passar o mouse
• Text Color: cor do texto
• Hover Text Color: cor do texto ao passar o mouse
• Active background color: cor de fundo ao clicar no botão

Depois que o botão estiver pronto, clique sobre ele e copie o código.

Entre no painel do Blogger, clique em design>editar HTML. Faça um backup do template e cole o código antes da tag ]]></b:skin> (use o Crtl+F do teclado para encontrá-la). Substitua o ponto (.) que está antes de cada palavra “button” por jogo da velha (#). Ficará assim: #button. Visualize e salve.
Em “elementos de página”, clique em adicionar gadget HTML/javascript.
Cole este código:

<div id="button>ESCREVA AQUI O TEXTO</div>

Escreva, no local indicado, o texto que deverá aparecer no botão. Se quiser colocar um link, use este outro código:

<div id="button"><a href=”LINK”>TEXTO</a></div>

Pronto! Agora seu blog já tem um botão feito apenas com CSS ;)
Veja, na imagem abaixo, um botão que criei para o DB ( é o azul):

Existem outros sites para criar botões personalizados em CSS:

• CSS Button Generator
• CSS3 Button Generator
• CSS Button Maker

Sobre os atuais problemas do Blogger

Entre maio e  junho deste ano, o Blogger apresentou diversos bugs e instabilidades. Hoje, ao visitar o fórum de ajuda e ao moderar os comentários deste blog, percebi que o gadget seguidores voltou a desaparecer de vários blogs e que muitos usuários estão ansiosos. Então, o motivo deste post é para dizer: don’t panic!
Não há motivo para pânico. Lembrem-se que o Blogger está passando por uma reformulação em seu código e que todos esses problemas são naturais. Reitero o que já disse anteriormente: todos os bugs sempre foram corrigidos. Sempre!
Ao mesmo tempo que estamos passando por problemas, diversos novos recursos estão sendo implantados, em um serviço que é 100% gratuito. É preciso que vocês tenham paciência. E pra quem não tem, basta contratar um host e migrar para outra plataforma de blogagem. Simples assim.
Usem sempre o fórum de ajuda para reportar dificuldades com seu blog:

• Ajuda do Blogger

Nós continuaremos informando-os sobre todas as novidades, bem como sobre todas as instabilidades deste período.
Recomendo a leitura dos seguintes posts:

• A instabilidade do Blogger e de seus usuários – Ricardo Fraga
• Por que eu escolhi o Blogger? – Ana Karenina

Opção nativa de favicon personalizado no Blogger

O Blogger disponibilizou recentemente uma opção nativa de personalização do favicon dos blogs. Favicon é aquela pequena imagem que fica ao lado do nome da página na aba ou janela do navegador; até o lançamento deste novo recurso o favicon padrão de todos os blogs era o logo do próprio Blogger e aqueles que quisessem altera-lo precisavam fazer uso de alguns hacks.

O novo recurso, por enquanto, pode ser acessado apenas pelo Blogger in Draft, na guia Layout em Elementos de página. Você vai ver um novo elemento chamado Favicon.

Clicando em Editar neste elemento você pode fazer o upload de uma imagem que queira usar para personalizar o favicon do seu blog.


Recomendo que vocês escolham uma imagem perfeitamente quadrada , de preferência com tamanho em pixels de 16x16 ou 32x32. A imagem escolhida como favicon deve estar em formato .ico, se a sua imagem não estiver neste formato você pode converta-la usando algum site de conversão online, recomendo neste caso o ConvertICO.

Como deixar o twitter em português

A equipe do Twitter anunciou hoje, que o site foi traduzido para o português do Brasil (PT-Br, em linguagem de informática) e que a tradução já está disponível para todos os usuários.
Para usar o Twitter em português, é preciso ir em settings > account> language e escolher “Português”. Depois, clique no botão “save”, coloque sua senha e pronto! Seu Twitter estará em português!
Veja um breve passo-a-passo, em imagens, de como deixar seu Twitter em português:

siga-nos no twitter!

Integrando o Google Reader e o gadget seguidores

Vários usuários, especialmente os iniciantes, optam por acompanhar os posts de seus blogs favoritos através do gadget “seguidores”, que nada mais é do que o Google Friends Connect.  Já os mais antigos, costumam assinar os feeds e acompanhar as atualizações pelo Google Reader. Integrar as duas ferramentas é muito simples e, certamente, irá facilitar bastante a vida de vocês.

Para aprender a assinar um Feed pelo Google Reader, clique aqui.
Para aprender a usar o gadget “seguidores”, clique aqui

Para acompanhar os posts de seus blogs favoritos em um só local:

1. entre no Google Reader 
2. faça login com sua conta do Google
3. clique em “opções”> “configurações do Google Reader”
4. em “preferências”, marque “exibir blogs acompanhados no Blogger”

Na barra lateral esquerda irá aparecer “blogs que estou acompanhando”

Para administrar seus blogs favoritos ou mesmo deixar de seguir algum deles, clique em “configurações do feed” e escolha uma das opções (veja imagem acima).

A nova interface do Blogger

Foi anunciado no fórum do Blogger, em 29/4, que a nova interface do Blogger estaria disponível para alguns usuários (sortudos), no Blogger In Draft – que é a página de testes de novas funções. Portanto, clique aqui e veja se você foi um dos contemplados.

Estamos felizes em anunciar o lançamento público do nosso novo design!
Mas, espere um pouco antes de ir verificar o seu painel do Blogger, porque estamos planejando um lançamento gradual que começa com um número limitado de usuários que visitam a nossa plataforma de testes de novos recursos, o Blogger in Draft. No início, apenas alguns de vocês conseguirão testar (os sortudos!) e ver o novo design do Blogger in Draft. Ao longo dos próximos dias e semanas, nós estaremos proporcionando para que todos consigam testar o novo design. Não há nenhum processo de ativação que deverá ser efetuado, basta esperar, e você verá que o seu painel foi alterado para o novo design, quando você efetuar login noBlogger in Draft. Fonte: Fórum do Blogger, por Camila Fitz – funcionária do Google

Na minha conta, a nova interface já está disponível. Penso que ela deixará o painel de controle mais organizado. Vejam as imagens que selecionei pra vocês:

Novo painel do Blogger

Painel de um blog específico (visão geral)

Área de postagens (notem que existe um contador para cada post)

Área do designer do modelo

Área das estatísticas

Se você, leitor, foi um dos felizardos e encontrou algum problema na nova interface, por favor, reporte-o no fórum.  O único problema que encontrei, foi quanto aos templates personalizados, ou seja, aqueles que não são do Blogger, pois na nova interface desapareceu a opção de editar o código-fonte via HTML, o que impede a instalação de hacks e até mesmo a modificação dos templates. Por se tratar de uma função essencial, acredito que, em breve, isso será será resolvido.
Lembrem-se também que agora temos várias opções de visualizações:
Novas opções de visualizações no Blogger
Extensão do Chrome para as novas opções de visualização