Postagens

Mostrando postagens de 2008

Corrigindo a exibição do Favicon no Blogspot

Imagem
Favicons, palavra em inglês derivada de favorite e icon (Wikipédia).
Olá amiguinhos, depois de muito pastar tentando solucionar o problema da exibição do Favicon para os blogs hospedados no Blogspot, eis que a solução surge, por intermédio do Amílcar do Grupo Blogspot Brasil, no Blogger Tips and Tricks.

Se você já usa o código anterior para exibir o Favicon no seu site, basta mudar sua posição dentro do template, para logo depois da linha abaixo:
]]></b:skin>Se você ainda não utiliza, hospede duas imagens com tamanho de 16x16 pixels, uma no formato PNG e outra convertida para o formato ICO, no local de sua preferência e anote as URLs dos arquivos hospedados.

Localize a linha ]]></b:skin> dentro do código html do seu template e logo após cole o seguinte trecho, adaptando o endereço dos arquivos que você acabou de hospedar:
]]></b:skin>
<link href='URL_DA_IMAGEM_FORMATO_ICO.ico' rel='shortcut icon'/>
<link href='URL_DA_IMAGEM_FORMATO_P…

Imagem aleatória no cabeçalho do Blogspot

Imagem
Como exibir uma imagem diferente a cada carregamento da página.
Quando publiquei o tutorial Como exibir uma descrição aleatória abaixo do título no Blogspot, prometi mostrar também como fazer o mesmo com imagens. Ou seja, como exibir uma imagem diferente no topo (ou cabeçalho) do Blogspot, a cada carregamento da página.

Para felicidade geral da nação, digo ao povo que exibir uma imagem aleatória no cabeçalho do Blogger é tão fácil quanto exibir uma descrição aleatória.

Antes de começar, a primeira coisa que você precisa fazer é checar no painel de controle do Blogger, dentro das opções de Elementos da página, se o seu template permite a inclusão de novos elementos no cabeçalho. Feito isso, vamos ao que interessa:


Como exibir uma imagem aleatória
no cabeçalho do Blogger

Prepare as imagens que pretende usar, elas devem ter exatamente o mesmo tamanho entre sí e a mesma largura total do seu template. Hospede-as e anote a URL de cada uma delas.

Nas opções de Elementos da página remova o cabeçalho…

Imagens grandes no editor do Blogger

Imagem
Como publicar imagens em tamanho original no Blogger
Se você usa o editor do Blogger para redigir e publicar suas postagens, já deve ter reparado que há uma limitação no tamanho das imagens dentro dos posts, de apenas 400 pixels de largura para imagens em formato paisagem (horizontal), ou 400 pixels de altura no formato retrato (vertical).

Creio que esta limitação tem como base o layout padrão dos templates oferecidos pela plataforma, onde a coluna dos posts não tem mais que 470 pixels de largura, portanto imagens de até 400 pixels "encaixariam" perfeitamente.

Mas como muita gente utiliza templates personalizados, com a coluna dos posts mais larga que 470 pixels, esta limitação acaba atrapalhando bastante quando é necessário postar imagens maiores do que este padrão de publicação permite.

Para contornar esta limitação e exibir as imagens publicadas através do editor do Blogger no seu tamanho original é necessário editar o código HTML dos artigos, alterando os parametros incl…

Permissões para comentaristas no Blogspot

Imagem
No Blogspot, as opções de autenticação para os comentaristas são definidas nas configurações de comentários no painel de controle. Dependendo da opção escolhida estarão disponíveis diferentes opções para os comentaristas se autenticarem antes de comentar:


Qualquer um - inclui usuários anônimos - Libera todas as opções de autenticação disponíveis, inclusive comentários anônimos e a opção Nome/URL. Use apenas se você habilitou a moderação de comentários.

Usuários registrados - inclui OpenID - Esta opção desabilita os comentários anônimos e a opção Nome/URL, permitindo apenas comentaristas autenticados, através do OpenID, o que inclui usuários do LiveJournal, WordPress, TypePad e AIM ou através de uma conta do Google,  o que inclui usuários do Blogger.

Usuários com Contas do Google - Permite apenas comentaristas autenticados com uma Conta do Google, não necessariamente usuários do Blogspot, basta ser usuário do Gmail, por exemplo.

Somente membros deste blog - A melhor forma de não ter comen…

Descrição aleatória abaixo do título no Blogspot

Imagem
Segredos para um casamento feliz: Senso de humor e memória curta.
Muita gente tem me perguntado como exibir uma descrição aleatória abaixo do título no cabeçalho dos blogs hospedados no Blogspot, cada vez que uma nova página é carregada.

