Short URL Widget Below Posts In Blogger

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

So in this tutorial we'll learn adding short url widget below posts.....it's totally awesome and gives your visitors short links of your blogger posts.....

• First get Bit.ly's API you need to sign in there to get your api.

• After getting AIP Go To Blogger > Template > Edit HTML

• In Edit HTML press Ctrl+F and find </head>. 

• Post following script just above  </head>.

<script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&amp;login=YOURUSERNAME&amp;apiKey=YOURAPIKEY"></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>

• Replace  YOURUSERNAME And YOURAPIKEY with your bit.ly Username and API(Follow First Step)

• Now Find ]]></b:skin>  and just above it post following script

form#shorturl {
color:#666;
font-size:11px
}#shorturl input {
color:#999;
border:1px inset #CDCDCD;
padding:1px 5px;
}

• Save Template

• Now again click on Edit HTML and mark Expand the Template.

• Find :

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

• And post following script just between above code

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

• Click on Save Template and just visit your posts to see this script in action.

Comment for any type of help..... :)

Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.