URLs personalizadas para páginas no Blogger

URLs Personalizadas 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

Comentários

  1. PQP!!!
    Que f#da!
    Com certeza vou utilizar, só não sei no que ainda :D

    ResponderExcluir
  2. Bincadeira cada sia que passa o blogger se torna muito profissional o problema é o preconceito por ele ser grátis e todo mundo ter,fora os trilhões de spam..
    Mais será que teria como fazer que nem site tipo www.seusite.com/contato ?
    Mesmo assim este modo é fantastico daqui a pouco O google te contrata e até devolve o adsense...rsrs

    ResponderExcluir
  3. Opa...dica maravilhosa essa! Vou testar!!=)
    Mais uma vez..valeu Compulsivo!

    ResponderExcluir
  4. @Avelino, eu acho da forma que você citou é impossível no Blogger.

    []'s
    Compulsivo

    ResponderExcluir
  5. num intindi o que ele falô... sério, li, re-li e nao entendi como fazer.. o meu host é o uol, alguma dica sr usuário compulsivo?

    ResponderExcluir
  6. Tinha que ser o Compulsivo para mais uma dica maravilhosa.

    ResponderExcluir
  7. Para mim é possivel , mas ainda não parei para saber como faze lo.
    afinal o blogger ja permitiu usar sub diretorios pelo menos aparentemente.

    por exemplo este blog :
    http://www.rob-sheridan.com/sketchblog/2010/03/procedural-sketching-with-harmony.html

    ResponderExcluir
  8. Acho que através da hospedagem em servidor FTP próprio (a qual não é de graça como o Blogspot), até seria possível. Mas o Blogger já anunciou em janeiro que vai descontinuar esta opção.

    []'s
    Compulsivo

    ResponderExcluir
  9. Muito boa a idéia!

    Compulsivo, será que teria como fazer isso com os marcadores?

    Por exemplo... meu blog tem colunistas, e gostaria de dar uma pagina para esses colunistas, transformando o marcador "coluna de cinema" por exemplo, numa página, ficando http://cinema.seriadosnopc.com ... se fosse possivel fazer isso nos marcadores seria bem legal *-*

    Abração e valeu pela dica!!


    Paulo Victor
    @seriesnopc

    ResponderExcluir
  10. @Paulo Victor, eu acredito que dá sim, é só você direcionar o subdomínio lá no DNS para a página de categorias que você deseja criar...

    []'s
    Compulsivo

    ResponderExcluir
  11. Ah, nem vai dar. Eu uso o Uol Host e ele nem tem isso. Será que seu mudar o DNS do Uol Host para o FreeDNS meu blog sai do ar? tipo, naquele periodozinho que ele fica quando vc altera do blogspot para seu dominio personalizado?

    Paulo Victor

    ResponderExcluir
  12. @Paulo Victor, quem diria... Um serviço gratuito que tem mais recursos que um pago. Acho isso lamentável.... Você pode transferir sim, mas pode ser complicado se você não souber o caminho das pedras com antecedência. Meu domínio por exemplo, está registrado no Registro.BR totalmente em meu nome, não dependo de empresa nenhuma para modificar os servidores DNS dele assim que eu tiver vontade. Mas não sei dizer como isto funciona no UOLHost, nem com outros domínios.

    []'s
    Compulsivo

    ResponderExcluir
  13. Preciso dizer que vou testar???? heheheheeeee......
    .
    Compulsivo, vc vai pro céu!!!
    abçs
    ;)

    ResponderExcluir
  14. Mexi em tudo no FreeDNS e no painel do Uol Host e não conseguir.

    Espero que alguém que use o Uol Host e que consiga aplicar esse tutorial no uol host, nos informe como fazer... :(

    tava tão animado ;( (cry)

    Paulo Victor
    @seriesnopc

    ResponderExcluir
  15. @Paulo Victor, clica no link Web Forward na coluna lateral esquerda e depois no botão add ao lado do seu domínio já cadastrado no FreeDNS. Ai você terá acesso a tela de configuração igual a imagem que publiquei neste post.

    []'s
    Compulsivo

    ResponderExcluir
  16. Só tem uma coisa que irrita muito no blogger, a página para alterar o layout fica travada durante muitos dias, como resolvo isso, alguém sabe?

    ResponderExcluir
  17. Mais uma daquelas dicas que vale a pena tentar seguir. Não me parece fácil mas é tentadora.

    ResponderExcluir
  18. Boa dica! O Treta usava assim antes de sair do Blogger

    ResponderExcluir
  19. Excelente post. Estava lendo os comentários, realmente quem usa uol host não vai poder fazer desta maneira. Digamos que da para fazer de uma maneira mais demorada e as vezes não tão simplificada como a do Compulsivo, porém com resultado equivalente.
    Algo que já vinha pensando em fazer em meu blog e talvez eu faça ainda. (também uso uol host)

    A solução é criar diversos blogs
    Um blog é a home (www ou home)
    o outro o principal (se ja usou www use home ou ao contrario),
    ai sai criando sub domínios para as paginas estáticas como: contato.seudominio.com, about.seudominio.com, e por ai em diante. Cada sub domínio fica em um blog diferente. Em todos é possível usar o mesmo template, apenas com algumas modificações nas estáticas, (ate eliminar html, css e js correspondente a certos hack, comentários entre outros.) e na pagina inicial ainda é possível um template totalmente diferente, apenas um banner grande do blog, mostrando um botão para entrar e em baixo opções como comu no orkut, twitter, facebook, myspace e por ai vai.

    Como disse antes, bem mais complicado, porém o efeito vai ser equivalente.

    ResponderExcluir
  20. A dica é ótima, só preciso ver se eu consigo ir tão longe...rs

    Obrigada por compartilhar mais uma ótima dica!

    ResponderExcluir
  21. @Claudio Sanches, tem razão cara, apesar de um pouco mais trabalhoso, desse jeito também dá certo!

    []'s
    Compulsivo

    ResponderExcluir
  22. Eu sou usuária do Wordpress e não consigo mexer em quase nada! rsrsrs...Mas tb, não entendo nem de HTML! kkkkkkkkkkkkkkk...
    =1

    ResponderExcluir
  23. Não consegui, não deu certo!!!! Buáááááa........
    :(

    ResponderExcluir
  24. uhum eu tambem não consegui mudar!
    para mudar tem q ter dominio proprio q no caso é pago?

    Joewerton

    ResponderExcluir
  25. otima dica, muito boa, aqui não deu certo com o Free DNS, tentei com o http://www.zoneedit.com e funcionou beleza, tae pra quem quiser xD

    ResponderExcluir
  26. É, pelo FreeDNS não consegui mesmo.

    Mas segui pela dica do Claudio Sanches e funcionou legal. Um pouco mais trabalhoso, mais vale a pena. E com essa dica vou conseguir criar páginas para os colunistas do meu blog =)

    Mais uma vez agradeço pelo ótimo post/dica Compulsivo!

    Abs

    Paulo Victor
    @seriesnopc

    ResponderExcluir
  27. Esse recurso é interessante! pouco trabalhoso, mais o resultado é bem legal!

    ResponderExcluir
  28. Por enquanto, não vou fazer isso, mais daqui a um tempo...

    ResponderExcluir
  29. O Compulsivo é um blog grandioso por causa de dicas "undergrounds" como esta. Já faz muito tempo que não vejo algo que diferencia este blog dos demais. Espero que o Compulsivo continue futucando os cantinhos mais escondidos da Web para encontrar soluções tão raras e valiosas como esta que nos foi apresentada.

    ResponderExcluir
  30. É dificil mas vale a pena tentar!!

    ResponderExcluir
  31. pow, este post é bem legal. Você futuca em cada coisa, hein!?

    Gostei do post. Mas, como utilizo dos serviços da Oi Velox, quase sempre dá falha no carregamento da página. Quando cliquei por exemplo, hoje, no banner do Compulsivo que direciona para a página anuncie.compulsivo.com.br, não carregou e tentei 4 vezes. por esse motivo, vou optar por utilizar o recurso original do blogspot. Mas seu post é muito interessante e vale apena ser utilizado. Afinal, você foi tão fundo para trazer um post de qualidade que temos que aproveitar seu esforço. Valeu.

    ResponderExcluir
  32. Eu já usava parte disso no meu blog, muito boa a dica!

    ResponderExcluir
  33. @Salvador Lucas, agora é só completar com a parte que falta e que você aprendeu aqui ;-)

    []'s
    Compulsivo

    ResponderExcluir
  34. Compulsivo, o CLOAK, sendo uma espécie de iframe, não joga teu SEO na chónnn

    tô doida para usar isso mas tive essa duvida! Vou aproveitar a Pascoa para botar no ar o "novo" lay baseado no novo editor e devo colocar essas páginas estáticas com subdominio no ar!

    bjs!

    ResponderExcluir
  35. Esses subdomnínios do compulsivo estão sem favicon. Dá pra mudar no html, né?!

    ResponderExcluir
  36. O Blogger poderia facilitar pra gente ..

    ResponderExcluir
  37. conhece outro site grátis onde possa fazer isso?

    ResponderExcluir
  38. Anteriormente comentei que o endereço ficava sem favicon. Vi no FreeDNS que agora é possível especificar o endereço do favicon.

    ResponderExcluir
  39. valeu pela dica eu vo mudar o url do meu blog
    para outro nome mais impactante,valeu compulsivo

    ResponderExcluir
  40. olá eu tenho uma conta no uol host
    queria um subdominio, fiz a conta no freedns e agora? o tutorial so pecou nesta parte
    aguardo resposta vlw

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

Nomes de todas as igrejas do Brasil

O que significa DVDRip, DVDScr, R5, etc?

Remover idiomas em arquivos Dual Audio