Por incrível que pareça, este recurso é muito fácil de implementar e talvez você nem precise mexer no código html do seu template, para configurar os biscoitos da sorte no seu blog.

Antes de começar, você precisa verificar se é possível incluir novos elementos no cabeçalho, através do painel de controle do Blogger nos Elementos de página, conforme a imagem abaixo:


Verifique se existe a opção Adicionar um Gadget no seu cabeçalho
Se ainda não houver a opção Adicionar um Gadget no cabeçalho do seu template, aplique o tutorial compulsivo Como adicionar imagens no topo do Blogger, antes de prosseguir.


Descrição aleatória abaixo do título no Blogspot

1. A primeira coisa a fazer é remover qualquer descrição que você esteja usando. Isso pode ser feito, nas op…

Personalize seu template sem editar códigos

Imagem
Já vi muita gente reclamando que é muito difícil personalizar os templates do Blogspot, pois é necessário conhecer códigos HTML, CSS e JavaScript. Mas isso não é 100% verdadeiro.

Existe um recurso gráfico para personalizar seu template no Blogspot, que permite realizar diversas alterações na aparência do seu blog, sem necessidade de editar nenhuma linha no código. Esta opção está disponível através do painel de controle do Blogger, em Layout /  Fontes e Cores:


Clique para ampliar (em nova janela)
Apesar do acesso ao código fonte completo permitir uma personalização muito mais completa e profunda do layout, a edição gráfica é mais confortável para a maioria dos usuários, pois é rápida e não requer nenhum conhecimento técnico.

O único problema é que para utilizar este recurso, o template do seu blog precisa seguir a padronização de variáveis, utilizada nos templates originais do Blogger...

Como criar links para janelas PopUp

Imagem
Se você precisa criar um link para abrir uma janela PopUp, vai encontrar diversos tutoriais por ai. Algumas técnicas usam JavaScript e alterações no código fonte do template, quando não há necessidade disso tudo.

É bem simples, antes de mais nada você precisa criar e hospedar a página que pretende abrir dentro da janela PopUp. Anote a URL desta página e substitua nos dois campos destacados em vermelho no código abaixo:
<a href="URL_PAGINA_DA_POPUP" target="popupwindow" onclick='window.open("URL_DA_PAGINA_POPUP", "popupwindow", "scrollbars=yes,width=550,height=520");return true'>Link</a>Nos campos em azul são definidos a largura e a altura da janela PopUp respectivamente e em verde é o texto que vai aparecer na página. Veja como fica o resultado:
Formulário de Contato Compulsivo em PopUp Imagem: Gamleys Toys

Ganhe mais dinheiro com anúncios relevantes

Imagem
Ajude o AdSense exibir o melhor anúncio para o seu leitor
Quer ganhar mais dinheiro com os anúncios no seu blog? Usando o direcionamento por seção do AdSense, você pode aumentar a relevância dos anúncios exibidos na sua página em relação ao seu conteúdo. O que aumenta potencialmente a possibilidade de cliques convertidos.

Mas o que é direcionamento por seção? Segundo a Ajuda do AdSense:
O direcionamento por seção permite a você sugerir frações de texto e conteúdo HTML que você gostaria que fossem enfatizadas ou ignoradas quando fazemos a correspondência entre anúncios e o conteúdo do seu site.Ou seja, com o direcionamento por seção, você pode dizer ao robozinho do AdSense para ignorar o conteúdo fixo do seu blog, como a coluna lateral, por exemplo e enfatizar o conteúdo dos posts, quando for contextualizar os anúncios.

Mas como eu configuro isso no meu site?
Para implementar o direcionamento por seção, você precisa adicionar ao seu código uma série de tags especiais de comentário HTML. …

Como personalizar o navegador do Blogger

Imagem
Navegar é preciso, não importa o tamanho da nave...
Sabe aqueles links que aparecem no rodapé da coluna dos posts nos blogs hospedados no Blogspot, que permitem avançar e retornar as páginas de postagem? Esse elemento de página chama-se navegador ou 'blog-pager'.

Por padrão são exibidos apenas os links: "Postagens mais antigas", "Início" e "Postagens mais recentes", centralizados e sem muito charme, assim:

Postagens mais antigas      Início      Postagens mais recentes
Já mostrei como personalizar o navegador do Blogger usando ícones intuitivos e mais recentemente também informei sobre o novo recurso de navegação em páginas numeradas, tão aguardado pelos usuários do serviço oferecido gratuitamente pela (empresa) Google.

Eu particularmente acredito que o recurso de navegação numerada não é o ideal para um site no formato blog. Pois o navegador não é exibido quando o usuário acessa uma página individual, apenas na home page.

Pensando nisso resolvi pe…

