Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1498248146
Vida do cache: 1498291346
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Códigos e Scripts Postagens

Mostrar link encurtado automaticamente ao final dos posts no Blogger

Hoje você vai aprender como conetar seu blog a uma conta do Bit.ly e com isso disponibilizar um link encurtado automaticamente ao final dos posts no blogger, e você ainda terá a possibilidade de verificar a performance dos seus artigos divulgados, analisando o número de cliques e interações que eles recebem.

A implementação do código para encurtar o link dos seus posts no Blogger usando o bit.ly é bem fácil e simples, basta seguir o seguintes passos.
Mostrar link encurtado automaticamente ao final dos posts no Blogger

1. Antes de mais nada, acesse o site bitly.com e clique no botão “Join now. It’s free!” e crie sua conta gratuitamente.
Você pode se conectar através da sua conta do facebook ou do twitter.

2. Agora acesse o painel do blogger e clique no menu “modelo“, clique em “editar html” e marque a opção “expandir modelos de widgets“.

3. Procure pela tag </head> e cole esse código ACIMA dela:
[gist id=”5341879″ file=”shorturl_js”]

Se tiver dificuldades para visualizar o código, pode copia-lo através deste link:
https://gist.github.com/mundoblogger/5341879

Substitua bitly API Key por sua Bitly API Key e bitly Username pelo seu nome de usuário no Bitly.

Para encontrar sua API Key no bitly, acesse a página do bit.ly e faça login no site.
Em seguida você pode visitar esta página enquanto estiver conectado ao site Bitly:
http://bitly.com/a/your_api_key

pegar API Key do bitly

4. Agora que você instalou o código js no seu template, você deverá incluir a linha de código html no local onde você deseja que a caixinha com a Url encurtada apareça.

Mostrar link encurtado automaticamente ao final dos posts no blogger

A escolha do local, vai do seu gosto e depende muito do seu template.
Dica: Pode ser abaixo do título da postagem(post-header-line-1), ou na linha do rodapé (post-footer), veja neste post as opções de locais para você escolher: Escolhendo o local para instalar elementos na área dos artigos.

Eu particularmente recomendo que instale na linha do rodapé do post.

Procure por

<div class='post-footer'>

e cole o seguinte código logo APÓS a tag que você acabou de localizar:


<b:if cond='data:blog.pageType == "item"'><form id='shorturl'/></b:if>

Depois é só salvar e verificar como ficou.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

12 Comentários

  1. Luzardo Peres disse:

    Boa tarde!
    estou procurando na net alguma forma de criar uma postagem com partes expansíveis em seu corpo…. por exemplo com um subtítulo e um resumo e ao clicar no subtitulo abre o restante da posagem…
    você conhece alguma forma de fazer isso para me ajudar?
    Obrigado!

  2. Olá, Vanessa!

    Instalei o código com sucesso. A dica foi muito útil e fácil de configurar.

    Abraço!

  3. Fiz e também não funcionou!

    Existem dois erros no seu tutorial:

    1° – No código do USERNAME e API está faltando o termo “amp;” entre “&” e “apiKey”. Sem isso resulta o erro que o Fábio Lins relatou.

    2° – Para que o link curto apareça no Blogger, o código “” deve ser posto depois de “”. Assim funciona perfeitamente.

    Ps.: neste site http://blog.btemplates.com/how-to-show-short-urls-on-blogger/ explica direitinho como fazer.

    Espero ter ajudado.. Bjos e abraços do +Sexy Help Desk…

  4. Fábio Lins disse:

    Comigo não deu certo, infelizmente. Tentei nos meus dois blogs e nos dois deram o mesmo erro.
    Coloco o código acima de e dá o seguinte erro:

    Erro ao analisar XML, linha 961, coluna 105: The reference to entity “login” must end with the ‘;’ delimiter.

    Tem como resolver? Obrigado.

    • Vanessa disse:

      Na hora de alterar seu username ou sua app key, vc está retirando um caracter do código, por isso está dando erro. Tente refazer, com mais atenção, para editar somente o que se deve, sem retirar nada do código.

      • Fábio Lins disse:

        Oi Vanessa. Não sei se o que está acontecendo ou se o problema é com meu layout. Mesmo sem colocar meu username ou APY, após eu inserir o código acima antes de head, sem alterar nada, esse erro aparece. Refiz várias vezes com a máxima atenção =/

  5. Felipe Chaves disse:

    Olá Vanessa!
    gosto muito do seu site,sempre que tenho duvidas é aqui que eu procuro, muito bom mesmo. Agora tenho uma pergunta, o texto do corpo dos seus posts está em verdana certo? mas vc colocou algum tipo de sombra? é porque já tentei de várias formas deixar o texto bem suave de se ler igual ao do seu site mas nao consigo, poderia me ensinar como deixar ele assim? muito obrigado e aguardo resposta

  6. Jonathan disse:

    affz eu coloquei esse script no meu blog e não tinha feito backup dele agora ta dando vírus no meu blog

  7. Jonathan disse:

    Fiz tudo como você disse mas não deu muito certo
    fiz isso no meu blog de games
    e não houve mudança alguma
    pelo menos não ao meu ver

    • Vanessa disse:

      Vc deve ter feito alguma coisa errada. Esse script é fornecido pelo próprio bitly e não contém vírus algum. Se seu blog apresenta esse tipo de problema, verifique os demais scripts que vc usa no template, pq com certeza não tem nada a ver com esse script da bitly.

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.