How To Add Google URL Shortner To Make Short URL

0
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 !
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.
Hello Folks, Today in this article we are going to explain How to add Google Url Shortner Api i...
SUMMARY

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.

You Might Also Like:

We hope this article helped you to learn How To Add Google URL Shortner To Make Short URL. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "How To Add Google URL Shortner To Make Short URL" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand