Cara Membuat Google URL Shortener Untuk Share Artikel

Pasti nya sobat pernah atau memang sering nge'Share artikel yang sobat punya melalui Aplikasi Goo.gl URL Shortener. Google URL Shortener merupakan pemendek URL yang di sediakan gratis oleh pihak google. Namun terkadang ribet juga bila kita harus mengCopy artikel kita terlebih dahulu lalu paste pada aplikasi Goo.gl Url Shortener tersebut.

Kenapa sobat tidak buat sendiri saja pada blog kalian? Secara akan mempermudah buat sobat untuk share artikel yang kalian punya. Dan disini pada kesempatan kali ini saya ingin berbagi Cara Membuat Google URL Shortener Untuk Share Artikel yang patut kalian coba.

Cara nya pun juga sangat mudah, disini kita tidak menggunakan token api yang biasa banyak yang sudah share dengan metode menggunakan token. Dan bagi sobat yang ingin mencoba nya, silahkan kalian ikuti langkah - langkah nya sebagai berikut.

Cara Membuat Google URL Shortener Untuk Share Artikel

Silahkan sobat copy kode CSS di bawah ini, lalu letakan kode tersebut di atas kode </style> pada template kalian.

.sharethis a.url{text-decoration:none!important;display:inline-block;margin-top:5px;font-size:14px;font-weight:500;border-radius:3px;color:#fff!important;background:#555;border:1px solid #444;line-height:1;padding:3px 8px;transition:all .4s ease-in-out}
#share-menu,.loading-shorturl{display:none}
.sharethis a.url:hover,.sharethis a.url:active{background:#333;border:1px solid #222;}

Lalu kalian copy lagi kode di bawah ini, dan letakan kode tersebut di atas kode </body> pada template kalian.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://rawgit.com/MbenkDroid/filejs/master/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>

Untuk Shortenurl.js pada https://rawgit.com/MbenkDroid/filejs/master/shortenurl.js yang saya tandai kalian bisa menyimpan nya sendiri di akun Github sobat agar tidak terlalu berat bila menggunakan JS dari saya. Bila kalian belum tau bagaimana cara nya upload file JS di Github kalian bisa bacar artikel Cara Hosting atau Upload File JavaScript HTML CSS di GitHub Melalui HP

Dan yang terakhir untuk kode HTML pemanggil nya silahkan kalian copy kode di bawah ini lalu letakan kode tersebut di bawah judul maupun di akhir artikel. Kode ini bebas bisa kalian letakan di mana saja tetapi harus tetap berada pada bagian artikel.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span class='shorturls sharethis'>
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' height='11' src='data:image/gif;base64,R0lGODlhEAALAPQAAP///wAAANra2tDQ0Orq6gYGBgAAAC4uLoKCgmBgYLq6uiIiIkpKSoqKimRkZL6+viYmJgQEBE5OTubm5tjY2PT09Dg4ONzc3PLy8ra2tqCgoMrKyu7u7gAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCwAAACwAAAAAEAALAAAFLSAgjmRpnqSgCuLKAq5AEIM4zDVw03ve27ifDgfkEYe04kDIDC5zrtYKRa2WQgAh+QQJCwAAACwAAAAAEAALAAAFJGBhGAVgnqhpHIeRvsDawqns0qeN5+y967tYLyicBYE7EYkYAgAh+QQJCwAAACwAAAAAEAALAAAFNiAgjothLOOIJAkiGgxjpGKiKMkbz7SN6zIawJcDwIK9W/HISxGBzdHTuBNOmcJVCyoUlk7CEAAh+QQJCwAAACwAAAAAEAALAAAFNSAgjqQIRRFUAo3jNGIkSdHqPI8Tz3V55zuaDacDyIQ+YrBH+hWPzJFzOQQaeavWi7oqnVIhACH5BAkLAAAALAAAAAAQAAsAAAUyICCOZGme1rJY5kRRk7hI0mJSVUXJtF3iOl7tltsBZsNfUegjAY3I5sgFY55KqdX1GgIAIfkECQsAAAAsAAAAABAACwAABTcgII5kaZ4kcV2EqLJipmnZhWGXaOOitm2aXQ4g7P2Ct2ER4AMul00kj5g0Al8tADY2y6C+4FIIACH5BAkLAAAALAAAAAAQAAsAAAUvICCOZGme5ERRk6iy7qpyHCVStA3gNa/7txxwlwv2isSacYUc+l4tADQGQ1mvpBAAIfkECQsAAAAsAAAAABAACwAABS8gII5kaZ7kRFGTqLLuqnIcJVK0DeA1r/u3HHCXC/aKxJpxhRz6Xi0ANAZDWa+kEAA7AAAAAAAAAAAA' title='Loading' width='16'/></span>
</b:if>

Untuk contoh nya seperti apa, sobat bisa lihat dibawah judul artikel ini (kalo belum berubah). Karena saya pun juga memasang nya. Bila dari segi warna atau tampilan kalian bisa edit sendiri cukup pada kode CSS di atas.

Mungkin itu saja yang bisa saya bagikan pada artikel kali ini. Semoga bisa bermanfaat buat sobat yang sedang mencari cara membuat google url shortener untuk share artikel, cara membuat google url shortener tanpa token. Selamat mencoba!

Share this post