16 January 2015

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'>  
 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;  
     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;);  

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


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.

About Admin
Admin is a Web Designer and a blogger.
You can find him on Facebook, Twitter, Gplus

Leave a Comment!