Display de URLs curtas no blogger

Sabendo que o Twitter vem se tornando uma excelente fonte de tráfego e que as URLs curtas se tornam mais agradáveis esteticamente, vale à pena seguir este mini-tutorial e aprender como gerar nativamente no blogger um display com URLs curtas.

Primeiro passo: Procure no seu template pela linha:

<div class='post-footer-line post-footer-line-3'>

E logo abaixo adicione:

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

2.Segundo passo: Antes da tag </head> adicione:

<script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&amp;login=bitlyapidemo&amp;apiKey=R_0da49e0a9118ff35f52f629d2d71bf07"></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 = "Dirección para compartir: &lt;input type='text' value='" + result['shortUrl'] + "' name='bitlyurl'/&gt;"; } BitlyClient.shorten(document.location, 'BitlyCB.myShortenCallback'); }); </script>

3. Terceiro passo (Opcional): Você poderá adaptar antes da tag </b:skin> o seguinte código:

form#shorturl {
color:#666;
font-size:11px
}

#shorturl input {
color:#999;
border:1px inset #CDCDCD;
padding:1px 5px;
}

O resultado ficará algo como:

É isso! =)

Categoria(s): Blogger