Títulos expansíveis nos arquivos e categorias

Imagem
Outro dia me perguntaram como exibir apenas os títulos dos posts nas páginas de arquivo ou categorias (marcadores) no Blogspot. Mas ao invés de explicar só isso, preferi apresentar a vocês como configurar títulos expansíveis nessas páginas.

Funciona assim: Quando o usuário clica em algum marcador ou seleciona um mês no arquivo do blog, é conduzido a uma lista que exibe apenas a data e o título clicável dos artigos precedidos pelos símbolos [+/-].

Que funcionam como o sinal de adição no navegador de arquivos do Windows (Explorer). Ao ser clicado o conteúdo do artigo é exibido, se acionado novamente o artigo é escondido.

Para configurar no seu blog, primeiramente entre no modo de edição HTML e faça um backup do seu template, ou faça antes no seu blog de testes. Em seguida marque a opção Expandir modelos de widgets e cole o código a seguir imediatamente acima da tag </head>:
&lt;script type='text/javascript'&gt;
function toggleIt(id) {
post = document.getElementById(id);
i…

Como personalizar o rodapé dos posts*

Imagem
Roda, Pé... ;-)
Depois do lançamento do template compulsivo 2.0, passei a receber vários pedidos de tutoriais. Alguns já foram atendidos, como a Galeria de destaques, o Menu em abas e o Rodapé em colunas. Porém uma das solicitações mais recorrentes não havia sido atendida... Ainda.

Hoje vou mostrar como personalizar o rodapé dos posts no Blogspot. Incluindo um convite bacana para assinatura dos Feeds, artigos relacionados e opções para enviar por email, imprimir e incluir nos sites sociais, etc.

Depois de aplicar este tutorial, o rodapé dos seus artigos, nas páginas individuais do Blogspot, vai ficar assim:


O que precisa ser feito:
Incluir definições de formatação do rodapé no CSS;Incluir o leiaute para impressão;Substituir o link para encaminhar por email;Substituir o rodapé original pelo código compulsivo.Os avisos de praxe:
Tente antes num blogue de testes;Faça um backup do seu template antes de começar;Leia o tutorial até o fim e tenha certeza de ter entendido.Antes de mais nada você…

Menu em abas no Blogspot + Template

Imagem
Abas: Um conforto a mais para o seu leitor.
Este tutorial é um dos mais pedidos depois do lançamento do novo template compulsivo. Como já disse em comentários e no Grupo de Discussão Blogspot Brasil, me baseei no tutorial que está no Templates para Você, que usa o JavaScript criado por BarelyFitz Designs para exibir um menu em abas no Blogspot.

Este não é um tutorial de difícil implementação, mas antes de começar vamos aos avisos paroquiais:
Tente antes num blogue de testes;Faça um backup do seu template antes de começar;Leia o tutorial até o fim e tenha certeza de ter entendido, copiar e colar sem pensar não dá certo!Baixe este arquivo, hospede no local de sua preferência e anote a URL. Em seguida cole o código abaixo antes da tag </head> do seu template, alterando a localização do arquivo hospedado anteriormente:
<!-- JavaScript Menu em Abas -->
<script src='http://URL_DO_ARQUIVO/tabber.js' type='text/javascript'/>Depois, adicione o seguinte trecho de…

Colunas no Rodapé do Blogger + Template

Imagem
O tutorial mais pedido pelos leitores compulsivos vai finalmente ser atendido. Hoje vou mostrar como colocar duas colunas no rodapé do seu blogue no Blogspot.

Antes de começar, os avisos paroquiais: Essas configurações são um pouco complicadas e demandam certo conhecimento em códigos HTML e CSS. Por precaução tente antes num blogue de testes e faça o backup do seu template antes de começar.

Cansei de ouvir gente choramingando com o template quebrado dizendo que foi culpa minha, mas não usou um blogue de testes e nem fez backup. Já vou avisando que casos assim nem publico mais o comentário! Se vire!

Foi usado o template Minima, padrão do Blogger como exemplo, se você usa um template diferente ou personalizado as configurações podem variar bastante.

Dito isso, vamos começar com o rodapé (footer) em duas colunas, ideal para templates estreitos, com apenas uma coluna na barra laretal.

O que vamos fazer é localizar todos os trechos de código originais relativos ao rodapé, tanto no CSS como no H…

Alterar o link do autor nos comentários

Imagem
Modifique o link original no comentário do autor.
Você já viu aqui como destacar os comentários do autor no Blogger. Mas ficaram faltando alguns pequenos detalhes para essa dica ficar completa: Como incluir um ícone personalizado e alterar o destino do link sob o nome do autor do artigo nos comentários.

