URLs personalizadas para páginas no Blogger

Personalize as URLs das páginas estáticas no Blogger / Blogspot (imagem: chrisdlugosz)

Há algum tempo descobri como personalizar as URLs dos posts no Blogger, para usar nas páginas estáticas, mas na época ainda não estava utilizando nosso domínio (http://compulsivo.com.br/) aqui no UsuárioCompulsivo, o que me impedia de implementar este recurso de forma completa.

Se você não sabe do que estou falando, acesse uma de nossas páginas estáticas: Autores ou Contato, por exemplo, e verifique que a URL que aparece na barra de endereços do seu navegador, é personalizada e curta. Algo inédito em blogs hospedados no Blogspot no mundo inteiro! Pelo menos eu nunca vi nada parecido.

Mesmo para quem está usando as páginas estáticas recentemente liberadas como recurso nativo no Blogger, acabam com URLs estranhas, de difícil memorização, tipo: http://www.compulsivo.com.br/p/whatever.htm. Por isso este hack complementa as páginas estáticas que você já tem, independente se são nativas ou posts adaptados. O resultado final será será o mesmo.

Aposto que você está curioso para saber como eu fiz isso. Garanto que eu mesmo, se estivesse lendo isso em qualquer outro blog, também estaria curiosíssimo ;-) Por isso estou enrolando neste post. torturando você leitor ansioso, que não vê a hora de ter páginas estáticas com URLs simples e facilmente memorizáveis, também no seu blog hospedado no Blogspot.

Hehehe, eu sou mau...


Personalize as URLs das páginas estáticas no Blogger / Blogspot

Este hack envolve basicamente três alterações: direcionamentos via DNS, modificações no código HTML dos posts e também do template, para tratar as URLs das páginas estáticas. E requer um certo nível de conhecimento, não só na edição dos parâmetros do Blogger, como também na questão da manutenção dos registros DNS do seu domínio.

Neste tutorial vou mostrar como configurei as URLs personalizadas no UsuárioCompulsivo, utilizando especificamente o serviço gratuito FreeDNS, para fazer a resolução e o direcionamento dos nomes do domínio http://compulsivo.com.br/.

Para cada página estática com URL personalizada, será necessário:

1. Criar um direcionamento web, via subdomínio;
2. Incluir uma condicional no template alterando o atributo BASE TARGET;
3. Alterar o código html do post, removendo o permalink original.

Criando um Direcionamento Web com o FreeDNS

O FreeDNS oferece um recurso chamado Web Forward, que funciona de forma parecida com um subdomínio (ex. http://home.compulsivo.com.br). Mas que permite apontar diretamente para uma URL qualquer, sem maiores configurações, que normalmente são necessárias na configuração de um subdomínio propriamente dito. Ex:.

Tela de configuração do Web Forward no FreeDNS.

Nesta tela configurei o sub domínio http:// contato . compulsivo . com . br/ apontando para a página http:// www . compulsivo . com . br/ 2006/ 04/ contato.html. Um post normal, onde configurei o formulário de contato compulsivo.

O mais importante a observar aqui é que a opção CLOAK está marcada e um título alternativo, àquele que o Blogger exibe normalmente, foi configurado para a página no campo Page Title: (if cloaked).

Mas o que esse tal de CLOAK quer dizer? Segundo o HELP do site FreeDNS, esta opção significa:

Cloak - Cloak loads page in a hidden frame, so the URL doesn't change to the destination address when redirected, effectively hiding the real URL of your site.

A opção CLOAK carrega a página destino num frame invisível, assim a URL exibida na barra de endereços não muda quando a página é direcionada, efetivamente escondendo a URL real da página/site.

É importante também configurar o campo Page Title, ao marcar a opção CLOAK, pois caso contrário o título da página exibido no topo da janela do navegador será sua própria URL.

Atenção pois este ponto é realmente importante. Eu não sei dizer se outros serviços de hospedagem de DNS, gratuitos ou pagos, oferecem um recurso parecido. Mas sem ele não é possível personalizar as URLs das páginas estáticas no Blogger. Portanto todo este tutorial depende principalmente do recurso CLOAK. Verifique se o seu serviço de direcionamento de DNS possui este recurso ou algo parecido.


Alterando o atributo BASE TARGET em páginas específicas do Blogger

Quando descobri o recurso de direcionamento web em frame oculto (CLOAK), oferecido pelo FreeDNS, logo tentei usá-lo. Mas percebi que não daria certo sem algumas adaptações. O problema é que ao clicar em qualquer link numa página direcionada via frame oculto, a URL não era atualizada na barra de endereços do navegador.

Por exemplo: se eu entrasse na página do meu formulário de contato (direcionada através de frame oculto) e clicasse no link para voltar a página inicial, a URL exibida na barra de endereços do navegador permanecia igual (http://contato.compulsivo.com.br/) quando a página inicial era carregada. Pois a URL original continuava oculta, por causa da opção CLOAK aplicada via FreeDNS.

A solução para este problema foi modificar o atributo TARGET de todos os links das páginas estáticas para o valor _TOP, que obriga o navegador a atualizar a URL exibida na barra de endereços a cada link clicado. O problema era: como fazer isso apenas nas páginas estáticas, sem mexer em todas as outras?

Já publicamos um tutorial mostrando como abrir todos os links em nova janela. Apesar de pouco recomendado, este tutorial me deu uma idéia: E se usássemos uma condicional, para modificar o atributo BASE TARGET para o valor _TOP apenas nas páginas estáticas?

E para minha felicidade isto deu certo!

Depois de muito pastar acabei encontrando uma forma de fazer isso. É o tipo da coisa que parece simples, depois que você já sabe como fazer, mas que é bem complicada de descobrir. Primeiro tentei incluir a linha de código <base target='_top' /> diretamante no HTML das postagens usadas como páginas estáticas, mas depois descobri que este atributo só é aceito dentro da tag HEAD da página.

A solução foi incluir a linha abaixo, antes do fechamento da tag HEAD, diretamente no código HTML do template:

<b:if cond='data:blog.url == "http://www.compulsivo.com.br/2006/04/contato.html"'><base target='_top'/></b:if>

</head>

OBS: A linha destacada em vermelho é apenas refencia para o posicionamento do código.

Para cada URL personalizada é necessário adicionar uma nova linha conforme o exemplo acima, incluindo a URL original do post.


Removendo permalink original diretamente no código do post

Quando eu pensava que tudo estava pronto, descobri um novo problema: Como as páginas estáticas do UsuárioCompulsivo são posts adaptados, elas mantinham o permalink com a URL original, no título da postagem. Se o usuário clicasse no título do post (Formulário de contato), seria direcionado para a mesma página, porém com sua URL original: http://www.compulsivo.com.br/2006/04/contato.html.

A solução para este detalhe foi mais simples. Em cada página estática, você pode incluir um pequeno trecho de CSS personalizado que será lido apenas naquele post. A Juliana Sardinha já falou a respeito disso no Dicas Blogger, no post: Páginas estáticas com CSS. Neste caso específico, o código necessário colado diretamente no início do HTML da postagem, foi o seguinte:

<h1>Formulário de contato</h1>
<style type="text/css">.post-title{display:none}</style>

Na primeira linha criamos um novo título para o post, porém sem link. E na segunda, ocultamos o título original que o Blogger cria automaticamente e que contém o permalink original do post, que queremos esconder.

Ufa! Tá pronto....

Leia também nosso primeiro post sobre este assunto:
Páginas estáticas no Blogspot (quase) iguais ao Wordpress