Visual Dicas

13/10/2011

Efeito Lightbox no Blogger (agora com opção para desativar)

byALF |

quinta-feira, outubro 13, 2011

Efeito Lightbox no blogger – agora é definitivo

Depois da polêmica adição do efeito Lightbox automático no Blogger (efeito visual para evidenciar imagens publicadas nas postagens), que gerou muita reclamação por vários usuários que não gostaram da novidade, o pessoal do Blogger resolveu reativá-lo novamente, porém com a opções para “ativar / desativar” o novo recurso.

Efeito Lightbox (veja exemplos em blog de teste – clique nas imagens)

O efeito é bastante atraente e facilita muito a navegação entre imagens publicadas na mesma postagem. Funciona perfeitamente em “templates” nativos do Blogger e em vários templates terceirizados também…

Mas, se você não gosta deste efeito ou se não funciona corretamente no seu blog (~~o que aconteceu no meu caso~~), agora é possível desativá-lo.

Como desativar o efeito Lightbox

Acesse o site: http://www.blogger.com

Faça o login usando a sua conta do Google e:

1) Na nova interface Blogger atualizada

Acesse o blog que deseja alterar e selecione [Configurações]

No menu lateral, selecione [Postagens e comentários].

Agora em Open images in Lightbox, selecione [Não] para desativar o efeito. Se desejar ativar novamente, clique em [Sim].

Depois de fazer a alteração, não esqueça de salvar. Clique no botão [Salvar configurações].

2) Na interface Blogger antiga

Se você ainda não alterou para a nova interface (Novo painel do Blogger, agora liberado oficialmente), pode desativar o seguindo o seguinte procedimento a seguir:

Escolha o blog a ser alterado e clique no link [Configurações].

Em Configurações, clique na guia [Formatação]. Em Open images in Lightbox, selecione [Não] para desativar o efeito. Para ativar novamente, volte e selecione [Sim].

Depois de feitas todas alterações, não esqueça de salvar. Clique no botão [Salvar configurações] que fica no final da página

Se você estiver tendo problemas com o novo efeito Lightbox no seu Blogger, nos informe aqui nos comentários…

Continue lendo

12/10/2011

Como inserir caixa de pesquisa personalizada no blog (Google Pesquisa Personalizada)

byALF |

quarta-feira, outubro 12, 2011

Caixa de busca Google

Como todo blogueiro deve saber, uma caixa de pesquisa é fundamental para os seus leitores. É nela que eles irão encontrar tudo aquilo que quiserem ler ou assistir, aumentando o número de visitas no seu site. Portanto, a sua caixa de busca deve estar em local muito bem visível (~~como dizem, na cara do cidadão~~), de preferência no cabeçalho, acima dos posts ou no topo do sidebar.

Geralmente, templates terceirizados já possuem campos de pesquisa nestas áreas, só que quase sempre, estes mecanismos são falhos (não comtemplam todas informações do seu blog), e/ou direcionam os resultados para páginas do próprio blog, o que deixa seus leitores confusos…

Neste artigo vamos dar algumas dicas de como inserir caixa de busca personalizado do Google, que é sem dúvidas o melhor mecanismo de busca existente, criando uma página de resultados perfeita, com todos links possíveis do seu blog, além é claro, de possibilitar ganhos em anúncio (se você tiver uma conta no Google Adsense).

Se você tem conta no Google AdSense (sistema de afiliados com anúncios), vá direto para o item 2) Para quem tem conta no Google AdSense.

1) Google Pesquisa Personalizada

Acesse o site: http://www.google.com.br/cse/

Faça o login com a senha da sua conta no Google e clique no botão [Criar mecanismo de pesquisa personalizado].

1- Configure seu mecanismo de pesquisa

Descreva seu mecanismo de pesquisa: preencha [Nome do blog], [Descrição] e o [Idioma] da pesquisa.

Abaixo, em Defina seu mecanismo de pesquisa, coloque o(s) site(s) que deseja pesquisar. ATENÇÃO: COLOQUE APENAS UM URL POR LINHA.

No nosso exemplo, vamos usar o URL http://visualdicas.blogspot.com/*

