terça-feira, 18 de janeiro de 2011

Imagens Lado a Lado, Fazer Colunas nos Gadgets

Algumas pessoas que visitam nosso blog perguntaram sobre como colocar imagens uma ao lado da outra como fizemos com os links para nossa comunidade no Orkut, Facebook e Vídeos do Youtube que temos em nosso menu. Existem varias maneira de fazer aquilo usando códigos CSS ou tabelas em HTML(que já mostramos em outra postagem: Dividir um gadget em duas colunas), mas preferimos mostrar como fazer utilizando as divs.

divulgar bloggerNaturalmente estamos falando de gadgets de html/javascript onde podemos colocar códigos diretamente dentro deles, se quiser colocar gadgets ao lado do título do seu blog veja aqui:Como dividir o cabeçalho do blog em duas partes.

Voltando ao assunto colocar as imagens ou textos lado a lado no gadget use o seguinte código:
<center>
<div style="float:left; width:33%">conteudo aqui</div>
<div style="float:left; width:33%">conteudo aqui</div>
<div style="float:left; width:33%">conteudo aqui</div>
</center>


O valor 33 é utilizado porque são 3 colunas se usar outra quantidade e altere esse valor para que a soma seja algo próximo de 100 mas sem ultrapassar, por exemplo para duas colunas poderiamos usar 49 em cada uma delas.

Se depois de utilizar as 3 colunas quiser voltar a fazer uma coluna só acrescente essa linha no final <div style="clear:both">conteudo aqui</div>, ficando deste jeito:

<center>
<div style="float:left; width:33%">conteudo aqui</div>
<div style="float:left; width:33%">conteudo aqui</div>
<div style="float:left; width:33%">conteudo aqui</div>
<div style="clear:both">conteudo aqui</div>
</center>


dividir gadgets do blogger

Fazer um Blog mais Rápido

Muitos blogueiros colocam muitos acessórios e imagens no blog isso faz que ele demore em carregar isso muitas vezes pode fazer você perder visitas, ou seja, a pessoa ao entrar no seu blog pela primeira vez não tem paciência de esperar a pagina carregar completamente e sai sem ver o blog direito. Lembre-se que nem todos têm a mesma velocidade de conexão com a internet que você e a banda larga no Brasil muitas vezes pode ser chamada de banda lerda. Em uma enquete sobre velocidade de internet feita neste blog mostrou que a maioria das pessoas (60%) tem 1Mbps ou menos.


O site Pingdom Tools mede o tempo que seu blog leva para carregar e mostra uma lista com os valores de cada um dos itens, mais importante que o tempo medido pelo site em nossa opinião é essa lista dos itens do blog.

Testamos o Dicas para Blogs no Pingdom Tools e você pode ver na imagem abaixo mostrando o quando cada item do seu blog pesa (tamanho do arquivo) assim poderá pensar melhor quais coisas você poderia retirar do blog caso o seu seja um blog demorado para carregar.


Outra maneira de saber o real tempo que seu blog leva para carregar é limpar seu histórico de internet e acessar seu blog. Isso porque quando voltamos mais de uma vez em um site ele carrega mais rápido, pois parte dele já está em nosso computador por este motivo às vezes é bom limpar o histórico e ver se nosso blog demora muito para aparecer na tela do computador.

Para saber o que você deve ou não tirar do seu blog pense sobre quais são as coisas mais interessantes para as pessoas que visitam o blog, tudo que está lá é necessário? Por exemplo, blogs com musica demoram mais para carregar e às vezes a pessoa que visita nem gosta da musica ou está em um lugar que não pode ouvir (em ambiente de trabalho). Outra coisa importante é o formato das imagens que usamos faz as vezes faz muita diferença usar uma imagem .gif, .jpg ou .png, então é bom ter um programa para editar imagens e salva-las em vários formatos para ver qual será o melhor para utilizar no seu blog.

Colocar música no blog

Colocar música no blog é mais fácil do que parece. Isso é verdade pois nunca tinha me interessado por isso, mas revolvi pesquisar para escrever essa dica e para minha surpresa em menos de 10 minutos eu estava ouvindo música no meu blog. Fizemos um teste usando o Goear, você só precisa pesquisar pela música que deseja, quando você clica no nome da música aparece uma tela que você ouve a música e fornece o código para colocar no seu site, mas não é a url, é o código que está na frente do embed. Mas se quiser colocar gravar sua própria voz e colocar no seu blog veja esse tutorial: Fazer Podcast - Colocar MP3 no Blog.

