How to Auto Generate Short URLs of Your Posts in Blogger with Bit.ly

Advertisements
In our previous tutorials, we have already showed you how to create short URLs for your Blogger blog Using Google Shortener. However, sometime people like things to be accurate and done with automation. Bit.ly is a fair enough popular URL shortening service that automatically provides you a short URL of your post. This not only helps you to save your precious time, but also displays the short URLs at the bottom of your posts, so that visitors can easily share them too. In this article, we will show you How to Auto Generate Short URLs of Your Posts in Blogger with Bit.ly?

What is Bitly: 

It is an online service that provides you short URLs of your posts so that you can share them with your friends, family, and on the web. This service is fairly popular on microblogging site twitter because it is the default shortening service since May 6, 2009. The shorten links created with this service are permanent and somewhat look like this http://bit.ly/6wgJO.

How to Auto Generate Short URLs of Your Posts in Blogger with Bit.ly

The First thing you will be doing is to login into your Blogger Dashboard. Now After logging in, go to your blog >> Template >> Edit HTML >> and search for the ]]></b:skin> tag. Once you find it, just above it paste the following CSS code.

#shorturl {
float: left;
background: #F8F8F8;
padding-bottom: 10px;
border-top: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
padding-top: 10px;
width: 650px;
}
#shorternh2 {
float: left;
padding-left: 20px;
padding-right: 10px;
}
.textinpo {
float: left;
font-family: "verdana",helvetica,Tahoma,Arial,sans-serif;
font-size: 12px;
color: #666;
border: 1px solid #ccc;
border-radius: 3px;
background: #fff;
width: 215px;
padding: 0px!important;
padding-left: 10px!important;
height: 20px!important;
margin: -4px!important;
}

Now after pasting the style sheet coding into your template, it is time to move ahead, and get things a bit more serious. Again in the template, search for <div class='post-footer'> and just above it paste the following JavaScript coding which would generate the shorten URLs and display them at the end of your posts.

<!-- Short URLs Script by MBL -->
<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.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[&#39;longUrl&#39;] = r;
break;
}
       document.getElementById(&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.shorten(document.location, &#39;BitlyCB.myShortenCallback&#39;);
});
</script></div>
    </b:if>
<!-- Short URLs Script by MBL -->

Congratulations: Once everything is down, simply press the “Save” button and automatic shorten URL script is ready, and good to be live on your website. Now go and check your website to see the  Automatically Generate Short URLs of Your Posts in Blogger.

We hope this article has helped you to learn How to Auto Generate Short URLs of Your Posts in Blogger with Bit.ly. What are your thoughts about this automatic script, which we have brought for all guys out there? Which URL shortening service you are using? If anyone has any problem while applying this tutorial then, do not hesitate to leave a comment below.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

17 comments

July 11, 2013 at 1:19 PM

Nice Post Bro Keep It Up Allah Bless You

July 11, 2013 at 6:26 PM

Awesome Post Faizan bro :) I use goo.gl to short links but you share awesome tip to short the link automatically.. Thanks

July 11, 2013 at 8:55 PM

Awesome post !

July 11, 2013 at 11:37 PM

Bit.ly is my favorite tool to shorten my blog post URL's.

July 12, 2013 at 4:51 AM

This is one of the best tools created you , Faizan bro !
You have did a great job for us .
Thank You ..

July 12, 2013 at 12:58 PM

Could you repeat your post with adf.ly site.

We as blogger wants to help ourself by some money in running blogs. so its good for earning....

By the way great post

July 14, 2013 at 10:02 AM

Finally i found already this, I spend my time searching this kind of plugin for blogger. And you guys definitely awesome.Thank you so much. I add already to my blogs...Keep sharing..

August 1, 2013 at 4:44 AM

oh i think i did something rong and my blog became so messy :S:S:S

August 1, 2013 at 4:58 AM

Can i have your email add pls:(

Editorial Team MOD
August 1, 2013 at 8:51 AM

contact.mybloggerlab.com << use that!

September 19, 2013 at 2:58 AM

nice post, thx

October 12, 2013 at 6:07 AM

Nice Post Brother...Keep it Up....

February 2, 2014 at 3:35 PM

thanks... im willing to translate this to indonesian language and post it at my blog at etchingsoul.web.id with a backlink to this post... :D

October 25, 2014 at 1:34 AM

is there any method for goo.gl google short url service ?

Editorial Team MOD
October 25, 2014 at 5:31 PM

Not yet, if we will develop something like that we will surely share. Stay tuned.

December 27, 2015 at 8:46 AM

It's nice for an short url with biy.lt

Thanks for the post's.

February 23, 2016 at 8:22 PM

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.