Cursos 24 Horas - Cursos 100% Online com Certificado

Link encurtado para compartilhar no Blogger

11 Comentários Autor : Notícia e blog 02 setembro 2009


O Wordpress lançou um serviço de encurtamento de Url  e passou mais uma vez o blogger para traz mais como nós não somos burros criamos um serviço parecido que cria a partir do bit.ly um link encurtado de nossas postagens para ser utilizado no Twitter ou em locais que não permitem muitos caracteres.


Este hack adicionara uma caixinha com o link encurtado só nas páginas internas ou seja quando clicar no título da postagem.Vamos a instalação deste hack :


1.Faça Login no Blogger


2.Vá para Layout->Editar html->Marque a caixinha Expandir modelos de widgets
Agora utilizando  as teclas Ctrl e F procure pelo código abaixo:
</head>
E acima dele insira o código seguinte :
<script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&amp;login=noticiaeblog&amp;apiKey=R_fefee3c6cb398866e93e63daa2228b59"></script>
<script type="text/javascript" charset="utf-8">
 BitlyClient.addPageLoadEvent(function(){
  BitlyCB.myShortenCallback = function(data) {
   // this is how to get a result of shortening a single url
   var result;
   for (var r in data.results) {
    result = data.results[r];
    result['longUrl'] = r;
    break;
   }
   document.getElementById("shorturl").innerHTML = "Link para compartilhar: &lt;input type='text' value='" + result['shortUrl'] + "' name='bitlyurl'/&gt;";
  }
  BitlyClient.shorten(document.location, 'BitlyCB.myShortenCallback');
 });
</script>
3.Agora procure pelo código abaixo:
<div class='post-footer-line post-footer-line-3'>
E abaixo dele insira o código seguinte:
<b:if cond='data:blog.pageType == "item"'><form id='shorturl'/></b:if>

4.Procure pelo código abaixo:
]]></b:skin>
E acima dele adicione o código seguinte:
form#shorturl { color:#666; font-size:11px } #shorturl input { color:#999; border:1px inset #CDCDCD; padding:1px 5px; }
5.Salve as alterações 

Pronto você adicionou um gerador de url encurtado 
 Referência: Blogandweb ,Tradução Notícia e blog

    11 Comentários

    Gabriel Batista dos Santos disse...
    29 de maio de 2010 00:07 #

    Ok Mas me explica da para colocar por exemplo na hora que a pessoa colocar o mouse em cima já selecionar o link encurtado? eu sei qual é o codigo:



    mas em que parte eu ponho isso?

    por favor quero muito fazer isso!

    kaytros disse...
    29 de maio de 2010 10:29 #

    qual a parte do codigo acima e que exibe o link, caso queria mudalo de loacal

    Notícia e blog disse...
    29 de maio de 2010 15:18 #

    @Kaytros, a parte que exibe o link é a parte 3 do tutorial.
    @Gabriel Batista dos Santos, ainda estou fazendo testes mais ja informo...

    Gabriel Batista dos Santos disse...
    29 de maio de 2010 16:47 #

    muito obrigado, estou esperando!

    kaytros disse...
    1 de junho de 2010 16:00 #

    Só mais uma coisinha, como deixar o link clicavel

    kaytros disse...
    8 de junho de 2010 17:53 #

    posta como personalizar o rodape da postagen tipo a do seu blog...

    Anônimo disse...
    12 de julho de 2010 12:21 #

    Opa, tudo bem?

    Você pode me ajudar a entender como utilizar a API deste encurtador brasileiro? http://clipe.me

    Tenho um pequeno site em joomla e queria usar para publicar no twitter minhas atualizações.

    Obrigado pela ajuda.

    PR

    @MrSid_ disse...
    2 de abril de 2011 06:31 #

    Muito bom, Obrigado por ajudar.

    HenriqKC disse...
    9 de abril de 2011 22:00 #

    Parabens vc é otimo estava procurando em centenas de blogs e todos sempre davam erro na hora de salvar ou não apareciam o link na postagem esse foi o unico local que encontrei um codigo que realmete funciona.

    Mas tenho 2 perguntas:

    • Como diminui o tamanho do quadrinho?
    • Como muda a cor do texto e do quadrinho?

    Obrigado continue assim.

    News e Você disse...
    16 de novembro de 2011 00:55 #

    nao consigo o passo 3 pq meu blog ñ tem aquela div

    Anônimo disse...
    10 de janeiro de 2012 09:52 #

    meu site nao tem a terceira div

    Postar um comentário

    Deixe seu comentário aqui
    Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.