How to Auto Generate Short URLs of Your Posts in Blogger

How to Auto Generate Short URLs of Your Posts in Blogger

URL Shortener is technique to short a long URL which is mostly used by the webmasters , bloggers .URL shortener now common on the web. There are several  essential url shorteners is available across the  web such as shorte.st , bit.ly , SnipURL and the most popular is Goo.gl.

This is too hard to create short url for all blog posts one by one , but the developers of api has created an API where an option to short be added below every posts on blogger.

Note : First Backup your Blog template

How to /

1. Go to Dashboard > Template > Edit Template.

2. Find out <div class=’post-footer-line post-footer-line-3′>


3. Then, Copy and Paste the below  code, just after  <div class=’post-footer-line post-footer-line-3′> 

<b:if cond='data:blog.pageType == &quot;item&quot;'>  
<div id='shoternUrl'>
<form id='shorturl'/>
<!-- short url widget script start -->
<script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=unbfacts&amp;apiKey=R_cb436480530becb8bb6e628aa34520f2' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
BitlyClient.addPageLoadEventundefinedfunctionundefined){
BitlyCB.myShortenCallback = functionundefineddata) {
// this is how to get a result of shortening a single url
var result;
for undefinedvar r in data.results) {
result = data.results[r];
result[&#39;longUrl&#39;] = r;
break;
}
document.getElementByIdundefined&quot;shorturl&quot;).innerHTML = &quot;<div id='shorternh2'>Surprise your friend with this fact! Share this link in your Status!</div> &lt;input type=&#39;text&#39; class=&#39;textinpo&#39; value=&#39;&quot; + result[&#39;shortUrl&#39;] + &quot;&#39; name=&#39;bitlyurl&#39;/&gt;&quot;;}
BitlyClient.shortenundefineddocument.location, &#39;BitlyCB.myShortenCallback&#39;);
});
</script></div>
</b:if>

4. And, then ‘save‘ the template . Done

Note:

1. Due to the designer blogger template, <div class=’post-footer-line post-footer-line-3′>  may not be on your blogger template.

Then, Just paste the JavaScript code just after <data:post.body/>

2. You may find <data:post.body/>  more than 1 times. then try to add JavaScript code after every <data:post.body/>  tag. And, find out which one is working with.

Categories

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *