BNW - Bloggando Na Web

Usando uma imagem para assinar os artigos do blog no Blogger

2011-12-07T19:38:00.001-02:00

Olá querido leitor do Bloggando Na Web, depois de muito tempo sem publicar nenhum artigo, hoje eu mostrarei como utilizar uma imagem para assinar os artigos do blog!

Como você já deve saber, ao publicar algum artigo no blog, o nome do autor do mesmo é automaticamente adicionado ao rodapé do artigo, assim como é ilustrado na imagem abaixo.

Rodapé padrão dos blogs criados na plataforma Blogger

Mas, nem todo mundo gosta desse rodapé e/ou gostaria de adicionar uma assinatura personalizada aos seus artigos. E utilizar uma imagem como assinatura, poderia ser uma boa opção. Geralmente, esse tipo de assinatura é mais utilizada por blogs femininos, mas nada impede que outros blogs também a utilizem! Agora chega de falar e vamos ao que interessa!

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Layout, e na seção Postagens no blog, clique no link Editar.

2. Na janela que se abrir, desmarque a opção que mostra o nome do autor da postagem, como ilustra a imagem abaixo - se quiser desmarque a opção que mostra a data também -, depois clique no botão Salvar.

3. Agora iremos adicionar a imagem no rodapé dos artigos. Vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

4. Clique no botão Editar HTML e marque a caixa Expandir modelos de widgets.

5. Pressione Ctrl+F para abrir a janela Localizar do navegador, e procure o código abaixo.

<div class='post-footer'>

<div class='post-footer-line post-footer-line-1'><span class='post-author vcard'>

<b:if cond='data:top.showAuthor'>

<data:top.authorLabel/>

<span class='fn'><data:post.author/></span>

</b:if>

6. Imediatamente entre o código destacado em azul e o código que foi destacado em vermelho, adicione este outro código.

<b:if cond='data:blog.pageType == "item"'>

<div style="width:100%;" align="left">

<img src="link-da-imagem" border="0" alt="Escrito por: seu-nome"/>

</div>

</b:if>

Agora veja o que você pode alterar no código acima:

Em azul: esse código é responsável por mostrar a assinatura somente dentro dos artigos;
Em rosa: através dessa opção você pode escolher a posição da assinatura. Mude-a para “left” para posicioná-la à esquerda; mude-a para “center” para posicioná-la no centro; ou mude-a para “right” para posicioná-la à direita.
Em vermelho: você deve substituir essa frase pelo link da imagem que você quer utilizar como assinatura;
Em laranja: altere a frase pelo seu nome, dessa forma, se o navegador não conseguir carregar a imagem que você especificou, a frase “Escrito por: seu-nome” aparecerá no lugar.

7. Depois de adicionar o código e fazer as modificações que você quer, clique no botão Visualizar e, se estiver tudo certo, clique no botão Salvar modelo.

Pronto, se tudo ocorreu corretamente a sua assinatura deverá estar aparecendo no rodapé dos seus artigos! Mas lembre-se que ela só aparece na página do artigo, portanto, você deverá clicar no título do artigo para acessá-lo e poder ver a assinatura!

Atenção: é importante que você saiba que eu utilizo como base para a criação dos tutoriais, os templates fornecidos no Designer de modelo do BLogger, portanto, se seu template não for nativo do Blogger, o tutorial poderá não funcionar com você!
Esse foi um artigo bem simples, mas espero que seja de alguma utilidade para quem quer customizar um pouco mais seu blog! Em breve postarei mais artigos. Abraços a todos!

Dynamic Views agora pode ser editado através do Designer de modelo

2011-10-30T18:22:00.003-02:00

Olá querido leitor do Bloggando Na Web, seja bem-vindo a mais um artigo! Um mês após o lançamento dos templates dinâmicos, a equipe do Blogger informou em seu blog oficial (Blogger Buzz), que agora é possível fazer algumas customizações em tais templates, através da ferramenta Designer de modelo.

O suporte à customização que foi introduzido na plataforma, permite, num primeiro momento, a customização do plano de fundo, fontes e cores. Mas, creio eu que, a equipe do Blogger irá adicionar suporte a outros tipos de customização também, assim como os templates “não-dinâmicos”.

A customização dos templates dinâmicos pode ser feita exatamente como a dos não-dinâmicos. Veja o passo-a-passo abaixo.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo.

2. Escolha um dos templates dinâmicos e clique no botão Personalizar.

3. Você será direcionado para o Designer de modelo, como ilustra a imagem abaixo.

Nessa área, você poderá alterar, indo na aba Plano de fundo, a imagem de fundo do seu blog. Veja o exemplo abaixo.

Caso você queira que a imagem fique somente no topo do blog, e que não ultrapasse a barra de menu do template, limite-se a utilizar, como plano de fundo, uma imagem com no máximo 65 pixels de altura!

Você pode alterar também, através da aba Avançado, a fonte e a cor dos textos e alguns elementos do blog, como ilustra a imagem abaixo.

Se você não estiver usando nenhuma imagem como plano de fundo, você pode adicionar uma cor sólida como fundo do blog.

4. Para aplicar as modificações feitas, não se esqueça de clicar no botão Aplicar ao blog, localizado no canto superior direito da página.

E essas são as customizações que podem ser feitas por enquanto. Vamos esperar por um maior suporte para os templates dinâmicos num futuro próximo. E como a equipe do Blogger informou no final de seu artigo, em breve o suporte a gadgets será adicionado também!

Com informações: Blogger Buzz.

Novidade: integração entre o perfil do Blogger e do Google Plus

2011-10-29T01:01:00.003-02:00

Olá querido leitor do Bloggando Na Web, seja bem-vindo a mais um artigo! Dando continuidade a seu leque de novidades, a equipe do Blogger informou, recentemente, que agora é possível alterar o perfil do Blogger para o perfil do Google Plus - sua mais nova rede social.

Os usuários que utilizam, atualmente, o gadget de Perfil do Blogger em seus blogs, o veem como ilustrado na imagem abaixo (antes), e, após fazer a alteração do perfil para o Google Plus, o gadget de Perfil passará a ser mostrado como no exemplo abaixo (depois).

Gadget de Perfil antes e depois da alteração de perfil

Para quem usa, atualmente, o Perfil do Blogger em seus blogs, possuem um perfil como ilustrado na Imagem 1, mas após fazer a alteração, o perfil será mostrado como na Imagem 2.

Imagem 1: Perfil padrão do Blogger

Imagem 2: Perfil do Google Plus

Informações

Antes de fazer a alteração, é importante que você leia algumas informações fornecidas na página de FAQ do Blogger. Mas, se você não quiser ler tais informações, o que eu recomendo que você faça, você pode clicar aqui e ir direto para os passos de como fazer a alteração.

► O que acontece quando mudo para um perfil do Google+?
As informações de seu blog baseadas anteriormente em seu perfil do Blogger, como nome de exibição e foto, passam a refletir as informações de seu perfil do Google+.

Depois da mudança, seu nome de exibição é substituído por seu nome do perfil do Google+. Porém, seu nome de exibição do Blogger é mantido nos comentários feitos antes da mudança. Todas as ocorrências de seu nome em feeds, o gadget de seu perfil do Blogger, novos comentários e as ocorrências de seu nome de exibição do Blogger em comentários anteriores passam a vincular a seu Perfil do Google+.

► É obrigatório associar meu blog a meu nome real?
Não, associar seu blog a seu nome real não é obrigatório. A vinculação deve ser feita apenas pelas pessoas que desejam associar sua identidade da vida real a seus blogs.

► Quando mudo para um perfil do Google+, o que acontece com meu perfil do Blogger?
Seu perfil do Blogger fica indisponível para os visitantes e as pessoas são redirecionadas para seu perfil do Google+.

► Esta mudança afeta quais blogs?
A mudança de perfil afeta todos os blogs com os quais você pode contribuir, inclusive blogs com vários autores. Para ver todos os blogs afetados, confira a lista em seu painel e não se esqueça de clicar em "Mostrar todos" para incluir os blogs ocultos.

Com informações: Blogger FAQ.

Alterando o Perfil do Blogger para o do Google Plus

Antes de mais nada, é importante que você tenha uma conta na rede social Google Plus, se você ainda não tem basta clicar aqui e utilizar seu login e senha (do Orkut; ou Gmail; ou Blogger; ou Youtube etc.) para ativar sua conta.

Saiba, também, que essa alteração só pode ser feita se você acessar o painel de controle do seu blog através do Blogger in Draft, mas, em breve, essa alteração poderá ser feita através do painel de controle padrão do Blogger. Agora vamos ao que interessa!

1. Tendo sua conta no Google Plus, faça login no Blogger através do Blogger in Draft, e você verá uma mensagem como a ilustrada na imagem abaixo, clique no botão Começando. Se a mensagem não aparecer acesse o seguinte endereço: http://draft.blogger.com/switch-profile.g.

Mensagem de alteração do perfil

2. Após clicar no botão, ou seguir o link, você será direcionado para a página de alteração do perfil, como ilustra a imagem abaixo.

Página de alteração do Perfil

3. Leia com atenção os dados fornecidos nessa página, e se você realmente quiser fazer a alteração, marque a opção “Li o texto acima e compreendo perfeitamente que meu perfil público do Google+ agora será associado a todos os meus blogs e estou pronto para começar a usar o perfil do Google+ no Blogger”, em seguida clique no botão Mudar agora.

4. Você será desconectado de sua conta do Google, e deverá informar sua senha. Isso serve para confirmar que é você, dono da conta, quem está solicitando a alteração de perfil. Então, informe a senha da sua conta para fazer login novamente.

5. Ao fazer login, você será direcionado para uma página como a ilustrada na imagem abaixo. Selecione os blogs que você deseja mostrar em seu perfil do Google Plus e clique no botão Adicionar blogs; se não quiser mostrar nenhum blog, clique no botão Ignorar.

6. Se tudo tiver ocorrido bem, você verá a mensagem ilustrada na imagem abaixo: “Os blogs selecionados foram adicionados ao seu perfil do Google Plus”.

Mensagem de alteração realizada com sucesso

Pronto, agora o link de seu perfil nos comentários, e qualquer outro lugar que mostrava o seu perfil do Blogger, passará a mostrar seu perfil do Google Plus.

Outras informações

Após ter alterado o seu perfil para o Google Plus, você terá 30 dias para voltar ao perfil antigo do Blogger, e você poderá fazer isso através desse link. Após esse período, seu perfil do Blogger será excluído definitivamente, e não será mais possível utilizá-lo.

Os blogueiros que utilizam pseudônimos (nomes fictícios) para assinar suas postagens, provavelmente, não acharão interessante fazer essa alteração, pois ao fazer a alteração, as pessoas poderão saber o nome real do mesmo.

E essa é mais uma das várias novidades que a equipe do Blogger apresenta aos usuários da plataforma. O que você acha da integração de produtos que a Google vem promovendo? Acha vantajoso? Não acha? Deixe sua opinião através de um comentário!

Com informações: Blogger Buzz.

Novidade: Blogger adiciona integração com o Google Analytics

2011-10-13T23:49:00.001-03:00

Olá querido leitor do Bloggando Na Web, dando continuidade a rajada de novidades que o Blogger vem disparando, hoje, 13.10.2011, a equipe anuncia mais uma ferramenta, que na minha opinião vai facilitar a vida de muitos blogueiros!

Muitos metablogs escrevem artigos que mostram como acompanhar o tráfego de visitas de um blog, e, creio eu, que o serviço mais utilizado para tal finalidade, e também o serviço mais divulgado por tais metablogs, seja o serviço fornecido pela própria Google: o Google Analytics.

Há diversos artigos, na web, que discorrem sobre o assunto, mas abaixo você pode conferir alguns dos quais eu já li e recomendo fortemente que você também leia:

Google Analytics: Conheça quem visita seu site - Gerenciando Blog
Google Analytics: Analisando e usando as informações - Gerenciando Blog
Google Analytics: Comparando seu site com a concorrência - Gerenciando Blog
Google Analytics: o que Estão Procurando em seu Blog - Gerenciando Blog