Agora voltando ao tema musica no seu blog, o site Goear ainda fornece a opção de você fazer um cadastro e colocar a música que quiser, caso você não encontre a música desejada. Caso não deste site, aqui tem outros sites de hospedagem:

http://www.myfabrik.com
http://boomp3.com
Last FM
Radio Fusion
Deezer
Mixpod
Enfim o modo de colocar música é simples e basicamente o mesmo de colocar qualquer outra coisa, procure um site que tenha o que deseja e procure pelo código para colocar no seu blog.

Esses códigos devem ser colocados pela pagina editar layout >>> adicionar um gadget >>> html/javascript, então é só colar o código (isto no Blogspot), para outros blogs procure onde você edita o html ou modelo, enfim onde você pode colocar o código da música.

Classificação com estrelas nas postagens

Classificar com estrelas o blogSaber a opinião das pessoas sobre as coisas que escrevemos no blog é muito importante e útil, um jeito interessante de fazer isso é colocar um sistema de classificação das postagens o site OutBrain tem um widget fácil de instalar no blogger que mostra a classificação com imagens de estrelas, é um jeito fácil de votar e ainda poderá mostrar links de outras postagens.

Esse acessório de avaliação com estrelas é muito fácil de instalar no blog, entre no site OutBrain e logo você verá os links para instalação no Blogger, Wordpress, Typepad e outros. Então é só clicar no ícone do Blogger (se seu blog for blogspot).

Blogger-Wordpress
Na próxima tela você pode escolher se quer ou não fazer um registro, sugerimos que faça o registro assim poderá acompanhar as estatísticas das classificações que suas postagens receberem e também fazer alguns configurações. Não se esqueça de selecionar o idioma se não o widget aparecerá em inglês no seu blog.

Registrar Blogger

Após fazer as escolhas e clicar no botão get widget now! Você será redirecionado até a pagina do blogger onde terá que fazer login para instalar esse widget, caso tenha mais de um blog aparecerá uma tela assim para escolher em qual blog irá colocar esse novo acessório.
Adicionar gadget

Agora já está tudo pronto e só precisamos aguardar que as pessoas visitem e votem nas estrelinhas no final de cada uma das postagens do blog.

Criar barra com acessórios no blog

Sempre é bom ter novidades no blog, então crie uma barra de ferramentas para seu blog com tradutor, galeria de fotos, twitter, facebook, usuários online, assinar feed, vídeos do youtube, busca no seu blog e até aquelas janelinhas de notificação que aparecem no canto da tela, parecidas com as usadas no MSN para avisar sobre contatos online ou emails. Isso tudo pode ser feito com o Wibiya.


Precisa fazer um cadastro simples: nome, endereço de email, endereço do blog, senha.. Sinceramente a parte mais difícil foi devido a minha falta de atenção em não notar o botão Next > que fica do lado esquerdo de onde preenchemos o cadastro, mas piadas a parte após concluir esse cadastro você irá para essa pagina.

toolbar blogger
Onde vamos escolher qual aparência terá nossa barra de ferramentas, apenas clique sobre a cor que gostar mais e pronto. Outra coisa muito interessante é poder enviar uma imagem para ser usada como ícone (bottom) da barra, o site irá sugerir o logotipo de blog, mas você pode enviar uma imagem (formato jpg, gif ou png de no maximo 30K) se quiser, depois de terminar clique em next.

aplicativos para blogs
Nesta tela da imagem acima vamos escolher quais aplicativos usaremos na nossa barra de ferramentas note que ao passar o mouse sobre cada um deles a imagem muda e você pode escolher instalar mostrando a opção de instalar na sua barra.Mas não se preocupe se faltar algum detalhe ou instalar algo que mude de idéia depois, ela é muito fácil de editar.

Configurar barra de acessórios para blog
Quando clicar nas ferramentas (aplicativos) para inseri-los na barra poderá aparecer janelas deste tipo pedindo para inserir alguns dados como, por exemplo, seu nome no twitter ou outras coisas dependendo do que estiver instalando, mas isso também é fácil e intuitivo. Basta preencher e clicar no botão done.

wibiya no blogspot
Agora quando clicar em next estará tudo pronto e aparece a seguinte pagina, então clique na opção blogger, isso abrirá uma nova janela para você selecionar o blog que vai inserir o gadget (caso você tenha mais de um blog).

instalar gadget no blogger
Uma dica muito legal é apagar o título que aparece no gadget, ele não é necessário, além disso, a barra não aparecerá onde está o gadget, mas na parte de baixo da pagina como aqui em nosso blog.