Membuat Google Url Shortener Untuk Share Artikel

Tidak ada salahnya jikalau kita menyediakan banyak pilihan kepada pengunjung blog untuk men-sharing atau membagikan artikel blog baik melalui sosial media maupun pesan pribadi antar pengguna. Sudah umum pada setiap blog telah disediakan tombol membuatkan untuk sosial media menyerupai facebook, google plus, twitter, dan lainnya. Selain tombol membuatkan sosial media, kita juga dapat menyediakan short url untuk memudahkan membagikan url blog kita baik itu di sosial media maupun pesan pribadi antar pengguna.

Salah satu penyedia url shortener yakni Google URL Shortener yang kemungkinan usia layanannya akan panjang alasannya yakni ini memang kepunyaan Google sehingga kemungkinan url rusak tidak akan terjadi (jika Google tidak mematikan layanannya menyerupai Google Code hehehe).

Nah aku menemukan cara menciptakan URL shortener untuk blogger yang gampang dalam pembuatannya. Sebenarnya aba-aba aslinya menampilkan 3 buah URL Shortener, namun di sini aku hanya menampilkan satu buah URL Shortener yaitu Google URL Shortener.

Untuk demo dapat dilihat di bawah postingan ini (jika aku belum menggantinya hehehe...) atau di link ini (silahkan lihat di bawah postingan).

Dan untuk javascript URL Shortener ini ternyata dapat di-defer sehingga tidak akan mengganggu loading blog.

Nah bagi yang ingin mencobanya silahkan copy kode-kode di bawah ini dan ikuti langkah-langkahnya.

1. Langkah Pertama
Silahkan copy aba-aba CSS di bawah ini dan simpan di atas aba-aba </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. Langkah Kedua
Silahkan copy aba-aba HTML di bawah ini dan simpan di bawah postingan blog. Silahkan cari aba-aba ini <b:includable id='post' var='post'> kemudian gulung layar ke bawah dan temukan aba-aba di bawah ini atau yang menyerupai mirip di bawah ini.

       <data:post.body/>
       <div style='clear: both;'/> <!-- clear for photos floats -->
     </div>

Silahkan simpan aba-aba di bawah ini di bawah aba-aba di atas (di bawah aba-aba </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. Langkah Ketiga
Silahkan simpan aba-aba javasript di bawah ini di atas aba-aba </body> atau di atas aba-aba yang menyerupai ini &lt;!--</body>--&gt;&lt;/body&gt;

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

Kode javascript di atas yakni aba-aba javascript untuk men-defer aba-aba javascript URL Shortener dan aku hosting di Google Drive milik saya. Untuk keamanan silahkan hosting di Google Drive Anda atau jikalau Anda sudah menciptakan javascript defer untuk halaman postingan blog Anda silahkan shortenurl.js satukan dengan js lainnya di hostingan blog Anda.

Selesai dan selamat mencoba.....

Saya menemukan kodenya di sini:
http://www.techprevue.com/automatic-google-goo-gl-url-shortener-for-blogger-blogs/


Sumber https://www.kompiajaib.com/

Share this post