A parte mais complicada na utilização do Google Analytics, e a que mais gera confusão para os iniciantes, é a adição do código de rastreamento do serviço dentro do template. Mas isso agora é coisa do passado!

A equipe do Blogger acaba de lançar uma ferramenta de integração entre o Blogger e o Google Analytics, que facilita esse processo de tal maneira, que até um macaco de olhos vendados, com as mãos amarradas nas costas, vestido de bailarina e andando de monociclo em cima de uma corda bamba pode fazer! Rsrs.

Antes de mais nada, você deve ter uma conta no serviço, então vou partir da premissa de que você já a tenha! Basta seguir os passos abaixo para fazer a integração.

1. Primeiramente você precisa adquirir o código de identificação do seu blog no Google Analytics, para isso, basta acessar o endereço: http://www.google.com.br/analytics/.

2. Se você estiver usando a versão antiga do Google Analytics, você encontrará o código de identificação do seu blog no local indicado na Imagem 1; se você estiver usando a nova versão do serviço, o código estará localizado no local indicado na Imagem 2.

Imagem 1: Versão antiga do Google Analytics

Imagem 2: Versão nova do Google Analytics

3. Após ter encontrado o código, copie-o e salve-o no bloco de notas.

4. Faça login no Blogger e acesse o painel de controle do seu blog, depois clique no menu Configurações > Outro, e na seção Número da conta do Google Analytics adicione o código de identificação de seu blog, como ilustra a imagem abaixo.

5. Após adicionar o código, clique no botão Salvar configurações, localizado no canto superior direito da página.

Pronto, agora o seu blog já estará devidamente integrado com o Google Analytics!

Observações:

O Google Analytics é suportado apenas em blogs que estejam utilizando algum dos templates do Blogger (fornecidos do Designer do modelo) e nos templates dinânicos. Usuários dos templates clássicos (aqueles mais antigos) não possuem suporte ao serviço.

Após ter feito a integração entre o Blogger e o Google Analytics, é importante que você remova (caso haja) o código de rastreamento antigo do template do seu blog, para que não ocorra nenhum conflito.

A equipe do Blogger avisa que pelo fato da coleta de dados do Google Analytics, ser diferente da coleta de dados feita pelo menu Estatísticas do Blogger, pode haver alguma diferença entre em dados fornecidos nos dois recursos.

Com informações: Blogger Buzz.

Novidade: o efeito Lightbox padrão do Blogger agora é opcional

2011-10-13T00:45:00.000-03:00

Olá querido leitor do Bloggando Na Web, seja bem-vindo a mais um artigo. Há um tempo atrás, a equipe do Blogger anunciou o lançamento de um novo recurso em sua plataforma: o efeito Lightbox.

Muito se foi comentado na blogosfera sobre a implantação ~~forçosa~~ do mesmo, e, até mesmo aqui no Bloggando Na Web, eu postei alguns artigos sobre o referido recurso. Você pode conferir tais artigos através dos links fornecidos abaixo.

Novidade: efeito Lightbox padrão em todos os blogs do Blogger - Bloggando Na Web
Como desativar o Lightbox padrão do Blogger - Bloggando Na Web

Porém, depois de uma má recepção de tal novidade e um monte de reclamações, por parte de vários usuários da plataforma, pelo fato de o recurso ter sido implantado em todos os blogs da plataforma sem nenhum aviso, a equipe do Blogger decidiu desabilitar temporariamente o recurso.

Mas, ontem, dia 12.10.2011, o novo recurso foi habilitado novamente na plataforma, mas, dessa vez, de uma maneira optativa! Agora, os usuários que quiserem utilizar o Lightbox padrão do Blogger, poderão ativá-lo através do painel de controle de seus blogs! Abaixo você pode conferir como ativar/desativar esse novo recurso.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois clique no menu Configurações > Postagens e comentários.

2. Na seção Open images in Lightbox, escolha a opção Sim para ativar o efeito, ou Não para desativá-lo, como mostra a imagem abaixo.

Opção para ativar/desativar o Lightbox padrão do Blogger

3. Após ter ativado ou desativado o efeito, clique no botão Salvar configurações, localizado no canto superior direito da página.

Pronto, agora basta utilizar, ou não, o efeito em seu blog. Por mais que muitos usuários não tenham gostado desse recurso, eu creio que alguns o irão receber ~~novamente~~ muito bem, pois, enquanto o mesmo estava desativado, eu recebi alguns e-mails com pedidos de tutoriais que ensinassem como instalar o Lightbox padrão do Blogger novamente.

Vale lembrar também, que mesmo que você ative esse novo recurso, o mesmo não funcionará nos novos modelos de templates da plataforma.

Se você gostou do artigo, achou ele útil ou ficou com dúvidas, sinta-se a vontade para participar postando um comentário.

Com informações: Blogger Buzz.

Novidade: “Dynamic Views” apresenta sete novos modelos de template

2011-09-28T03:25:00.001-03:00

Olá querido leitor do Bloggando Na Web, depois do recente ~~fracasso~~ “imprevisto” com o lançamento do lightbox padrão do Blogger à plataforma, ontem, 27.09.2011, o Blogger deu uma grande reviravolta e anunciou, em seu blog oficial (Blogger Buzz), o lançamento de sete novos templates.

Na realidade, esses templates não são uma novidade, pois foram colocados em fase de testes no dia 31.03.2011, como você pode conferir nesse artigo, publicado no Blogger Buzz. Na época, havia apenas 5 templates disponíveis, mas agora o Blogger integrou, definitivamente, tais templates a plataforma, e como foi dito acima, agora são 7 no total.

Os template estão disponíveis tanto para quem usa o painel de controle antigo, quanto para quem utiliza o painel de controle novo, e foi adicionado ao Designer d modelo na seção “Dynamic Views” (Visualização Dinâmica).

Eu, pessoalmente, acho os templates simplesmente espetaculares! Templates limpos, leves e bonitos. Todos criados com o que há de melhor no momento em tecnologia web (AJAX, HTML5 e CSS3), com diversos efeitos já instalados por padrão!

Abaixo, você pode conferir um vídeo criado pela equipe do Blogger, que demonstra todos os templates que foram disponibilizados aos usuários da plataforma, que são: Classic, Flipcard, Magazine, Mosaic, Sidebar, Snapshot e Timeslide.

(Assistir no Youtube)

Mas, melhor do que ver um vídeo com a demonstração dos templates, é testá-los! Insira o nome do seu blog no campo abaixo, então, clique no botão Testar referente ao template que você deseja visualizar em seu blog.

Informe apenas o nome do seu blog:
http://.blogspot.com

Ao clicar no botão *Testar, o template não* será aplicado definitivamente ao seu blog!
*Classic*	*Flipcard*	*Magazine*	*Mosaic*	*Sidebar*	*Snapshot*	*Timeslide*

Os templates são muito bacanas, não é? E eles estão disponíveis para qualquer blog que tenha sido criado através da plataforma Blogger! Agora que você já visualizou como seu blog ficou com os novos templates, você poderá acessá-lo, sempre que quiser, através do endereço: http://nome-do-seu-blog.blogspot.com/view.

Mas, se você quiser aplicar um dos novos templates definitivamente no seu blog, basta acessar o menu Modelo, clicar no botão Personalizar, e escolher um dos sete modelos disponíveis na seção Dynamic Views. Mas, lembre-se que, os leitores sempre poderão escolher um dos outros sete modelos, através do menu dropdown.

Por que meu blog não abre com o Dynamic Views?

Provavelmente, alguns de vocês, notarão uma mensagem de erro ao tentar utilizar um dos sete templates. É importante que você saiba, que os modelos estão disponíveis para todos os blogs, sem exceção! Então, tenha certeza de conferir os seguintes itens nas configurações do seu blog:

► O blog deve ser público

Para que o blog possa utilizar os templates do Dynamic Views, é necessário que o mesmo seja público, ou seja, que qualquer pessoa possa acessá-lo! Para tornar seu blog público, é muito simples: acesse o menu Configurações > Básico, e na seção Leitores do blog, escolha a opção Qualquer pessoa.

► O feed do blog deve ser completo ou até o jump break

É importante também, que você ofereça seu feed de maneira completa, ou até o jump break. Para configurar o seu feed dessa maneira, também é bastante simples: acesse o menu Configurações > Outro, e na seção Permitir feed de blog, escolha a opção Completa ou Até jump break.

Se o seu blog estiver configurado dessa maneira, você poderá utilizar os novos modelos!

Quais são as vantagens?

Scroll (rolagem de página) infinito;
Busca integrada em todos os templates;
Organização de artigos por: recente, data, marcador ou autor;
Em alguns templates os artigos são abertos com um efeito lightbox;
Suporte a navegação com as setas do teclado;
Botões de compartilhamento (Google+, Twitter e Facebook) já instalados;
As imagens são carregadas enquanto se navega;
Compatível com a maioria dos navegadores (em suas versões mais recentes).

Quais são as desvantagens?

Hacks e outros elementos (lightbox, shadowbox, paginação etc.) não funcionam;
Não possuem suporte a gadgets;
No momento não permitem uma maior customização;
Sistemas de comentários de terceiros (DISQUS, Intense Debate etc.) não funcionam;
Customização de alguns elementos (<blockquote>, <code> etc.) não funcionam.

Sem dúvidas, esses templates serão de grande utilidade para as pessoas que possuem dificuldades em encontrar um template moderno, bonito, simples e leve! O meu prefiro até o momento, sem dúvidas, foi o template Sidebar! Mas e você, o que achou desses novos templates, e qual deles você mais gostou? Participe postando um comentário!

Com informações: Blogger Buzz.

Atualização — 07.10.2011 às 20h14
Hoje, a equipe do Blogger postou um novo artigo em seu blog oficial, com informações sobre a utilização/aceitação do Dynamic Views por parte dos usuários da plataforma. Abaixo você pode conferir um resumo das informações que foram fornecidas.

De acordo com a equipe do Blogger, centenas de usuários já ~~abandonaram~~ trocaram o template de seus blogs, para um dos novos modelos dinâmicos. O modelo mais utilizado pelos usuários da plataforma até o momento, é o modelo Magazine, e em segundo lugar está o modelo Classic.

Foram feitas algumas melhorias nos modelos também, tais quais:

Maior ênfase nos resultados de busca dos templates Magazine e Timeslide;
Melhoria na preservação da posição das imagens dentro dos artigos;
Habilitado o suporte a JavaScript dentro dos artigos;
Corrigido o problema de engrenagens girando infinitamente ao clicar em alguns links;
Habilitado o suporte às páginas de arquivo.

A equipe do Blogger informou também, em seu artigo, que grande parte dos usuários da plataforma comentaram em seus feedbacks, sobre a falta de suporte a gadgets e de opções para uma maior customização dos novos modelos.

A boa notícia é que a equipe do Blogger já está trabalhando para sanar esse “problema”, e que, pelo fato dos novos modelos serem criados totalmente em JavaScript, HTML5 e CSS3, os gadgets estão passando por uma total reformulação, mas que muito em breve o primeiro pacote de gadgets para os modelos dinâmicos será lançado!

Quanto à customização dos modelos, a equipe do Blogger informa que reconhece o esforço dos blogueiros em customizar seus blogs, e que pretendem adicionar, em um futuro próximo, um maior suporte à customização dos novos modelos através da ferramenta Designer de modelo.

Embora muitas mudanças estejam ocorrendo na plataforma - muitas delas de grande utilidade, diga-se de passagem -, ainda espero o dia em que irei anunciar que a equipe do Blogger acaba de adicionar um novo formulário de comentários à plataforma. ~~Oremos.~~ Esperemos.

Atualização — 30.10.2011 às 18h40
A equipe do Blogger, recentemente, adicionou um suporte aos templates dinâmicos, que permite que os mesmos sejam customizados através da ferramenta Designer de modelo. Confira um artigo de como fazer a customizando, clicando aqui.

Novidade: efeito Lightbox padrão em todos os blogs do Blogger

2011-09-20T01:24:00.000-03:00

Olá queridos leitores do Bloggando Na Web, ontem, 19.09.2011, finalmente, o Blogger se pronunciou, em seu blog oficial, a respeito de seu novo recurso: o efeito Lightbox.

No artigo anterior, onde eu mostro como desativar o lightbox padrão do Blogger, eu deixei bem claro o meu descontentamento em relação ao Blogger, por adicionar um novo recurso em toda a plataforma e não se manifestar a respeito do mesmo, mas chega de atirar pedras, pois, como foi dito no primeiro parágrafo deste artigo, finalmente a equipe do Blogger deu as caras.

Em seu artigo, o Blogger descreve seu novo recurso como uma maneira de fornecer a nós, usuários de sua plataforma, uma melhor, e também mais moderna, experiência na utilização de blogs - entenda-se: utilização de imagens em blogs.

Como diz o artigo no blog oficial do Blogger, e no artigo anterior aqui do BNW, esse novo recurso está disponível em todos os blogs criados através da plataforma Blogger, portanto, você pode visualizá-lo em funcionamento diretamente em seu blog, basta clicar em alguma imagem que esteja dentro de seu artigo para que a mesma abra com o efeito.

É importante que você saiba, que esse efeito só funciona com as imagens que não possuem links, ou que os links direcionem para o próprio endereço da imagem. Imagens que sirvam como link para outra página (seja ela interna ou externa) não ativarão o efeito.

Infelizmente, até o momento que estou escrevendo este artigo, não há nenhuma opção que permita a customização ou desativação do efeito, mas a equipe do Blogger já se pronunciou informando que estão trabalhando para tornar o efeito mais “flexível” para os usuários, assim como, pediram para que os usuários que não tenham ficado satisfeitos com o novo recurso, postem um feedback informando o porquê.

Confira também os artigos:

Como desativar o Lightbox padrão do Blogger - Bloggando Na Web
Colocando o efeito LightBox no Blogger - Bloggando Na Web
Colocando o efeito Shadowbox no Blogger - Bloggando Na Web

Atualização — 23.09.2011 às 02h40
Devido à diversas reclamações dos usuários, sobre a implantação forçada do efeito lightbox em todos os blogs, e, também, reclamações sobre conflitos que estariam sendo gerados em blogs por culpa do novo recurso, o Blogger comunicou em seu blog oficial que o efeito foi desativado para passar por algumas melhorias.

Atualização — 13.10.2011 às 02h15
Ontem, a equipe do Blogger informou, em seu blog oficial, que o efeito Lightbox está novamente disponível na plataforma, mas de maneira opcional. Confira como ativar/desativar esse recurso, clicando nesse link.

Como desativar o Lightbox padrão do Blogger

2011-09-17T20:53:00.000-03:00

Olá querido leitor do Bloggando Na Web, muito se tem divulgado e comentado na blogosfera sobre o novo recurso que o Blogger implantou, recentemente, nos blogs criados através de sua plataforma. Estamos falando sobre o efeito Lightbox padrão do Blogger.

Se você não está sabendo sobre esse novo recurso, você pode conferir, na imagem abaixo, um exemplo de como ele funciona no blog.

Exemplo do lightbox padrão do Blogger

Esse efeito é ativado quando se clica em qualquer imagem que esteja dentro de um artigo, esteja essa imagem com um link ou não (desde que o link direcione para a própria imagem).

Embora esse efeito, aparentemente, esteja disponível em todos os blogs da plataforma, o Blogger até o momento não se pronunciou sobre a implantação do mesmo em nenhum de seus blogs: Blogger Buzz e Blogger in Draft. Também não há nenhum código visível no template dos blogs, ou qualquer opção no painel de controle da plataforma que permita aos usuários ativar ou desativar essa opção.

Eu, pessoalmente, odiei o fato do Blogger implementar um recurso em toda a plataforma sem, ao menos, avisar seus usuários ou adicionar o recurso em uma forma de testes, e eu não fui o único!

Então, conversando com o Kevin, dono do blog Designer Effects, ele me mandou o link de um artigo do blog Vagabundia que contém um código que desativa esse novo recurso. Porém, o código foi criado originalmente pelo Mark, dono do blog Code from an English Coffee Drinker.

Enfim, já ficou aparente o meu descontentamento com a falta de respeito (a meu ver) da equipe do Blogger, para com seus usuários. Agora veremos como bloquear/desativar esse efeito Lightbox padrão do Blogger; há dois métodos, escolha o que mais lhe agradar ou o que melhor funcionar em seu blog.

Gadget para bloquear o lightbox do Blogger

Esse método é recomendável para os usuários que não têm afinidade com a edição do template do blog, pois, através dele, o código de desativação/bloqueio será adicionado dentro do gadget, o que facilitará na hora da remoção do mesmo. Se esse é o seu caso, siga os passos abaixo.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois clique no menu Layout > Adicionar um Gadget > HTML/JavaScript.

Gadget HTML/JavaScript

2. Cole o código mostrado abaixo, dentro do campo de conteúdo do gadget e, em seguida, clique no botão Salvar.

<!-- Script para bloquear o lightbox padrão do Blogger -->



<script type="text/javascript">

//<![CDATA[

var lightboxIsDead = false;

function killLightbox() {

  if (lightboxIsDead) return;

  lightboxIsDead = true;

  var images = document.getElementsByTagName('img');

  for (var i = 0 ; i < images.length ; ++i) {

     images[i].parentNode.innerHTML = images[i].parentNode.innerHTML;

  }

}



if (document.addEventListener) {

  document.addEventListener('DOMContentLoaded', killLightbox, false);

} else {

  document.attachEvent('onDOMContentLoaded', killLightbox);

  window.attachEvent('onload', killLightbox);

}

//]]>

</script>



<!-- Fim do script para bloquear o lightbox padrão do Blogger -->

Pronto, agora basta acessar o seu blog e clicar em qualquer imagem que esteja dentro de seus artigos, para conferir se o efeito lightbox do Blogger está sendo bloqueado pelo script de maneira satisfatória.

Editar template para bloquear o lightbox do Blogger

Esse método é recomendável para quem já possui a prática de editar o template do blog. O código para esse método é diferente do código acima, ele é menor, portanto, é mais leve. Se você prefere adicionar o código no template do seu blog, basta seguir os passos abaixo - e se não está causando nenhum tipo de conflito com outros elementos do blog.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML e, em seguida, pressione Ctrl+F para abrir a janela Localizar do navegador, e procure o código abaixo.

</body>

3. Imediatamente abaixo desse código, adicione esse outro código.

<!-- Script para bloquear o lightbox padrão do Blogger -->



<script type='text/javascript'>

//<![CDATA[

 var images = document.getElementsByTagName('img');

  for (var i = 0 ; i < images.length ; ++i) {

    images[i].parentNode.innerHTML = images[i].parentNode.innerHTML;

  }

//]]>

</script>



<!-- Fim do script para bloquear o lightbox padrão do Blogger -->

4. Para finalizar, clique no botão Visualizar e, se estiver tudo certo, clique no botão Salvar modelo.

A partir de agora, seu blog deverá não exibir mais o lightbox do Blogger. Se esse código não funcionar no seu blog (o que eu duvido), você poderá tentar ainda o primeiro código.

-

Caso tenha surgido algum interesse no efeito lightbox do Blogger, e você queira um efeito semelhante, porém mais moderno, você pode conferir esses dois artigos:

Colocando o efeito LightBox no Blogger - Bloggando Na Web
Colocando o efeito Shadowbox no Blogger - Bloggando Na Web

E você, o que achou desse novo recurso do Blogger? Sinta-se a vontade para participar postando um comentário com a sua opinião.

Site de origem: Code from an English Coffee Drinker

Atualização — 20.09.2011 às 01h40
Ontem, 19.09.2011, o Blogger finalmente se pronunciou sobre o lançamento desse novo recurso através de um artigo em seu blog oficial. Você pode conferir um artigo atualizado clicando nesse link.

Atualização — 20.09.2011 às 04h30
~~O artigo foi atualizado para inclusão de um novo código que funciona de maneira mais eficiente para bloquear o lightbox do Blogger.~~

Atualização — 23.09.2011 às 00h50
Devido ao fato de os códigos que foram divulgados nesse artigo, causarem alguns conflitos com os gadgets fornecidos pelo Blogger, o Mark atualizou, novamente, os códigos, de modo que não haja mais tais conflitos.

Atualização — 23.09.2011 às 02h40
Devido à diversas reclamações dos usuários, sobre a implantação forçada do efeito lightbox em todos os blogs, e, também, reclamações sobre conflitos que estariam sendo gerados em blogs por culpa do novo recurso, o Blogger comunicou em seu blog oficial que o efeito foi desativado para passar por algumas melhorias.

Atualização — 13.10.2011 às 02h15
Ontem, a equipe do Blogger informou, em seu blog oficial, que o efeito Lightbox está novamente disponível na plataforma, mas de maneira opcional. Agora você pode ativar e desativar esse recurso sem precisar recorrer aos códigos citados acima. Confira como ativar/desativar esse recurso, clicando nesse link.

Como destacar os comentários do autor no DISQUS

2011-09-11T21:25:00.000-03:00

Olá querido leitor, seja bem-vindo a mais um artigo do Bloggando Na Web. Se você acompanha o blog desde o início ou já leu todos os artigos aqui do blog, você deve ter reparado que eu já escrevi diversos artigos sobre os comentários do Blogger.

Dentre esses artigos, eu já mostrei como diferenciar os comentários do autor do blog, para aqueles que utilizam o formulário de comentários do próprio Blogger. Mas no artigo de hoje, eu mostrarei como diferenciar os comentários do autor para quem utiliza o formulário de comentário do DISQUS.

Se você ainda não utiliza o formulário de comentário do serviço DISQUS e gostaria de experimentá-lo, clique no link abaixo para saber como instalá-lo em seu blog.

Como instalar o DISQUS em um blog do Blogger - Bloggando Na Web

Se você já possui o DISQUS instalado em seu blog, basta seguir os passos abaixo para destacar os comentários do autor/moderador.

1. Acesse o endereço: http://www.disqus.com, e faça login em sua conta.

2. Após estar no seu painel de controle, clique no nome do blog (se você utilizar o DISQUS em mais de um) que você deseja diferenciar os comentários do autor/moderador, como ilustra a imagem abaixo.

3. Em seguida, clique no menu Settings e depois em Appearance, como ilustra a imagem abaixo.

4. Role a página até o fim e, dentro da seção Custom CSS, adicione o código mostrado abaixo.

#dsq-content .dsq-moderator .dsq-comment-header {

background: #XXXXXX url(link-da-imagem-de-fundo) repeat-x left top !important;

}



#dsq-content .dsq-moderator .dsq-comment-header a:link,

#dsq-content .dsq-moderator .dsq-comment-header a:visited {

color: #XXXXXX !important; /* cor do nome do autor */

text-decoration:none !important;

}



#dsq-content .dsq-moderator .dsq-comment-header a:hover {

color: #XXXXXX !important; /* cor do nome do autor com o mouse em cima */

text-decoration:underline !important;

}

Para a alegria de vocês, queridos leitores, eu criei algumas imagens que irão gerar um efeito muito bonito aos comentários. Basta você olhar a tabela abaixo, e fazer as alterações no código acima antes de colá-lo no DISQUS. A parte destacada em azul deve ser substituída pelo código hexadecimal, e a parte destacada em vermelho deve ser substituída pelo link da imagem.

Clique com o botão direito do mouse na imagem e, escolha a opção “*Salvar imagem como*”.
Código Hexadecimal	Imagem de fundo	Exemplo (Clique para ampliar)
#D0E4F6
#FFFFC7
#C7FFC7
#C7C7FF
#FFC7FF
#FFC7C7
#C7EBD9
#FFE9C7
#E9C7FF

Substitua também a parte destacada em verde pelo código hexadecimal da cor que você quer para o nome do autor - escolha uma cor que combine com a cor da imagem de fundo que foi escolhida. Se você tiver conhecimentos sobre CSS, poderá alterar o código de modo que combine com o template do seu blog.

5. Após adicionar o código no campo de CSS do DISQUS, três botões aparecerão no canto inferior direito da tela, clique no botão Save Changes para salvar a alteração.