Mas porque eu deveria fazer essa alteração, você me pergunta. Simples pequeno leitor, a dica para destacar os comentários só funciona quando o autor comenta usando a mesma Identidade Google usada no login do Blogger e nesse caso, por padrão é criado um link para a página do perfil do autor.

E qual o problema? Mais uma vez você pergunta e o Compulsivo responde. Você pode optar por não permitir visualizações ao seu perfil e nesse caso é interessante remover todos os links que apontem para essa página no seu template. Além disso a página padrão do perfil do Blogger é muito feia!

Dito isso, vamos as explicações técnicas. Entre no modo de edição HTML do seu template no painel de controle do…

Meta tags no Blogspot sem conteúdo duplicado

Imagem
Meta tags são linhas de código que ajudam a descrever o conteúdo de um site ou blogue para os motores de busca, onde constam informações como a descrição da página, palavras chaves e seus autores.

As meta tags foram muito importantes na fase da internet a lenha. Época em que era necessário cadastrar as URLs dos websites nos diversos motores de busca da rede e estes usavam as informações das meta tags para organizar e categorizar o conteúdo.

Porém alguns webmasters começaram a abusar no uso das meta tags, incluindo informações que não existiam nas suas páginas e diminuindo a relevância dos resultados obtidos nas pesquisas. O que precipitou o desenvolvimento de uma nova geração de buscadores e o aparecimento do todo-poderoso e onipresente Google e o seu PageRank.

Apesar de não terem mais a mesma importância de outrora (desenterrei essa palavra!) para os motores de busca, as meta tags continuam sendo bastante utilizadas em vários websites e blogs populares.

Normalmente são apenas algumas lin…

Otimizar o título das páginas no Blogger

Imagem
Por Thiago do Blog dos Joguinhos.

Um dos problemas dos layouts do Blogger é o fato do nome do blog aparecer antes do título dos posts, lá no topo da janela do browser. O que é péssimo para indexação das páginas e muitas vezes contribui negativamente nos resultados obtidos no Google.

Entretanto, esse problema pode ser facilmente resolvido utilizando uma nova tag liberada pela equipe do Blogger. Assim, somente a página inicial receberá o nome do blog e as outras o título do artigo. Bem melhor, não?

Não entendeu? Bem, com essa alteração o título de um post mudará, por exemplo, de "UsuárioCompulsivo - Otimizando o título das páginas" para "Otimizando o título das páginas".

Para fazer a alteração é simples, abra a edição HTML do teamplate e localize o código abaixo:
<title><data:blog.pageTitle/></title>Substitua o por:
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>

Personalizar ícone para recomendar artigo por email

Imagem
Tenho recebido muitas solicitações para verificar porque o ícone para recomendar postagens por email sumiu de alguns templates. Descobri que este problema só ocorre nos templates XML mais antigos, onde havia um bug. O que já foi corrigido nas versões mais recentes dos templates padrão do Blogger.

Antes de mais nada, verifique nas configurações do seu blogue dentro do painel de controle, se essa opção está ativa. Procure pelo campo abaixo e certifique-se que a opção de Exibir o link Enviar esta postagem está marcada como Sim:



Depois entre na edição HTML do template e marque expandir modelos de widgets. Nunca é demais lembrar que nesse ponto é importante baixar o modelo completo do seu template, também conhecido como becape, para prevenir qualquer problema.

Feito isso, localize a seguinte linha no seu código:
<span class='post-icons'>Nos templates mais antigos e bugados, onde a imagem não é exibida apesar de ativada, o trecho de código que define o envio das postagens por …

Todas as dicas compulsivas para o Blogger

Imagem
* Atualizado em: 12/01/2012

Para refrescar a memória dos leitores antigos e informar aos calouros, segue abaixo uma relação com todos os tutoriais, widgets e otimizações compulsivas para o Blogger / Blogspot em ordem cronológica inversa:

12 de Janeiro de 2012
Postar no Blogger usando Google Plus - Como postar no Blogger a partir do stream do Google Plus.

30 de Julho de 2011
Blogger Widget - Me circula no Google+ - Widget não oficial do Google+ para o Blogger. Possibilita que seus leitores te circulem no Google+ diretamente a partir do seu site ou blog.

18 de Junho de 2011
Comentários do Facebook por post no Blogger - Como corrigir o formulário de comentários do Facebook no Blogger de forma que um comentário feito em determinada postagem, apareça apenas naquela postagem e em mais nenhuma outra.

09 de Junho de 2011
Resolver problemas de renderização no IE9 - Como corrigir os problemas de renderização dos novos templates do Blogger no Internet Explorer 9.

03 de Fevereiro de 2011
Remover Attributio…