20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

How To Add Google URL Shortner To Make Short URL

learn trick to make urls shortner in blogger template,add install create google shortner api.how to make blogspot article url short with google url shortner.
How To install make Google URL Shortner for articles  In Blogger Template
Hello Folks, Today in this article we are going to explain How to add Google Url Shortner Api in blogger template.You might have noticed on social media sites or also in so many websites they are providing short urls instead of original url.There is no harm in sharing your articles/content with the google short url.And it's provided by google so you can trust blindly on the plugin.After installing you can share your urls from your blogspot website or blog instead of leaving and going to google shortner service which is officially provided by google. You can search on google url shortner  and you can see google is providing shortner api for urls.When you share your urls with google url shortner tool from your website your url will start with goo.gl.you can share url on facebook , twitter, google plus etc.Google Shortner is very old service so there is no damage will be happen with urls.And this trick is totally defer/async so it will not effect your webpage loading speed.In order to get google url shortner for your contents/article follow the steps mentioned below.

How to Install Google URL shortner API plugin in blogger template

Installation Steps:
Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys or CMD+F.
Step 4. Now Copy the below CSS code and paste it just above/before </style> or ]]></b:skin>.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.bsdshorturl{font-size:100%;font-weight:bold;color:#666!important}
.bsdshorturl a.url{text-decoration:none!important;color:#666!important;display:inline-block;margin:0 0 0 5px;border-radius:3px;background:#fefefe;border:1px solid #666;box-shadow:0 1px 0 rgba(0,0,0,.08);text-shadow:none;line-height:23px;padding:1px 8px 0 5px;transition:all 400ms ease-in-out}
.loadingbsd-shorturl{display:none}
.bsdshorturl a.url:hover{color:#555;background:#fefefe;border:1px solid #999}
.bsdshorturl a.url:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)}
.clear{clear:both}
</style>
</b:if>
Step 5. Now search for <data:post.body/> and copy the below HTML code and paste it just after/below <data:post.body/> tag. [points to remember you will find <data:post.body/> 3 times but you need to stop at second one if not work then go for third one.]
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span class='bsdshorturl'>
Share with short Link: <a class='url' expr:onclick='&quot;shortenUrl(this, &amp;#39;&quot; + data:post.url + &quot;&amp;#39;, &amp;#39;googl&amp;#39;);return false;&quot;' href='javascript:void(0)' title='Get short URL'>Get Short URL</a></span><span class='loadingbsd-shorturl'><img alt='loading short url' src='data:image/gif;base64,R0lGODlhEAALAPQAAP///wAAANra2tDQ0Orq6gYGBgAAAC4uLoKCgmBgYLq6uiIiIkpKSoqKimRkZL6+viYmJgQEBE5OTubm5tjY2PT09Dg4ONzc3PLy8ra2tqCgoMrKyu7u7gAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCwAAACwAAAAAEAALAAAFLSAgjmRpnqSgCuLKAq5AEIM4zDVw03ve27ifDgfkEYe04kDIDC5zrtYKRa2WQgAh+QQJCwAAACwAAAAAEAALAAAFJGBhGAVgnqhpHIeRvsDawqns0qeN5+y967tYLyicBYE7EYkYAgAh+QQJCwAAACwAAAAAEAALAAAFNiAgjothLOOIJAkiGgxjpGKiKMkbz7SN6zIawJcDwIK9W/HISxGBzdHTuBNOmcJVCyoUlk7CEAAh+QQJCwAAACwAAAAAEAALAAAFNSAgjqQIRRFUAo3jNGIkSdHqPI8Tz3V55zuaDacDyIQ+YrBH+hWPzJFzOQQaeavWi7oqnVIhACH5BAkLAAAALAAAAAAQAAsAAAUyICCOZGme1rJY5kRRk7hI0mJSVUXJtF3iOl7tltsBZsNfUegjAY3I5sgFY55KqdX1GgIAIfkECQsAAAAsAAAAABAACwAABTcgII5kaZ4kcV2EqLJipmnZhWGXaOOitm2aXQ4g7P2Ct2ER4AMul00kj5g0Al8tADY2y6C+4FIIACH5BAkLAAAALAAAAAAQAAsAAAUvICCOZGme5ERRk6iy7qpyHCVStA3gNa/7txxwlwv2isSacYUc+l4tADQGQ1mvpBAAIfkECQsAAAAsAAAAABAACwAABS8gII5kaZ7kRFGTqLLuqnIcJVK0DeA1r/u3HHCXC/aKxJpxhRz6Xi0ANAZDWa+kEAA7AAAAAAAAAAAA'/></span>
<div class='clear'/>
</b:if>
Step 6 . Now Search for closing </body> tag and copy the below java script and paste it just above/before </body> tag.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Shortner url by www.bloggersstand.com
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/ishekharsingh/bloggersstand/master/shorturl.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
</b:if>
Step 7. Now Save your Template.Done !

Post a Comment