Informação: você pode adicionar o código que foi mostrado acima direto no código do template, mas é altamente recomendado que você adicione através do DISQUS, como indicam os passos acima.
Após ter salvo as alterações, basta acessar o seu blog e verificar se seus comentários estão aparecendo de forma diferenciada com relação ao comentário dos leitores.

Se o seu blog possui mais de 1 autor, você deverá acessar sua conta do DISQUS e adicionar tais autores como moderadores, para que os comentários dos mesmos sejam afetados pela customização.

Se você gostou do artigo, achou ele útil, ficou com dúvidas ou não encontrou a cor que procurava, sinta-se a vontade para participar postando um comentário.

Como corrigir o erro de marcadores do gadget Postagens populares

2011-09-11T06:53:00.000-03:00

Olá querido leitor do Bloggando Na Web, seja bem-vindo a mais um artigo! No artigo de hoje veremos como corrigir o erro de marcadores do gadget Postagens populares. Esse gadget foi disponibilizado pela equipe do Blogger há algum tempo, e, com certeza, é um gadget muito importante para um blog, pois, através do mesmo, os leitores podem ver facilmente quais são os artigos mais visitados (populares) do blog.

Embora esse gadget seja muito útil, ele possui um pequeno “erro” - vamos assim dizer - que mostra marcadores ao lado dos artigos. Para entender melhor, veja, na imagem de exemplo abaixo, a parte destacada em vermelho.

Erro de marcadores no gadget de Postagens populares

Estes marcadores não causam nenhum tipo de problema no blog, mas atrapalham a estética do mesmo, passando para o leitor a ideia de que o blog possui erros, é desorganizado e/ou amador. Se o seu blog apresenta esse “erros” quando você utiliza o gadget de Postagens populares, siga os passos abaixo para resolvê-lo.

1. Faça login no Blogger, clique no nome do seu blog para acessar o painel de controle do mesmo, depois clique no menu Modelo.

2. Clique no botão Editar HTML e, em seguida, pressione Ctrl+F para abrir a janela Localizar do navegador e procure o código mostrado abaixo.

]]></b:skin>

3. Imediatamente acima deste código, adicione este outro.

/* ----- Correção do erro do gadget Postagens populares ----- */



.popular-posts ul li {

list-style:none;

}

4. Para finalizar, clique no botão Visualizar e, se estiver tudo certo, clique no botão Salvar modelo.

Pronto, agora basta acessar o seu blog e verificar se o problema foi resolvido. Se você gostou do artigo, achou ele útil ou ficou com dúvidas, sinta-se a vontade para participar postando um comentário.

Blogger avisa “iniciantes” que editar o Template pode causar problemas

2011-09-07T16:58:00.000-03:00

Olá querido leitor do Bloggando Na Web, hoje ao tentar fazer algumas modificações no template do blog, recebi uma mensagem informando que a edição do template só deveria ser feita por usuários experientes.

Devo confessar que essa é a maior tentativa que eu já vi na plataforma de tentar evitar que usuários inexperientes ~~destruam~~ baguncem os códigos do template, e que comecem a utilizar, mais frequentemente, a opção de adição de CSS da ferramenta Designer do modelo.

Abaixo você pode conferir uma imagem de tal aviso.

Aviso aos blogueiros iniciantes | Imagem por: Bloggando Na Web
Clique para ampliar

Tradução livre: a edição direta do HTML pode afetar a maneira como alguns recursos funcionam e só é recomendada para usuários avançados. Editar o HTML do template pode afetar de forma imprevisível os recursos do Blogger. Nós recomendamos que você utilize o Designer do modelo primeiro, onde você pode adicionar CSS na seção Avançado.

Para editar o HTML do template é necessário clicar no botão Prosseguir, e clicando no botão Cancelar a janela de Editar HTML será fechada.

Tenho quase certeza de que esse aviso, é uma tentativa, da equipe do Blogger, de diminuir a frequência de pedidos de ajuda no fórum do Blogger, relacionados a erros no template, filtrando assim os pedidos que realmente são mais relevantes.

Essa grande concentração de pedidos de ajuda, se dá ao fato de que muitos usuários navegam na web atrás de recursos para “melhorar” seus blogs, e começam a adicionar diversos códigos ao template sem saber o que estão adicionando ou se tal recurso é compatível com outros já instalados - e a consequência disso só pode ser uma!

Essa mensagem, por enquanto, só aparece quando se está utilizando o novo painel de controle; no painel de controle antigo não notei nenhum tipo de mensagem, mas isso, talvez, não seja tão necessário, uma vez que o Blogger deve pretender tornar o novo painel no padrão.

E embora eu esteja usando o novo painel de controle no idioma português, a mensagem aparece no idioma inglês, o que nos leva a acreditar que essa mensagem é apenas um teste/acabou de ser implementada, mas isso não é nenhum problema, uma vez que outros recursos também estão aparecendo em inglês - com o tempo esses pormenores serão resolvidos.

Atualização — 13.09.2011 às 11h00 | O Blogger atualizou a mensagem que foi mostrada na imagem do artigo, e agora a mesma já aparece no idioma português.

Como utilizar o site Webs para hospedar arquivos do Blogger

2011-09-02T12:48:00.000-03:00

Olá querido leitor, seja bem-vindo a mais um artigo do Bloggando Na Web. Recentemente, o leitor Miguel, postou um comentário, no artigo onde explico como instalar o efeito shadowbox em um blog do Blogger, informando que teve dificuldades para hospedar os arquivos do efeito no site Webs.

Então, eu resolvi criar este artigo para mostrar como utilizar o site Webs como um host (local de armazenamento) para alguns arquivos do blog.

O que é o site Webs?

Antes de mais nada, é importante que você saiba que o site Webs não tem a função principal de oferecer serviço de hospedagem de arquivos. O site Webs se trata de uma plataforma para a criação de websites, assim como o Blogger é uma plataforma para criação de blogs.

Porém, diferente do Blogger, o site Webs fornece um pequeno disco virtual onde é possível armazenar diversos tipos de arquivo. E é nesse momento que ele se torna útil para nós; iremos “tirar vantagem” desse pequeno disco virtual oferecido.

Criando uma conta e hospedando arquivos no site Webs

Logo abaixo, você poderá assistir a um vídeo que mostra, passo-a-passo, como cria uma conta no site Webs e como hospedar arquivos na plataforma de maneira correta.

(Assistir no Youtube)

Como foi dito no vídeo, uma das grandes vantagens de se utilizar o disco virtual do site Webs, é que, através dele, você pode editar diversos tipos de arquivo diretamente na plataforma, assim como, o link de tais arquivos possuem links permanentes (permalinks), o que facilita - e muito -, na hora de substituir um arquivo que aparece em vários locais.

Vale lembrar também que, para contas gratuitas no site Webs, o espaço de armazenamento do disco virtual é de 40 Mb. Portanto, você deve hospedar arquivos pequenos, que você altera com frequência e/ou que você utiliza em muitos lugares.

Conhece ou utiliza outro serviço que possa ser utilizado como host para alguns arquivos do blog? Então participe postando um comentário. E se ficou com dúvidas, sinta-se a vontade para perguntar, também nos comentários.

Novo painel de controle do Blogger está sendo liberado aos usuários

2011-09-01T00:35:00.000-03:00

Como todos já cansaram de ler em diversos blogs, a Google está reformulando o visual de todos os seus produtos, e o Blogger não ficou de fora dessa lista.