Para definir o formato de pesquisas, leia abaixo:

Páginas individuais: Especificando www.meusite.com/minhapagina.html, somente a página minhapagina.html será incluída em www.meusite.com.
Sites completos: Especificando www.meusite.com/*, todas as páginas em www.meusite.com serão incluídas.
Partes de sites: Você poderá usar padrões curinga para incluir somente algumas partes de um site. Por exemplo, www.meusite.com/*sobre* incluirá apenas arquivos em www.meusite.com que tenham sobre no nome.
Domínios completos: É possível especificar um domínio inteiro, usando *.meudominio.com. Se você especificar meudominio.com, ele será convertido automaticamente para *.meudominio.com/*. Se não for o que deseja, você poderá mudá-lo no painel de controle.

Para terminar esta primeira etapa, Selecione uma edição: Para criar uma caixa standard, sem custos, selecione [Edição padrão]. Se desejar algo mais elaborado e sem anúncio nas páginas de resultados, clique em [Site Search], onde terá que desembolsar um valor mínimo de US$ 100,00 por ano (veja todos planos na página http://www.google.com/sitesearch/)

No nosso exemplo vamos optar pela Edição padrão (gratuita). Marque a caixa [Li e concordo como o Termo de Serviço]. Depois clique em [Avançar].

2- Defina o estilo e experimente.

Escolha um estilo e clique em [Personalizar] para redefinir fontes e cores…

Se desejar, altere cores, fonte e alinhamento de todos os campos do seu mecanismo de pesquisa. Depois de alterados, faça os testes, digitando um termo qualquer para a pesquisa…

Depois de tudo definido, clique em [Avançar].

3- Obtenha o código.

Agora é só você copiar o código e colar no seu blog. (Para quem não sabe como usar o código copiado, leia: Como inserir Widgets no Wordpress sem a instalação de plugins e Como instalar um Widget no seu Blog -(Blogger))

Veja o nosso exemplo no blog de Teste: http://visualdicas2000.blogspot.com/

Gerenciando suas caixas de pesquisa

Acesse o site: http://www.google.com.br/cse/ (faça o login com a sua conta do Google, caso não esteja conectado).

Clique no link [gerencie os seus mecanismos de pesquisa existentes]

Escolha qual mecanismo você irá gerenciar e clique no link [painel de controle]. Se desejar eliminar um mecanismo, clique em [excluir].

No painel de controle você poderá alterar todos parâmetros já definidos, além de acrescentar vários outros, como Google Analytics, Preenchimentos Automáticos e o Adsense…

ATENÇÃO: Depois de alterar a configuração do seu mecanismo de pesquisa, é altamente recomendável que você substitua o código HTML do seu site. Para o novo código, clique em [Obter código] no menu lateral. No entanto, quando as alterações forem apenas nas páginas dos resultados, isto não será necessário (mas é sempre bom testar)…

Para acrescentar anúncios da sua conta do Google AdSense, clique no link [Ganhar dinheiro] e preencha os campos com informações da sua conta.

Para aqueles que já possuem conta Google AdSense, poderão criar mecanismos de pesquisa Google diretamente do site Google AdSense, como mostramos abaixo:

2) Para quem tem conta no AdSense

Se você tem conta no Google Adsense (se você não sabe o que é isto, leia O que é o AdSense?), poderá acrescentar anúncios Google nas páginas de resultados…

Para incluir sua conta do AdSense na caixa de busca personalizada é bem simples:

a) Acesse sua conta do AdSense: Google AdSense

b) Clique na aba [Meus anúncios], e em Mecanismos de pesquisa personalizados, clique no botão [Novo mecanismo de pesquisa personalizado].

c) Preencha todos campos para a criação da sua caixa de pesquisas… (a política do Google AdSense não permite apresentação de imagens em blogs ou sites desta área com exemplos).

Obs.: Nesta página, você poderá acrescentar o logotipo do seu blog inserindo o URL da imagem e URL de destino (redirecionamento quando alguém clicar sobre o seu logotipo)…

d) Depois de tudo preenchido clique no botão [Salvar e obter o código]. Depois é só copiar e colar no seu site…

Fazendo desta forma, você poderá acrescentar anúncios e o seu logotipo nas páginas de resultado. Veja o exemplo no nosso blog…

Para gerenciar a sua caixa de pesquisa, proceda da mesma forma que o método anterior: acesse o site http://www.google.com.br/cse/ e clique no link [gerencie os seus mecanismos de pesquisa existentes].

Para quem quiser aprender mais…

Para quem quiser aprender mais sobre os mecanismos de pesquisa do Google, acesse o link a seguir: API da Pesquisa personalizada do Google

Continue lendo

05/10/2011

Como hospedar imagens e gif animados gratuitamente

byALF |

quarta-feira, outubro 05, 2011

atualizado em 21/07/2014

Tinypic uploader!

Como vocês devem ter percebido, o site ImageShack não permite mais fazer o upload de gif’s animados na versão gratuita.

Para contornar isto, encontrei o site Tinypic que é gratuito, muito confiável e existe desde 2009, sem nunca deixar ninguém na mão (~~até onde eu sei~~). Muito fácil de usar, simples e rápido, o uploader Tinypic é ótimo para armazenar imagens, gifs animados e vídeos que possuem as seguintes características:

imagens até 1600px X 1600px
imagens jpg, gif, png ou bmp
gif animados
vídeos até 100 Mb ou até 5 minutos
vídeos tipo 3g2, 3gp, 3gp2, 3gpp, 3p, asf, avi, divx, dv, dvx, flv, moov, mov, mp4, mpeg4, mpg4, mpe, mpeg, mpg, qt, wmv, xvid, rm

Atenção: É sempre recomendável que se faça um backup de todas as imagens enviadas. Não se esqueça, que um uploader por mais confiável que seja, um dia não vai existir mais, e assim será com os links de todas as suas imagens hospedadas. (O ideal mesmo, é você alugar um servidor de hospedagem e guardar todas as suas imagens lá).

Usando o Tinypic

Acesse o site: http://tinypic.com

Em Fyle Type, defina se você vai enviar uma imagem ou gif animado do seu computador, selecionando [Image], ou se você vai enviar um vídeo em [Video] ou se vai enviar uma imagem através de um link da internet, em [Url].

Clique em [Selecionar arquivo] para inserir o arquivo da imagem desejada. Depois de inserido o arquivo, defina o Resize (redimensionamento). Dica: Mantenha Default para imagens, e Standart Definition para vídeos.

Se desejar receber o compartilhamento via E-Mail, selecione [Send it Via E-mail] e descreva o email para o envio.

Para facilitar a procura da imagem no futuro, você poderá também digitar palavras chaves em tags – no nosso exemplo colocamos a palavra chave “pie”.

Veja no exemplo abaixo onde enviamos o arquivo do gif animado pie.gif do nosso computador:

Depois de tudo preenchido, clique em [Upload Now].

Entre com o código de segurança:

1) Clique em Play e aguarde o código de segurança

2) Digite o código que aparece depois de Please Enter:. Depois, clique em [Upload Now].

Pronto, agora você vai obter os códigos HTML pronto para Websites, IMG code para fóruns, URL para E-Mail e o principal, o link direto…

Ao lado direito, temos uma amostra da imagem enviada e o menu onde você tem alguns recursos de visualização e edição de imagens.

Abaixo, em [Your last 3 uploads] temos os 3 últimos uploads enviados pelo seu computador (IP).

Abaixo, segue os códigos do nosso exemplo:

HTML para Websites

<a href="http://tinypic.com?ref=2zz5dzc" target="_blank"><img src="http://i61.tinypic.com/2zz5dzc.gif" border="0" alt="Image and video hosting by TinyPic"></a>

IMG code

[IMG]http://i61.tinypic.com/2zz5dzc.gif[/IMG]

URL para E-Mail

http://tinypic.com/r/2zz5dzc/8

link direto

http://i61.tinypic.com/2zz5dzc.gif

Recursos do menu (abaixo da imagem)

1) Visualização da imagem no tamanho real [View Full Size Image].

Aqui além da visualização, você também poderá obter todos códigos para o compartilhamento, ou os links diretos para várias redes sociais, e para o seu blog.