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&login=YOURUSERNAME&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: <input type='text' value='" + result['shortUrl'] + "' name='bitlyurl'/>";
}
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..... :)