Recentemente, o Blogger disponibilizou o novo painel de controle da plataforma, porém, esse novo painel só podia ser acessado através do Blogger in Draft (http://draft.blogger.com/), que é o endereço pelo qual os usuários da plataforma podem testar os novos recursos antes de os mesmos serem lançados definitivamente para todos os usuários.

Porém, ontem, 31.08.2011, ao acessar o painel de controle inicial do Blogger pelo endereço principal (http://www.blogger.com/), uma mensagem apareceu, perguntando se eu gostaria de testar o novo painel de controle. Veja a imagem abaixo.

Mensagem de liberação do novo painel | Imagem por: Bloggando Na Web
Clique para ampliar

Essa opção de mudança ocorrerá gradativamente, ou seja, apenas alguns usuários a verão, porém, aos poucos o novo painel será liberado para todos os usuários da plataforma, mas se você está ansioso para testar o novo painel de controle, basta acessar seu blog pelo endereço: http://draft.blogger.com/.

Ao clicar no botão Experimente agora, o painel de controle do Blogger será atualizado para o novo painel, que, como foi dito acima, só estava disponível no Blogger in Draft. Você pode ver abaixo uma imagem de exemplo do painel antigo e, em seguida, do novo.

Painel de controle antigo | Imagem por: Bloggando Na Web
Clique para ampliar

Painel de controle novo | Imagem por: Bloggando Na Web
Clique para ampliar

Como você pode ver acima, houve uma grande mudança no painel de controle. Ele está agora mais “clean” (limpo), moderno e, mesmo assim, manteve a simplicidade e intuitividade. Claro que algumas opções mudaram de nome, assim como os antigos menus e abas.

O que vale nesse momento é que você explore esse painel utilizando um blog de testes, assim será mais fácil de se familiarizar com o as novas funções, que não param de ser adicionadas à plataforma.

Depois de explorar o novo painel, se você não tiver gostado do mesmo e quiser voltar para o painel antigo, basta clicar no link Voltar para a interface antiga, que se encontra no topo do painel de controle inicial; como você pode ver na imagem abaixo.

Opção para voltar ao painel antigo | Imagem por: Bloggando Na Web
Clique para ampliar

Ao clicar nesse link, uma mensagem aparecerá agradecendo por você ter experimentado o novo painel de controle (veja a imagem abaixo), e dentro dessa mensagem haverá dois botões: Enviar comentários e Ignorar.

Mensagem de agradecimento | Imagem por: Bloggando Na Web

Clicando no primeiro botão, o painel voltará ao modelo antigo e uma nova janela/aba se abrirá com um pequeno formulário, onde você poderá informar o motivo de você ter resolvido voltar para o modelo antigo e onde você poderá sugerir melhorias; clicando no segundo botão, o painel voltará para o modelo antigo e você não precisará informar nada.

Você pode fazer essa mudança, entre o painel antigo e novo, a qualquer momento, por enquanto, mas, provavelmente, assim que o novo painel for liberado para todos, o novo painel deverá se tornar definitivo.

É importante lembrar que mesmo que o novo painel de controle tenha sido lançado no endereço principal do Blogger, muitas novidades ainda serão adicionadas à plataforma. Faça seus testes e tire sua conclusão sobre o novo painel de controle do Blogger; se você já testou o painel, participe deixando um comentário com sua opinião!

Com informações: Blogger Buzz.

Como adicionar o botão de seguir do Twitter em um blog do Blogger

2011-08-25T12:21:00.000-03:00

Atenção: um de nossos leitores nos informou que este artigo está desatualizado, portanto, assim que possível este artigo passará por uma atualização para refletir as informações de maneira correta!
Olá querido leitor do Bloggando Na Web, seja bem-vindo a mais um artigo. Eu já escrevi diversos artigos sobre o Twitter aqui no blog e, recentemente, uma “moda” tem atingido muitos blogs que costumo visitar, é a adição do Botão de Seguir do Twitter.

Esse botão tem uma aparência semelhante a do Tweet Button, que eu mostrei há um tempo atrás como instalar, porém, a função desse botão não é a de enviar os artigos para o Twitter em forma de tweet, e sim, proporcionar uma maneira mais rápida dos leitores poderem seguir seu perfil do serviço.

Então, já que a moda é adicionar tal botão, resolvi criar este artigo para mostrar como instalá-lo. Abaixo você pode conferir os botões que estão disponíveis para utilização.

Blogs com fundo claro	Siga @igoor_sp
	Siga @bloggandonaweb
Blogs com fundo escuro	Siga @igoor_sp
	Siga @bloggandonaweb

Como você pôde ver acima, há botões tanto para blogs que possuem fundo claro, quanto para blogs que possuem um fundo escuro, e tais botões são totalmente customizáveis para que se encaixem em seu blog. Aproveite os botões acima para nos seguir!

O bom desse botão é que ele pode ser adicionado em qualquer parte do blog que aceite HTML, ou seja, na sidebar, dentro dos artigos (como foi feito acima), dentro de páginas estáticas e qualquer outra parte do template.

Neste artigo eu mostrarei como adicioná-lo à sidebar (barra lateral) do blog, de forma que fique visível para todos os leitores! Então, siga os passos descritos abaixo.

Instalando o botão de seguir do Twitter

1. Faça login no Blogger, clique no nome do seu blog para acessar o painel de controle do mesmo, depois clique no menu Modelo, role a página até o final e clique na opção Fazer backup / Restaurar modelo. Faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique na opção Editar HTML do modelo.

3. Pressione Ctrl+F para abrir a janela Localizar do navegador, e procure o código abaixo.

</head>

4. Imediatamente acima deste código, adicione este outro.

<!-- Script do botão Seguir do Twitter -->

<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

<!-- Fim do script do botão Seguir do Twitter -->

5. Clique no botão Visualizar e, se estiver tudo certo, clique no botão Salvar modelo.

6. Agora vá no menu Layout e em seguida clique em: Adicionar um Gadget > HTML/JavaScript.

Gadget HTML/JavaScript | Imagem por: Bloggando Na Web

7. No campo de conteúdo do gadget, adicione o código mostrado abaixo.

<a href="http://twitter.com/seu-nome-de-usuário-do-twitter" class="twitter-follow-button" data-lang="pt">Siga @seu-nome-de-usuário-do-twitter</a>

Substitua a parte destacada em vermelho pelo seu nome de usuário do Twitter. Para finalizar, clique no botão Salvar.

Pronto, só de seguir esses passos o botão já aparecerá na sidebar do blog. Você pode adicionar botões para outros perfis do Twitter que você possua, para isso basta repetir o código do passo 7 e informar o nome de usuário para o qual você deseja criar o botão, como no exemplo abaixo.

<a href="http://twitter.com/seu-nome-de-usuário-do-twitter-1" class="twitter-follow-button" data-lang="pt">Siga @seu-nome-de-usuário-do-twitter-1</a>



<a href="http://twitter.com/seu-nome-de-usuário-do-twitter-2" class="twitter-follow-button" data-lang="pt">Siga @seu-nome-de-usuário-do-twitter-2</a>

Como eu informei no começo do artigo, é possível que você customize o botão a seu gosto, porém, é necessário que você altere algumas partes do código do passo 7. Veja abaixo as customizações que você pode fazer no botão.

Customizando o botão de seguir do Twitter

Para customizar o botão, você deve ir aonde você colocou o código do botão (passo 7). Depois, basta ver as opções de customizações abaixo e adicionar as que você desejar.

► Mostrar o número de seguidores

Por padrão, o número de seguidores do seu perfil do Twitter já aparece à frente do botão, mas caso você não queira mostrar quantas pessoas estão te seguindo, adicione o seguinte código: data-show-count="false", ao código do botão, como foi destacado em rosa no exemplo abaixo.

<a href="http://twitter.com/seu-nome-de-usuário-do-twitter" class="twitter-follow-button" data-show-count="false" data-lang="pt">Siga @seu-nome-de-usuário-do-twitter</a>

O resultado será o mostrado abaixo.

Antes	Siga @bloggandonaweb
Depois	Siga @bloggandonaweb

► Mudar cor e tema do botão

Por padrão, o botão aparece com o tema azul, mas você pode facilmente mudar a cor do botão adicionando o seguinte código: data-button="grey", ao código do botão, como foi destacado em rosa no exemplo abaixo.

<a href="http://twitter.com/seu-nome-de-usuário-do-twitter" class="twitter-follow-button" data-button="grey" data-lang="pt">Siga @seu-nome-de-usuário-do-twitter</a>

O resultado será o mostrado abaixo.

Antes	Siga @bloggandonaweb
Depois	Siga @bloggandonaweb

Note que ao mudar a cor do botão, automaticamente, as cores do link e do texto com o número de seguidores também muda. Isso acontece para que o botão se encaixe melhor em blogs com fundos escuros.

Porém, você pode adicionar os seguintes códigos: data-link-color="XXXXXX" (cor do link) e data-text-color="XXXXXX" (cor do texto), ao código do botão para alterar a cor do link e do texto, e manter o botão cinza. O valor XXXXXX deve ser substituído pelo código hexadecimal de alguma cor. Veja os exemplos abaixo.

<a href="http://twitter.com/seu-nome-de-usuário-do-twitter" class="twitter-follow-button" data-button="grey" data-link-color="91C21A" data-text-color="FF9900" data-lang="pt">Siga @seu-nome-de-usuário-do-twitter</a>

O resultado será o mostrado abaixo.

Antes	Siga @bloggandonaweb
Depois	Siga @bloggandonaweb

Essas são as customizações básicas, e mais interessantes, que você pode fazer no botão. Caso você queira, você pode mudar também o idioma, largura e alinhamento do botão, para isso, visite a página de customização do botão de seguir do Twitter (em inglês).

Lembre-se que você pode adicionar todas as customizações ao botão, não precisa utilizar apenas uma. Se você gostou da dica, achou ela útil ou ficou com dúvidas, sinta-se a vontade para participar postando um comentário.

Não se esqueça de compartilhar o artigo clicando nos botões e abaixo, e de nos seguir clicando em qualquer um dos botões acima.

Como capturar e mostrar thumbnails dos vídeos do Youtube

2011-08-24T01:56:00.000-03:00

Olá querido leitor, seja bem-vindo a mais um artigo do Bloggando Na Web. No artigo de hoje eu mostrarei como capturar thumbnails dos vídeos do Youtube.

Talvez, você já tenha tido a necessidade de colocar a imagem ilustrativa de um vídeo do Youtube no blog. Se já, você provavelmente recorreu ao bom e velho print screen, certo? Pois bem, depois de ler esse artigo, você verá como é muito simples adicionar thumbnails (imagens ilustrativas, miniaturas) de qualquer vídeo do Youtube, sem precisar tirar print screens!

Se você utiliza o site Youtube para fazer o upload de seus vídeos, você verá que, ao acessar a sua conta e clicar no botão Editar de qualquer vídeo, haverá uma opção que permite que você escolha dentre 3 opções de miniatura, como mostra a imagem abaixo.

Imagem por: Bloggando Na Web

Essas miniaturas - chamadas de thumbnails em inglês - são capturadas durante o upload do vídeo, e servem de “capa” para o mesmo quando o usuário ainda não clicou no botão de Play. Vamos entender melhor, veja o vídeo abaixo.

Se você não clicou no botão de Play, você deve estar vendo a imagem de um boneco laranja e um boneco azul segurando uma faca, e essa imagem é a famosa thumbnail - imagem que ilustra algo, nesse caso o vídeo.

Como eu já falei acima, você pode mudar a thumbnail que aparece no vídeo, acessando sua conta do Youtube e clicando na opção de editar vídeo, assim, você verá 3 opções para escolher. Se você não escolher nenhuma, a imagem que aparecerá será a número 2 (do meio), que é o padrão do Youtube.

Você já deve ter reparado que o link dos vídeos do Youtube é sempre o mesmo, o que muda é apenas o ID do vídeo. Veja abaixo como é o formato do link de um vídeo do Youtube.

http://www.youtube.com/watch?v=ID-DO-VÍDEO

As letras e números que aparecem aleatoriamente no final do link dos vídeos, são o ID do mesmo. Pode acontecer também de, em alguns casos, o link aparecer dessa forma:

http://www.youtube.com/watch?v=ID-DO-VÍDEO&feature=fvwrel

No caso acima, é importante que você saiba que o ID do vídeo aparece sempre antes do & e depois do sinal de igual, como foi destacado acima.

Para gerar as miniaturas do vídeo, o Youtube também utiliza o ID dos vídeos, e existem algumas opções que você pode usar, veja os exemplos abaixo:

Miniatura 1 120 x 90 pixels	Miniatura 2 120 x 90 pixels	Miniatura 3 120 x 90 pixels

O link para gerar essas imagens é sempre o mesmo (assim como os vídeos), e a única coisa que muda é o ID do vídeo do qual a imagem deve ser mostrada, veja o exemplo abaixo.

http://img.youtube.com/vi/ID-DO-VÍDEO/1.jpg

O link acima é responsável por mostrar a miniatura de qualquer vídeo do Youtube, basta substituir a parte que foi destacada em vermelho pelo ID do vídeo que você quer, e a parte que foi destacada em azul você pode mudar para: 1, 2 ou 3, que é o número da miniatura. Fazendo isso, uma miniatura pequena (120 x 90) será gerada.

Utilizando o mesmo link que foi mostrado acima, é possível gerar uma miniatura maior, com praticamente o tamanho original do vídeo (480 x 360). Para tal, basta adicionar as letras “hq” antes do número da miniatura, como mostrado abaixo.

http://img.youtube.com/vi/ID-DO-VÍDEO/hq1.jpg

Após adicionar as letras antes do número da miniatura, o resultado será o seguinte:

Miniatura 1 - 480 x 360 pixels

Miniatura 2 - 480 x 360 pixels

Miniatura 3 - 480 x 360 pixels

Viu como é simples, rápido e fácil?

Essa dica, com certeza, ajudará a diminuir a quantidade de print screens dos vídeos do Youtube, assim como, irá diminuir o trabalho de ter que salvar a imagem e carregá-la no blog, o que, consequentemente, reduzirá o espaço utilizado nos álbuns da sua conta do Picasa Web - onde as imagens do blog são armazenadas.

Se você gostou da dica, achou ela útil ou ficou com dúvidas, sinta-se a vontade para participar postando um comentário. E não se esqueça de compartilhar o artigo através dos botões que estão logo abaixo!

Novidade: recurso de autocompletar e sugestões de texto no Blogger

2011-08-10T02:23:00.005-03:00

Olá querido leitor do Bloggando Na Web, depois do recente lançamento do novo painel de controle do Blogger, para todos os usuários da plataforma, que acessam a mesma pelo Blogger in Draft, ontem, 09.08.2011, o Blogger anunciou em seu blog oficial mais uma novidade!

A novidade se chama Google Scribe. Esse recurso estava disponível no Google Labs - que está sendo desativado -, e agora pode ser encontrado na barra de ferramentas do editor de artigos. O recurso é representado pelo ícone de um lápis, como você pode ver na imagem abaixo.

Ícone do Google Scribe | Imagem por: Bloggando Na Web

Após clicar no ícone de lápis, o mesmo ficará selecionado, isso indica que o recurso está ativo. A finalidade desse recurso, é fornecer sugestões de frases e de palavras enquanto você digita o conteúdo do artigo.

No exemplo mostrado na imagem abaixo, eu digitei a frase “Deixa aconte” e o recurso mostrou, em cinza, a sugestão para completar o que eu estava escrevendo.

Sugestão única do Google Scribe | Imagem por: Bloggando Na Web

Depois que a sugestão aparece, você só precisa apertar alguma tecla de pontuação, como por exemplo, vírgula, interrogação, espaço ou Enter, para aceita-la.

Esse recurso possui também a opção de mostrar várias sugestões de uma só vez. Para ativar essa opção, basta clicar na seta que há ao lado do ícone de lápis e marcar a opção Show Multiple Suggestions, como mostra a imagem abaixo.

Opção de múltiplas sugestões | Imagem por: Bloggando Na Web

Após ativar essa opção, você notará que, ao digitar algo no editor de artigos, aparecerá diversas sugestões. Para escolher uma delas, basta clicar com o mouse na que melhor se encaixar ao contexto do que você está escrevendo. Veja um exemplo na imagem abaixo.

Múltiplas sugestões do Google Scribe | Imagem por: Bloggando Na Web

O recurso possue também algumas teclas de atalho, que permitem seu acesso e configuração de uma maneira mais comoda. São eles:

Ctrl+J - para ativar e desativar o recurso;
Ctrl+Shift+J - para ativar e desativar a opção de várias sugestões;
ESC - para remover a sugestão;
TAB - para mostrar novamente a sugestão que foi removida.

E, no presente momento, está disponível para os seguintes idiomas:

Árabe
Holandês
Inglês

Francês
Alemão
Húngaro

Italiano
Polonês
Português

Russo
Espanhol
Sueco

Informação: esse recurso está disponível, por enquanto, somente no painel de controle do Blogger in Draft, portanto, se você quiser testá-lo, deverá fazer login através desse endereço: http://draft.blogger.com/.
É importante lembrar que esse recurso só aparece na barra de formatação do modo Escrever, portanto, quem gosta de escrever seus artigos através do modo HTML, assim como eu, não poderá usufruir desse recurso. A menos, é claro, que goste de ficar trocando de editor.

Com certeza, esse recurso veio para facilitar a vida de quem tem dificuldades de se expressar através da escrita.

Com informações: Blogger in Draft.

Como transformar links em botões utilizando CSS3 no Blogger

2011-07-13T00:55:00.002-03:00

Olá caro leitor, seja bem-vindo a mais um artigo do Bloggando Na Web. No artigo de hoje veremos como criar botões utilizando CSS3.

Já faz um tempo que eu comecei a utilizar esses botões aqui no blog, porém utilizo apenas no link “leia mais”.

Comecei também a utilizar esses botões customizados no meu novo blog: Blog do Aluno Contabilista, dessa vez no link “leia mais”, na sidebar e dentro dos artigos. Mas você pode ver alguns exemplos logo abaixo.

Botão 1 - Botão 2 - Botão 3 - Botão 4 - Botão 5 - Botão 6 - Botão 7 - Botão 8

Eu vou mostrar como criar esses botões em cima de links, mas nada impede que você utilize os atributos do CSS em qualquer outro elemento do blog! Agora vamos ao que interessa!

1. Primeiramente precisamos adicionar uma classe ao link que queremos transformar em botão! Então faça login no Blogger, acesse o painel de controle do seu blog clicando no ícone de casa e vá no menu Modelo.

2. Role a página até o final e faça uma cópia de segurança do seu template clicando no link “Fazer backup / Restaurar modelo”, e em seguida no botão “Fazer download do modelo completo”.

3. Agora você precisará encontrar o link que você deseja transformar em botão. Clique no link “Editar modelo” e marque a opção “Expandir modelos de widgets”, pressione Ctrl+F para abrir a janela Localizar do navegador e procure pelo código de um link.

O código de um link é semelhante ao mostrado no exemplo abaixo:

<a href="endereço-da-página">Palavra do link</a>

Para facilitar que você encontre os links que existem dentro do seu template, procure apenas pelo começo do código, que foi destacado em vermelho acima. Eu estarei utilizando como exemplo o link “leia mais” do Blogger. Se quiser utilizar o mesmo link, procure pelo código abaixo:

<b:if cond='data:post.hasJumpLink'>

<div class='jump-link'>

<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>

</div>

</b:if>

4. Como você pode ver no código acima, a classe jump-link está dentro de uma DIV, então eu passarei ela para dentro do link. O código deverá ficar como o mostrado abaixo:

<b:if cond='data:post.hasJumpLink'>

<div>

<a class='jump-link' expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>

</div>

</b:if>

5. Você pode manter o nome da classe como jump-link mesmo, ou mudar para qualquer outro que você quiser - eu manterei como está! Agora que a classe está dentro do link, adicionaremos o código CSS que irá adicionar o estilo de botão! Pressione Ctrl+F e procure o código abaixo:

]]></b:skin>

6. Imediatamente acima deste código, adicione este outro código:

/* ----- CSS do Jump-link (leia mais) ----- */



.jump-link {

    font:normal bold 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif; /* fonte do link - define o tamanho da letra, fonte da letra etc */

    margin:0px;

}



a.jump-link:link {

    color:#FFFFFF; /* cor do texto do botão */

    background:#FF4040; /* cor de fundo alternativo , aparecerá nos navegadores que não aceitam CSS3 */

    background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD0000)); /* cores que formarão o gradiente de fundo, a primeira cor fica no topo do botão e a segunda na parte de baixo */

    background: -moz-linear-gradient(top, #FF4040, #CD0000); /* repita as cores do gradiente que você escolheu */

    border:1px solid #8B0000; /* cor da borda */

    text-decoration:none;

    padding:5px;

    outline:none;

    -moz-border-radius:5px; /* valor do arredondamento das pontas do botão */

    -webkit-border-radius:5px; /* valor do arredondamento das pontas do botão */

    -goog-ms-border-radius:5px; /* valor do arredondamento das pontas do botão */

    border-radius:5px; /* valor do arredondamento das pontas do botão */

}



a.jump-link:visited {

    color:#FFFFFF; /* cor do texto do botão que já foi clicado */

    background:#FF4040; /* cor de fundo alternativo do botão que já foi clicado */

    background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD0000)); /* gradiente de fundo do botão que já foi clicado */

    background: -moz-linear-gradient(top, #FF4040, #CD0000); /* gradiente de fundo do botão que já foi clicado */

    border:1px solid #8B0000; /* cor da borda do botão que já foi clicado */

    text-decoration:none;

    padding:5px;

    outline:none;

    -moz-border-radius:5px; /* valor do arredondamento das pontas do botão */

    -webkit-border-radius:5px; /* valor do arredondamento das pontas do botão */

    -goog-ms-border-radius:5px; /* valor do arredondamento das pontas do botão */

    border-radius:5px; /* valor do arredondamento das pontas do botão */

}



a.jump-link:hover {

    color:#FFFFFF; /* cor do texto do botão com o mouse em cima */

    background:#FF4040; /* cor de fundo alternativo com o mouse em cima */

    background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD0000)); /* gradiente de fundo com o mouse em cima */

    background: -moz-linear-gradient(top, #FF4040, #CD0000); /* gradiente de fundo com o mouse em cima */

    border:1px solid #8B0000; /* cor da borda com o mouse em cima */

    text-decoration:none;

    padding:5px;

    outline:none;

    -moz-border-radius:5px; /* valor do arredondamento das pontas do botão */

    -webkit-border-radius:5px; /* valor do arredondamento das pontas do botão */

    -goog-ms-border-radius:5px; /* valor do arredondamento das pontas do botão */

    border-radius:5px; /* valor do arredondamento das pontas do botão */

    -webkit-box-shadow: 0px 0px 5px #333333; /* cor da sombra do botão quando o mouse está em cima do botão */

    -moz-box-shadow: 0px 0px 5px #333333; /*cor da sombra do botão quando o mouse está em cima do botão */

    box-shadow: 0px 0px 5px #333333; /*cor da sombra do botão quando o mouse está em cima do botão */

}



a.jump-link:active {

    color:#FFFFFF; /* cor do texto do botão quando é clicado */

    background:#000000; /* cor de fundo do botão quando é clicado */

    border:1px solid #000000; /* cor da borda do botão quando é clicado */

    text-decoration:none;

    padding:5px;

    outline:none;

    -moz-border-radius:5px; /* valor do arredondamento das pontas do botão */

    -webkit-border-radius:5px; /* valor do arredondamento das pontas do botão */

    -goog-ms-border-radius:5px; /* valor do arredondamento das pontas do botão */

    border-radius:5px; /* valor do arredondamento das pontas do botão */

    -webkit-box-shadow: 0px 0px 0px #333333;

    -moz-box-shadow: 0px 0px 0px #333333;

    box-shadow: 0px 0px 0px #333333;

}

Note que na frente de alguns elementos há comentários, os comentários são escritos da seguinte maneira /* exemplo de comentário */. Estes comentários servem para que você saiba o que cada atributo faz! Altere somente os atributos que contêm comentários à frente! Você pode ver uma lista com diversas cores para utilizar no seu botão clicando aqui.

7. Depois de colocar as cores que você quer para o botão clique em “Visualizar” e, se estiver tudo certo, clique em “Salvar modelo”.

Pronto, agora é só ir no seu blog e ver como está aparecendo o link “leia mais”.

-

Se você quiser adicionar o estilo de botão a algum outro link, basta procura-lo dentro do template ou dentro do artigo, adicionar uma classe à ele (com o nome que você quiser) e depois adicionar o CSS, lembrando de mudar o nome da classe no CSS!

Por exemplo, para fazer o botão 6 (roxo) que você viu acima, eu coloquei ele dentro do artigo da seguinte maneira:

<a class="post-example-button-6" href="#">Botão 6</a>

Em seguida adicionei o CSS da seguinte forma:

.post-example-button-6 { atributos aqui }

a.post-example-button-6:link { atributos aqui }

a.post-example-button-6:visited { atributos aqui }

a.post-example-button-6:hover { atributos aqui }

a.post-example-button-6:active { atributos aqui }

Então é isso, basta mudar o nome das classes e pronto! Espero que vocês tenham gostado do artigo e que façam bom uso dessa customização! Qualquer dúvida sinta-se a vontade para postar um comentário! Até o próximo artigo.

Artigo atualizado: 13/07/2011

Player de música com estilo de “rádio online” no Blogger

2011-07-10T00:21:00.005-03:00

Olá querido leitor, seja bem-vindo a mais um artigo do Bloggando Na Web. Eu já mostrei há um tempo atrás como colocar um player de música do MixPod no Blogger.

Porém, esse player fica localizado na sidebar (barra lateral) do blog, e ao recarregar a página ou acessar qualquer artigo, o player pára de tocar e começa a música desde o início. Mas, no artigo de hoje, eu mostrarei como instalar um player que fica semelhante àqueles de rádios online! Com a vantagem de ao mudar de página ou acessar qualquer outra página do blog, a música continua tocando sem ser interrompida!

Eu descobri esse player após minha amiga, Alessandra, pedir para que eu o instalasse em seu Tumblr, e ao entrar no site do serviço, vi que ele podia ser instalado também no Blogger e no Wordpress! Para ver uma demonstração de como o player ficará, você pode visitar nosso blog de testes! Note que ao entrar em qualquer artigo a música não é interrompida!

Mas vamos ao que interessa, siga os passos abaixo para instalar o player!

1. Acesse o endereço: http://scmplayer.net/.

2. Na aba “Choose Skin” você verá diversos modelos de players para escolher; os players disponíveis no momento são os mostrados na imagem abaixo:

(Clique na imagem para ampliar)

3. Após escolher seu player, clique na aba “Edit Playlist”. Nessa nova aba você deverá colocar no campo “SONG TITLE” o nome do cantor/banda e o nome da música; no campo “SONG URL” você deve por o link de um arquivo em MP3 ou o link de algum vídeo do Youtube.

Atenção: se você for utilizar os vídeos do Youtube, tenha certeza de copiar o link de vídeos que estejam com a incorporação ativa, caso contrário a música não irá tocar!
Você pode adicionar quantas músicas quiser! Para adicionar mais campos de música basta clicar no botão “Add More Songs”; para excluir campos, basta clicar no botão com um X. Veja um exemplo abaixo:

(Clique na imagem para ampliar)

4. Na próxima aba, “Configure Settings” (veja imagem abaixo), você pode fazer algumas configurações do player.

(Clique na imagem para ampliar)

► Autostart

Esta opção permite que você configure quando o player irá tocar as músicas. Marcando “no” as músicas só começarão quando o leitor clicar em Play; marcando “yes” as músicas tocarão assim que a página for carregada.

► Shuffle Playback

Esta opção permite que você configure se as músicas serão tocadas aleatoriamente ou na sequencia que foram adicionadas. Marcando “no”, as músicas serão tocadas na sequencia; marcando “yes”, as músicas tocarão aleatoriamente.

► Default Volume

Através dessa opção você pode configurar o volume padrão do player.

► Placement of the Player

Esta opção permite que você escolha a localização do player. Marcando “top”, o player ficará no topo da tela; marcando “bottom”, o player ficará na parte inferior da tela.

► Show Playlist by Default

Essa opção permite que você configure a visualização da playlist. Marcando “no”, a playlist não será mostrada; marcando “yes”, a playlist será mostrada (mas o blog não aparecerá inteiro na tela); e marcando “only on large screen”, a playlist só será mostrada para quem acessar o blog usando uma resolução de tela alta. Eu aconselho que você deixe marcada a opção “no”, mas você que sabe!

5. Para finalizar clique no botão “Done”, isso gerará o código do player. Copie-o e salve-o no bloco de notas.

