» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

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:
URLEncurtada01
O hack que encontrei é específico para o blogger e possui 3 alternativas de encurtar o link do seu artigo.
Utilizando estes 3 sites:
backup do template 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:

URLEncurtada04

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
URL Encurtada no Final do Post para Divulgalção URL Encurtada no Final do Post para Divulgalção Reviewed by Aurea R C on 3/29/2013 Rating: 5

2 comentários:

  1. Olá! Um informação por favor - no caso o blogger fez alterações no HTML como eu faço para localizar está diferente?(iniciante)
    Obrigado.

    ResponderExcluir
  2. @SB TTOlá Sweet,

    O blogger mudou o editor de HTML.
    Alguns dizem que foi para pior, outros para melhor. Eu, estou gostando.

    Para você localizar os códigos use a função procurar do próprio editor.
    Mas como? Clique em cima do código do editor e clique Ctrl+F irá aparecer uma caixinha no alto do próprio editor para que você digite o que quer procurar.
    Clique em enter que ele irá levar você onde deseja. Se houver mais de um código que procura clique em enter após clicar em cima da caixinha de procurar para ir aos próximos iguais.
    Espero que tenha entendido. Você me deu uma ótima idéia de artigo para aqui. Pode ser que muitas pessoas estejam tendo dúvidas quanto a isso!
    Um abraço,

    Áurea

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.