Show Posts short URL in blogger with bit.ly API key

Tutorial Step by Step

1. Proceeding with the first step, Copy the following block of Javascript code and paste it just above </head> in your Blogger Template.

<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 = "Share this link: &lt;input type='text' value='" + result['shortUrl'] + "' name='bitlyurl'/&gt;";


}

BitlyClient.shorten(document.location, 'BitlyCB.myShortenCallback');

});

</script>



2. In the second step add the following block of CSS code to your Blogger template just above </b:skin>.This code gives the style to area displaying the shorted links.

form#shorturl {

color:#666;


font-size:11px

}#shorturl input {

color:#999;

border:1px inset #CDCDCD;

padding:1px 5px;

}

3. Now in third step you need to choose the place for displaying the shorted links.For this Search for the following line in your Blogger Template.but remember to Expand the Template before you proceed.

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

Now Paste the following line of code between the above code in your Template.

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



Now Save your Blogger Template then you’re done.

Source: bloganol.com