6. Agora iremos instalar o player no blog! Faça login no Blogger, acesse o painel de controle do seu blog clicando ícone de casa e vá no menu Modelo.

7. Role a página até o final e faça uma cópia de segurança do seu template clicando no link “Fazer backup / Restaurar modelo”, e em seguida no botão “Fazer download do modelo completo”.

8. Pressione Ctrl+F para abrir a janela Localizar do navegador, e procure o código abaixo:

</body>

9. Imediatamente acima deste código, adicione o código do player, aquele que você salvou no bloco de notas no passo 5.

10. Clique no botão “Visualizar” e, se estiver tudo certo, clique no botão “Salvar modelo”.

Pronto, agora é só ir no seu blog e conferir como ficou! Lembre-se: muitos leitores navegam na web ouvindo suas próprias músicas, então, não abuse desse recurso para não perder leitores!

Se você gostou do artigo, achou ele útil ou ficou com dúvidas, sinta-se a vontade para participar deixando um comentário! E não esqueça de divulgá-lo clicando nos botões que estão abaixo do artigo!

Artigo atualizado: 10/07/2011

Novidade: novas opções de “caixa de entrada” para o Gmail

2011-07-08T07:53:00.000-03:00

Olá querido leitor do Bloggando Na Web, seja bem-vindo a mais um artigo! Eu há mostrei em um dos artigos anteriores como mudar o design do provedor de e-mail Gmail para o estilo do Google Plus (nova rede social da Google). No artigo de hoje veremos uma novidade adicionada a esse provedor de e-mail que facilita a organização os e-mails recebidos.

Esse novo recurso permite que o usuário escolha diversos tipos de caixa de entrada para sua conta, cada uma criada para facilitar uma tarefa ao usuário.

Primeiramente é necessário que você acesse a sua conta do Gmail. Após feito isso, você verá um aviso com a seguinte mensagem: “Experimente uma nova caixa de entrada”. Como ilustra a imagem abaixo:

(Clique na imagem para ampliar)

Como você pode notar, há cinco opções de caixa de entrada para serem escolhidas. Abaixo você pode conferir o que cada uma faz.

► Clássica

Este modelo de caixa de entrada, é o modelo clássico (padrão) do Gmail e não apresenta nenhuma novidade na organização dos e-mails.

► Importantes primeiro

Ao escolher esta opção, dois grupos serão criados; todos os e-mails marcados como importantes serão mostrados dentro do grupo “Importantes”, e os e-mails que não forem marcados como importantes aparecerão no grupo “Todas as demais”. Esta opção é muito útil para que você dê prioridade aos e-mails importantes (óbvio).

► Não lidas primeiro

Esta opção é semelhante a anterior, e cria dois grupos também, mas apenas as mensagem que não foram lidas aparecerão no grupo “Não lidas”, e os e-mails que já foram lidos aparecerão no grupo “Todas as demais”. Esta opção é útil para fornecer ao usuário uma rápida visualização de novos e-mails, pois automaticamente os novos e-mails (não lidos) aparecerão nesse grupo.

► Com estrela primeiro

Como as demais opções, essa caixa de entrada cria dois grupos e separa no grupo “Com estrela” os e-mails que você marcar como favorito. Muito útil para separar os e-mails que você recebe de pessoas que você gosta, pois facilita a leitura dos mesmos a qualquer hora.

► Caixa prioritária

Este modelo de caixa de entrada é o que eu estou utilizando no momento. Ele cria três novos grupos: “Importantes e não lidas”, “Com estrela” e “Todas as demais” - na verdade é uma mistura das opções anteriores. Essa caixa de entrada é muito útil para criar uma melhor organização dos e-mails.

Eu a utilizo da seguinte maneira: sempre que recebo e-mails com sugestões feitas pelos leitores, marco-os como favorito para atender futuramente; quando é um e-mail que eu espero uma resposta e/ou é um e-mail pelo qual estou conversando com alguém, marco esse e-mail como importante para lembrar de respondê-lo. E para os demais e-mails, envio-os para o grupo “Todos os demais”.

É claro que a utilização das caixas de entrada dependerá da sua necessidade. Se você não liga muito para a organização dos e-mails, o modelo clássico com certeza continua sendo uma ótima opção!

Espero que você tenha gostado da dica e que faça bom uso de tal recurso. Sinta-se a vontade para participar deixando um comentário, e não esqueça de divulgar este artigo clicando nos botões abaixo do mesmo!

Artigo atualizado: 08/07/2011

Como integrar o Botão +1 aos botões do AddThis

2011-07-07T20:35:00.005-03:00

Olá querido leitor, seja bem-vindo a mais um artigo do Bloggando Na Web. No artigo de hoje eu mostrarei como integrar o Botão +1 do Google ao código dos botões de compartilhamento oferecidos pelo serviço AddThis.

Se você ainda não utiliza tal serviço, abaixo segue o link de alguns artigos que mostram como instalar, passo-a-passo, os botões de compartilhamento em blogs do Blogger.

Novo modelo de botões para compartilhamento do AddThis - Bloggando Na Web
Como adicionar botões de compartilhamento no blogger - Bloggando Na Web

Creio eu que muitos dos blogueiros que utilizam os botões de compartilhamento do serviço AddThis, o fazem com o mesmo modelo que eu utilizo aqui no blog, como ilustra a Imagem 1, porém, após a integração do Botão +1 os botões ficarão como mostrado na Imagem 2.

Imagem 1

Imagem 2

Fazer esta integração é muito simples, basta seguir os passos abaixo:

1. Faça login no Blogger e acesse o painel de controle do seu blog clicando no ícone de casa, como mostra a imagem abaixo:

2. Clique no menu Modelo localizado na barra lateral do painel de controle, como ilustra a imagem abaixo:

3. Role a página até o final e faça uma cópia de segurança do seu template clicando no link “Fazer backup / Restaurar modelo”, e em seguida no botão “Fazer download do modelo completo”.

4. Clique no link “Editar modelo” para ver o código do seu template e em seguida marque a opção “Expandir modelos de widgets”.

5. Agora adicionaremos o script do Botão +1, se você já tiver o script instalado, não precisa instala-lo novamente, basta pular para o passo 7 deste tutorial! Pressione Ctrl+F para abrir a janela Localizar do navegador, e procure pelo código abaixo:

</head>

6. Imediatamente acima deste código, adicione este outro código:

<!-- Script do Botão +1 -->

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'>

{lang: 'pt-BR'}

</script>

<!-- Fim do script do Botão +1 -->

7. Agora adicionaremos o código do Botão +1 ao código do AddThis, pressione novamente Ctrl+F e procure pelo código abaixo:

<div class='addthis_toolbox addthis_default_style'>

Abaixo deste código, você verá os códigos referentes aos botões do Facebook e do Twitter, como no exemplo abaixo:

<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>

<a class='addthis_button_tweet' tw:via='bloggandonaweb'/>

Para mostrar o Botão +1 junto a eles você deve adicionar, abaixo do código do botão do Twitter, o seguinte código:

<a class='addthis_button_google_plusone' g:plusone:size='medium'/>

Seu código TOTAL deve ter ficado da seguinte maneira:

<div class='addthis_toolbox addthis_default_style'>

<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>

<a class='addthis_button_tweet' tw:via='bloggandonaweb'/>

<a class='addthis_button_google_plusone' g:plusone:size='medium'/>

<a class='addthis_counter addthis_pill_style'/>

</div>

8. Para finalizar, clique no botão “Visualizar” e, se estiver tudo certo, clique no botão “Salvar modelo”. Com isso o Botão +1 aparecerá ao lado dos botões do Facebook e do Twitter!

Para quem não sabe o que é nem como funciona o Botão +1 ou quer instala-lo em outro lugar do blog, confira os artigos abaixo:

Novidade: botão +1 (mais um) para blogs do Blogger - Bloggando Na Web
Instalando o botão +1 (mais um) em blogs do Blogger - Bloggando Na Web

Se você gostou deste artigo, achou ele útil ou ficou com dúvidas, participe deixando um comentário! E não esqueça de clicar nos botões abaixo do artigo para compartilha-lo!

Artigo atualizado: 07/07/2011

Como mudar o design do Gmail para o estilo do Google Plus

2011-07-06T21:49:00.000-03:00

Olá querido leitor, muito tem sido a divulgação por diversos blogs e sites sobre a mais nova rede social da gigante Google: o Google Plus. Pois bem, antes do lançamento de tal rede social, a Google já vinha remodelando seus produtos, a começar pelo buscador Google Search.

E como o provedor de e-mail Gmail também é um dos produtos da empresa, o mesmo com certeza sofrerá tais remodelações. O que acontece, é que isso parece que não é automático - pelo menos comigo não foi -, então é necessário ativara uma opção para que o Gmail fique com o novo design. E é isso o que eu vou mostrar como fazer no artigo de hoje!

1. Primeiramente você precisa ter uma conta no provedor Gmail. Se você utiliza qualquer produto da Google, como: Orkut, Blogger, Picasa Web, Youtube etc., acesse esse endereço: http://mail.google.com/, e faça login utilizando sua conta; se você não possui nenhum produto da Google, mas quer testar o provedor, acesse o endereço e se cadastre!

2. Após fazer login (ou se registrar), sua caixa de entrada deverá aparecer como ilustra a imagem abaixo:

(Clique na imagem para ampliar)

3. Para utilizar o novo design, clique no ícone de engrenagem localizado no canto superior direito da sua conta e escolha a opção “Configurações do Google Mail”, como mostra a imagem abaixo:

4. Ao visualizar a página de configuração da sua conta do Gmail, clique na opção “Temas”, e escolha um dos dois últimos temas, como mostra a imagem abaixo:

Informação: há dois temas iguais, porém a resolução dos temas é diferente! Eu utilizo uma resolução de tela de 1024x768 e o que ficou melhor, para mim, foi o Visualização Densa. Então, veja qual fica melhor para você!
Após clicar em um dos temas, sua conta do Gmail já aparecerá com o novo estilo do Google Plus, e deverá ter ficado como mostrado abaixo:

(Clique na imagem para ampliar)

Espero que tenham gostado da dica e que façam bom uso! Ficou com dúvidas ou teve dificuldades, sinta-se a vontade para participar postando um comentário! E não esqueça de clicar nos botões abaixo do artigo para divulga-lo!

Artigo atualizado: 06/07/2011

O Plágio e suas consequências! Uma praga sem controle!

2011-07-04T22:46:00.004-03:00

Olá querido leitor do Bloggando Na Web, seja bem-vindo a mais um artigo! No artigo de hoje eu não ensinarei nada, apenas irei falar sobre um assunto que já foi bastante debatido há um tempo atrás pelos blogueiros! O Plágio!

O que é um plágio?

Plágio: é o ato de copiar ou imitar, sem engenho, as obras ou os pensamentos dos outros e apresentá-los como originais.
É Assinar ou apresentar como seu, obra artística ou científica de outrem.
Fonte: http://www.blogosferalegal.com/p/faq.html.

Ou seja, o plágio é o ato de copiar ou imitar deliberadamente qualquer tipo de conteúdo (seja obra artística ou científica) protegido por direitos autorais, sem a permissão do autor/criador, e assinar como se fosse seu.

Durante todo o período de vida do blog Bloggando Na Web, encontrei poucos plágios do meu conteúdo! E os que eu encontrei eu denunciei através do formulário DMCA e o conteúdo foi excluído! Em certo momento pensamos que é totalmente inútil lutar contra os plagiadores, mas a ousadia deles é tão grande que arranjamos forças para continuar!

Recentemente um dos leitores aqui do blog, João Neto, dono do blog Categoria Blogger, entrou em contato comigo perguntando por que o Shadowbox não estava funcionando em seu blog, e ao entrar no blog dele para verificar o que podia estar errado, o que eu encontrei? Diversos artigos meus! Sim, eu digo meus!

O que eu fiz? Entrei em contato com o mesmo pedindo para que parasse de copiar meus artigos e que apagasse os artigos que havia copiado! Você pode ver o e-mail que enviei à ele na imagem abaixo:

(Clique na imagem para ampliar)

O que aconteceu depois que entrei em contato com o João Neto? Ele simplesmente resolveu entrar no blog e comentar o seguinte:

