Códigos e Scripts Postagens Vanessa S.
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.
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
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.
Vanessa S.
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.
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!
Olá, Vanessa!
Instalei o código com sucesso. A dica foi muito útil e fácil de configurar.
Abraço!
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…
O HTML não apareceu infelizmente, mas no site que indiquei explica direitinho como fazer.
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.
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.
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 =/
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
Sim, eu inclui a propriedade text-shadow.
text-shadow: 0px 1px 0px #DADCDD;
affz eu coloquei esse script no meu blog e não tinha feito backup dele agora ta dando vírus no meu blog
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
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.