Cara Membuat Google URL Shortener Untuk Share Artikel

Tak salah untuk anda memasang berbagai pilihan kepada pengujung dengan aneka kebutuhan blogger yang memadai. Untuk mensharing itu tentu kita lakukan dengan berbagi kita akan mendapatkan informasi dan juga ilmu yang didapat dari berbagi artikel blog atau website ke dalam media sosial. Sudah umum pada setiap blog telah terpasang tombol sharing twitter, facebook atau lainnya yang jelas untuk membagikan para pembaca yang artikel berguna untuk para netizen.

Kita juga dapat menggunakan short url untuk memudahkan pembaca membagaikan artikel ke dalam media sosial baik facebook, twitter atau lainnya. Salah satunya pemendek url Google Shortener untuk blogger yang mudah dalam pembuatannya. Sebenarnya kode aslinya menampilkan 3 URL Shortener, tapi disini saya hanya menampilkan satu URL Shortener saja yaitu Google URL Shortener.

Dan untuk Javascript URL Shortener ini ternyata bisa di-defer sehingga tidak menggangu loading blog. Shortener ini akan terletak di bagian bawah posting blog.

Nah untuk anda yang ingin memasangnya, ikuti langkah berikut ini :

Membuat Google URL Shortener untuk Share Artikel di Blog

1. Copy kode dibawah ini dan letakkan di atas </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> .shorturl{font-size:100%;font-weight:bold;color:#666!important} .shorturl a.url{text-decoration:none!important;color:#666!important;display:inline-block;margin:0 0 0 5px;border-radius:3px;background:#f8f8f8;border:1px solid #ccc;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} .loading-shorturl{display:none} .shorturl a.url:hover{color:#555;background:#fafafa;border:1px solid #999} .shorturl a.url:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)} .clear{clear:both} </style> </b:if>

2. Salin kode HTML dibawah  ini ,cari kode <b:includable id='post' var='post'> kemudia scroll layar ke bawah dan temukan kode dibawah ini atau mirip seperti di bawah ini.
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
     </div>
Simpan kode dibawah ini tepat dibawah kode diatas (dibawah kode </div>)

<b:if cond='data:blog.pageType == &quot;item&quot;'> <span class='shorturl'> Share this with short URL: <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='Click to get short URL'>Get Short URL</a></span><span class='loading-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>

3. Silahkan simpan kode javascript dibawah ini di atas kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'> <script type='text/javascript'> //<![CDATA[ function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://googledrive.com/host/0Bz4YdwRI3rnCTFdxX29TaU9WTlU/shortenurl.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload; //]]> </script> </b:if>

Kode Javascript diatas digunakan untuk mendefer kode javascript URL Shortener dan dihosting di google drive saya. Untuk aman silahkan hosting di Google Drive anda atau jika anda sudah membuat javascript defer untuk halaman posting blog anda silahkankan shorteurl.js satukan dengan js lainnya di Hosting blog anda.

Demo? Buktikan sendiri..

Selesai dan semoga Cara Membuat Google URL Shortener Untuk Share Artikel berhasil...
Source : KompiAjaib