(Clique na imagem para ampliar)

Queridos leitores (muito de vocês blogueiros), depois de acompanhar os fatos ocorridos, eu pergunto a vocês: João Neto está correto ou eu é que estou equivocado? Mas, antes de responder, vale o ditado: “imagens valem mais do que palavras”! Acompanhem as seguintes imagens:

(Clique na imagem para ampliar)

Você reconheceu a imagem acima? Ela foi tirada do blog Categoria Blogger! E o que ela tem de tão importante? Hum... como explicar... ah sim, claro, clique nesse link e você entenderá!

Notou alguma semelhança? Pois é, eu também notei!

Recentemente eu escrevi um artigo falando sobre o novo lançamento do Google, o Google +1, porém, como o recurso ainda não estava disponível, eu resolvi criar uma pequena história para ilustrar o funcionamento de tal recurso, e com essa história eu precisei criar uma imagem de exemplo!

Confira o artigo que eu escrevi, clicando neste link, e veja a imagem que utilizei no final do artigo! Se você ler a história irá reparar que a imagem foi criada especialmente para ela! E o que isso tem a ver com o plágio do João Neto? Simples! Veja a imagem abaixo (também retirada do blog dele):

(Clique na imagem para ampliar)

Repararam em alguma semelhança com a imagem que eu criei para a história? Pois é, eu também reparei! Quer mais? Então eu vou falar um pouco mais!

O leitor Rafael, dono do blog Loucos Por Virtude, entrou uma vez em contato comigo para pedir que eu criasse um artigo ensinando a customizar o formulário de busca do Google, você pode conferir o artigo clicando aqui.

E o que o Rafael tem a ver com o plágio do João Neto? Nada! Mas se você reparar bem, no final do artigo que o Rafael me pediu, você notará que há uma pequena tabela mostrando o antes e o depois da customização! Já no blog do João Neto:

(Clique na imagem para ampliar)

Reparou alguma semelhança? Pois é, eu também! Cara, como blogueiro eu devo falar que esse foi o pior plágio que eu já vi! Onde é que já se viu um plagiador que tira Print Screen do artigo que está plagiando para usar como imagem de ilustração? #plagiofail E ele ainda quis colocar uma marca d'água sobre a imagem para dizer que era dele? Faça-me o favor né!

Agora vejamos o artigo que eu criei sobre a barra de tradução que eu utilizo no topo dos artigos aqui no Bloggando Na Web! Veja meu artigo clicando neste link.

Repare no código que eu criei no passo 7 do meu artigo e na organização das bandeiras no passo 8. Legal né? Agora veja a imagem abaixo:

(Clique na imagem para ampliar)

Reparou na semelhança? Pois é, eu também (de novo)! E o código do passo 5 que é o responsável pelas bandeiras? Pois é, neste caso ele tentou disfarça-lo colocando o mesmo em um arquivo do Google Docs!

E para finalizar, quero mostrar o artigo que postei recentemente ensinando como instalar o botão do Google +1 em um blog do Blogger. Se você reparar na tabela que há no meu artigo, tabela essa que o João Neto, em seu comentário, diz que não gosta por ser feia, veja o blog dele:

(Clique na imagem para ampliar)

Parece que ele não acha a tabela tão feia assim! Não é?

Enfim caros leitores, gostaria de deixar aqui para vocês o mesmo conselho que dei ao João Neto por e-mail: “não comece na blogosfera com o pé errado”, o plágio não vai te levar a nada! Apenas te dará fama de plagiador! O que facilitará que você afunde ao invés de subir!

Para quem quiser visitar o blog do João Neto, segue o link: Categoria Blogger, pode clicar sem medo, pois o link é “rel='nofollow'”. Confira também os artigos que o João Neto escreveu sobre plágio (grande ironia, não acham?):

Sobre o Plágio - Categoria Blogger
Como denunciar o Plágio em seu blog - Categoria Blogger
Como proteger seus artigos de cópias (Plágio) - Categoria Blogger

E um pequeno aviso queridos amigos blogueiros, há artigos de outros blogs também no blog Categoria Blogger, tomem cuidado! ;)

Artigo atualizado: 04/07/2011

Como mostrar o feed de seus blogs favoritos direto no Gmail

2011-07-03T20:13:00.001-03:00

Olá querido leitor do Bloggando Na Web. No artigo de hoje eu mostrarei como receber o feed dos sites que você mais gosta direto em sua conta do Gmail, sem a necessidade de assinar qualquer tipo de newsletter!

O Gmail por padrão já mostra o feed de notícias de alguns sites em sua conta, porém, muitos usuários desconhecem a existência de um recurso do Gmail que possibilita a remoção dos feeds cadastrados pelo próprio Gmail e a possibilidade de o usuário cadastrar seus próprios feeds!

Creio eu que esse recurso do Gmail não seja muito conhecido pelos usuários, pelo fato de muitos confundirem os feeds que são mostrados com anúncios do Adsense, pois os feeds aparecem no mesmo local onde alguns anúncios são mostrados, mas chega de falar e vamos ao que interessa!

1. Faça login em sua conta do Gmail através do endereço: https://mail.google.com/.

2. Ao acessar sua conta você verá que acima dos botões de ação há alguns links, é neste local que os feeds, e alguns anúncios, aparecerão para você. Veja um exemplo na imagem abaixo:

3. Clique no ícone de engrenagem localizado no canto superior direito da sua conta e escolha a opção “Configurações do Google Mail”, como mostra a imagem abaixo:

4. Ao visualizar a página de configuração da sua conta do Gmail, clique na opção “Clipes da web” (Imagem 1) e em seguida uma nova página aparecerá, mostrando os feeds cadastrados em sua conta (Imagem 2).

(Imagem 1)

(Clique na imagem para ampliar - Imagem 2)

5. Para remover o feed dos sites que foram cadastrados e/ou que você não quer, basta clicar no link “remover” que está à frente do nome de cada site. Para cadastrar o feed dos sites que você gosta, primeiramente você precisará ter o link do feed do site, então entre no site que você deseja adicionar, copiei o link do feed do mesmo e cole no campo URL da página, como mostra a imagem abaixo:

Caso queira fazer um teste, utilize o link do nosso feed: http://feeds.feedburner.com/bloggandonaweb. Em seguida clique no botão Pesquisar.

6. A página se atualizará e mostrará o nome do site ao qual o feed pertence, se for o site que você estava procurando, clique no Botão Adicionar, como mostra a imagem abaixo:

7. Pronto, o feed do seu site já estará cadastrado, basta clicar na opção “Meus clipes” localizada acima do campo de URL e conferir se o nome do blog que você adicionou está aparecendo, como mostrado abaixo!

(Clique na imagem para ampliar)

A partir de agora será mostrado o link dos artigos que forem publicados no blog que você cadastrou, como você pode ver na imagem abaixo:

(Clique na imagem para ampliar)

Informação: se você não quer que apareça o feed e nem os anúncios na sua conta do Gmail, basta desmarcar a opção “Mostrar meus clipes da web acima da Caixa de entrada”, que está localizada acima do nome dos blogs cadastrados em sua conta.
Então é isso, espero que você tenha gostado da dica e que faça bom uso deste recurso! Se você conhece outras formas de cadastrar um feed e/ou outros serviços de e-mail que forneçam o mesmo tipo de recurso, participe postando um comentário! E não esqueça de divulgar este artigo clicando nos botões abaixo!

Artigo atualizado: 03/07/2011

Como remover o DISQUS de um blog do Blogger

2011-07-01T20:24:00.000-03:00

Olá querido leitor do Bloggando Na Web, eu já ensinei há algum tempo atrás como instalar o serviço de comentários DISQUS em um blog do Blogger para melhorar a experiência dos leitores de um blog. Você pode conferir o artigo clicando no link abaixo:

Como instalar o DISQUS em um blog do Blogger - Bloggando Na Web

Porém, no artigo de hoje eu ensinarei como excluir um blog do serviço DISQUS, pois muitas pessoas instalam o serviço apenas para testá-lo e depois não sabem como excluí-lo. E é isso, como já foi dito, o que eu ensinarei hoje!

Então vamos ao que interessa! Excluir o serviço do DISQUS é bem mais fácil do que instala-lo! Siga os passos abaixo.

1. Acesse o endereço: http://disqus.com/, e clique no link “Login” no canto superior direito do site.

2. Após fazer login, clique no seu nome que está no canto superior direito do site, e escolha a opção “Edit Profile”.

3. Uma janela se abrirá mostrando diversas guias, clique na guia “Account” e em seguida no botão Delete Account.

(Clique na imagem para ampliar)

4. A janela se atualizará e perguntará qual é o motivo de você estar deletando a sua conta do DISQUS, escolha a opção que mais lhe agradar, eu prefiro escolher “Other” (Outro). Se tiver certeza de que deseja excluir sua conta clique no botão: Yes, delete my account.

(Clique na imagem para ampliar)

5. Ao clicar no botão, a janela novamente se atualizará e mostrará uma mensagem informando que você deve esperar 48 horas até que a exclusão seja completada. Neste período você ainda poderá acessar sua conta, mas eu não aconselho que você o faça!

6. Para finalizar, faça login no Blogger e vá em: Design > Elementos da página, e exclua o gadget do DISQUS, que foi instalado quando você se registrou no serviço. Ao excluir tal gadget todos os comentários do blog voltarão ao padrão do Blogger.

Se você gostou deste artigo, achou ele útil ou ficou com dúvidas, sinta-se a vontade para participar com um comentário! E não esqueça de divulgar o artigo clicando nos botões abaixo!

Artigo atualizado: 01/07/2011

Novo recurso para adicionar favicon em um blog do Blogger

2011-06-09T04:15:00.004-03:00

Clique para ampliar | Imagem ilustrativa de um favicon | Imagem por: Blogger in Draft

Olá querido leitor do Bloggando Na Web. Hoje eu fui avisado pelo leitor Igor Oliveira, dono do blog Aprenda Contabilidade Pública, sobre um novo recurso do Blogger. Tal recurso permite que os usuários que acessarem seus blogs através do Blogger in Draft, adicionem um favicon personalizado em seus blogs sem a necessidade de mexer nos códigos do template!

Vejamos como funciona este recurso. Siga os passos abaixo.

1. Faça login no Blogger através do Blogger in Draft e vá em: Design > Elementos da página.

2. Nesta seção, você encontrará um novo recurso chamado: “Favicon” - logo acima da seção da navbar -, como mostra a imagem abaixo.

(Clique na imagem para ampliar)

3. Clique no link Editar, e uma janela como a mostrada abaixo se abrirá.

(Clique na imagem para ampliar)

4. Clique no botão Selecionar arquivo, e abra a imagem que você quer utilizar como favicon (geralmente o logo do seu blog), em seguida clique o botão Salvar.

Informação: até o momento, somente imagens no formato .ico são aceitas, se você tentar carregar uma imagem em outro formato (.png, .jpg, .bmp e etc.) aparecerá uma mensagem informando: “Não é um tipo de arquivo válido”; caso você já tenha seu favicon, mas ele não esteja no formato .ico, você pode utilizar as ferramentas deste site para convertê-lo.
Pronto, agora vá no seu blog e veja se o seu favicon está aparecendo corretamente!

Alguns usuários relataram em outros blogs, que após efetuar o carregamento do favicon, o mesmo não aparecia no blog. Isso ocorreu comigo também, mesmo carregando a imagem no formato certo, a mesma não apareceu aqui no blog. Se isso aconteceu com você também, uma alternativa para adicionar seu favicon, é fazê-lo manualmente, basta acessar o artigo abaixo:

Como colocar um favicon personalizado no seu blog - Bloggando Na Web

Vale lembrar que esse recurso está disponível apenas para quem acessa o blog através do Blogger in Draft, que é um painel onde os usuários podem testar os novos recursos antes de serem lançados no painel do Blogger, portanto, este recurso ainda está em fase de testes!

Gostou do artigo, achou ele útil ou ficou com dúvidas? Então participe deixando um comentário! E não se esqueça de divulgar o artigo clicando nos botões abaixo!

Artigo atualizado: 09/06/2011