URL Encurtada no Final do Post para Divulgalção

Visitando alguns blogs vi no final dos posts a opção de URLs encurtadas facilitando para o leitor divulgar o post caso ele goste do que leu.
Então procurei uma alternativa para ensinar aqui como fazer para você colocar a opção do link do seu artigo encurtada no final do seu post de forma automática.
Já ativei esta opção aqui no TPV. Veja no final deste post:

O hack que encontrei é específico para o blogger e possui 3 alternativas de encurtar o link do seu artigo.
Utilizando estes 3 sites:

• [goo.gl]
•   [mcaf.ee]
• [cli.gs]

Não Se Esqueça: » Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto: ♥ Sempre tente antes num blogue de testes. ♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar ♥ Leia o tutorial até o fim e tenha certeza de ter entendido.

Vamos lá:

1º Colocando o Código da URL Encurtada

»Vá em Modelo » Editar HTML

Procure por [post-footer-line-3]
<div class='post-footer-line post-footer-line-3'>
ou
<div id='post-footer'>
É importante que o código fique dentro da área dos posts.
Se seu blog não tiver post-footer-line-3 cole abaixo da line-2
Cole este código abaixo da linha » <div class='post-footer-line post-footer-line-3'>

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
    // Shorten Blogger post URLs using urltinyfy javascript API, by MS-potilas 2012
    // Updated new shortener by Vinay Prajapati, Tech Prevue Labs 2013
    //<![CDATA[
    function loadscript(filename) {
      var scr=document.createElement('script');
      scr.setAttribute("type","text/javascript");
      scr.setAttribute("src",filename);
      document.getElementsByTagName("head")[0].appendChild(scr);
    }
    var waitElm=null;
    function urltinyfyprompt_callback(response) {
      if(waitElm) waitElm.style.display="none";
      var txt="Short URL";
      if(response.title && response.title!="") txt+=' for "'+response.title+'"';
      else if(response.longurl && response.longurl!="") txt+=" for "+response.longurl;
      if(response.tinyurl && response.tinyurl!="")
        prompt(txt+":", response.tinyurl);
      else
        alert("Could not get short URL, try again later." + ((response.error && response.error != "") ? ("\nError: " + response.error) : ""));
    }
    function shortenUrl(elm, long_url, service) {
      waitElm=elm.parentNode.nextSibling;
      if(waitElm) waitElm.style.display="inline";
      loadscript("http://urltinyfy.appspot.com/"+service+"?unify=1&url="+encodeURIComponent(long_url) + "&callback=urltinyfyprompt_callback");
    }
    //]]>
    </script>
    <span class='shorturls'>Links do Artigo:
    <a expr:onclick='&quot;shortenUrl(this, &amp;#39;&quot; + data:post.url + &quot;&amp;#39;, &amp;#39;googl&amp;#39;);return false;&quot;' href='javascript:void(0)' title='Click to get short URL'>goo.gl</a>,
    <a expr:onclick='&quot;shortenUrl(this, &amp;#39;&quot; + data:post.url + &quot;&amp;#39;, &amp;#39;mcafee&amp;#39;);return false;&quot;' href='javascript:void(0)' title='Click to get short URL'>mcaf.ee</a>,
    <a expr:onclick='&quot;shortenUrl(this, &amp;#39;&quot; + data:post.url + &quot;&amp;#39;, &amp;#39;cligs&amp;#39;);return false;&quot;' href='javascript:void(0)' title='Click to get short URL'>cli.gs</a>
    </span><span style='display:none;'><img border='0' src='data:image/gif;base64,R0lGODlhEAALAPQAAP///wAAANra2tDQ0Orq6gYGBgAAAC4uLoKCgmBgYLq6uiIiIkpKSoqKimRkZL6+viYmJgQEBE5OTubm5tjY2PT09Dg4ONzc3PLy8ra2tqCgoMrKyu7u7gAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCwAAACwAAAAAEAALAAAFLSAgjmRpnqSgCuLKAq5AEIM4zDVw03ve27ifDgfkEYe04kDIDC5zrtYKRa2WQgAh+QQJCwAAACwAAAAAEAALAAAFJGBhGAVgnqhpHIeRvsDawqns0qeN5+y967tYLyicBYE7EYkYAgAh+QQJCwAAACwAAAAAEAALAAAFNiAgjothLOOIJAkiGgxjpGKiKMkbz7SN6zIawJcDwIK9W/HISxGBzdHTuBNOmcJVCyoUlk7CEAAh+QQJCwAAACwAAAAAEAALAAAFNSAgjqQIRRFUAo3jNGIkSdHqPI8Tz3V55zuaDacDyIQ+YrBH+hWPzJFzOQQaeavWi7oqnVIhACH5BAkLAAAALAAAAAAQAAsAAAUyICCOZGme1rJY5kRRk7hI0mJSVUXJtF3iOl7tltsBZsNfUegjAY3I5sgFY55KqdX1GgIAIfkECQsAAAAsAAAAABAACwAABTcgII5kaZ4kcV2EqLJipmnZhWGXaOOitm2aXQ4g7P2Ct2ER4AMul00kj5g0Al8tADY2y6C+4FIIACH5BAkLAAAALAAAAAAQAAsAAAUvICCOZGme5ERRk6iy7qpyHCVStA3gNa/7txxwlwv2isSacYUc+l4tADQGQ1mvpBAAIfkECQsAAAAsAAAAABAACwAABS8gII5kaZ7kRFGTqLLuqnIcJVK0DeA1r/u3HHCXC/aKxJpxhRz6Xi0ANAZDWa+kEAA7AAAAAAAAAAAA'/></span><div style='clear:both'/>
</b:if>

♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

Observações Importantes:

Se a linha <div class='post-footer-line post-footer-line-3'> estiver desta forma→ <div class='post-footer-line post-footer-line-3'/>

Você deve tirar a / e fechar com </div> no final do código que colou acima.

Resultado:

Quando você clicar sobre um dos links para encurtar a URL do post irá aparecer uma caixinha pop-up para você copiar o link e divulgá-lo da forma que achar melhor.

2º Configure o Link Encurtado do seu Post

Você pode configurar o CSS do link encurtado para se destacar ou não no final do seu post
Para isso copie este código e cole logo acima da linha ]]></b:skin>:

/*---ShortURLs---*/
.shorturls {
text-align: left;
float: left;
width: auto;
height: auto;
text-shadow: 1px 1px 1px #ccc;
margin: 0px 10px 0px 0px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #ccc;
padding: 5px 5px 3px 3px;
display: block;
vertical-align: middle; }
.shorturls a { text-transform: uppercase; }
.shorturls img {
padding: 0px;
position: relative; }

Ficará desta forma:



O encurtador de URL é uma maneira muito legal de distribuir os links do seu blog/site na internet.

Você pode usar o link encurtado no Twitter, Facebook, Google + e em todos as redes sociais que fizer parte. Divulgando os artigos que acha legal.

Aproveite e divulgue este artigo do TPV para que outras pessoas possam instalar este encurtador de URL nos seus blogs.

Fonte:
Tradução e adaptação do artigo: ♦Automatic Google (goo.gl) url shortener for Blogger blogs