Cara Pasang Short Url di Postingan Blog

Asep Koswara Published: 12.01

Share on Facebook Share on Google+

Hallo semuanya.. Kali ini saya mau share tutorial sekaligus script yang bisa sobat gunakan untuk membuat short url di setiap postingan blog. Dalam kasus ini, saya hanya akan memberikan tutorial untuk jenis template blogger saja. Untuk wordpress, sepertinya tidak bisa digunakan atau kalaupun ada, anda bisa explore sendiri atau mungkin juga bisa temukan dari beberapa sumber lain.

Apa itu 'Short Url'?

Bagi sebagian diantara sobat mungkin ada yang belum diketahui dengan jelas apa itu 'short url', padahal ini sangat umum sekali. Nah short url ini adalah salah satu link pendek yang digunakan untuk memperpendek link panjang anda. Saat di share, tulisan link kita yang panjang seperti http://www.penulis*info/2016/12/kumpulan-contoh-kata-kata-promosi-ampuh.html, tentu akan keliatan panjang banget.. Nah maka dari itu ada solusinya diperpendek dengan short url, seperti menggunakan go.dl, bit.ly, tiyurl, dan lainnya.

Masih Pake Cara Manual?

Nah selama ini kebanyakan dari kita mungkin sering menggunakan aplikasi short url itu namun seringkali dilakukan secara manual. Biasanya kita bukan postingan artikelnya >> copy link url >>buka shorter url (bit.ly) >>copy disana >>generate >>hasil short url. Boleh sih masih menggunakan cara itu, tapi tentunya akan menyita waktu anda dan juga menyita waktu pengunjung anda yang mau share postingan anda tersebut.

Solusinya = Buat Short Url di Tiap Postingan..

Nah maka dari itu, salah satu solusinya adalah dengan memasang short url di tiap postingan. Dalam hal ini, kita menyediakan short url khusus dalam postingan yang kita buat. Nah bagaimana caranya? Apakah satu per satu tiap postingan dibuat? Jelas tidak, sebaiknya anda gunakan satu kali script yang kemudian bisa menggenerate untuk short url semua postingan yang mau dibuatkan short urlnya. Hal itu bebas sesuai dengan kemauan pihak visitor blog anda saja.

Bagaimana Caranya?

Nah langsung saja yuk kita bahas beberapa cara yang bisa anda lakukan untuk memasang script tersebut. Berikut ini adalah beberapa langkah yang bisa anda lakukan dan ikuti dengan baik dan seksama:

Baca Juga

1. Buka Blogger

2. Edit Template

3. Simpan kode CSS berikut tepat diatas kode </head>

.shorturl{font-size:100%;font-weight:bold;color:#666!important} .shorturl a.url{float:right;text-decoration:none!important;color:#fff!important;display:inline-block;margin:0 0 0 5px;border-radius:100px;background:#008c5f;border:1px solid #ccc;box-shadow:0 1px 0 rgba(0,0,0,.08);text-shadow:none;line-height:none;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)}

4. Simpan kode JavaScript berikut ini diatas </body>

<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>

5. Simpan kode HTML Berikut dimana saja anda mau menempatkan generator short url tersebut, biasanya dalam awal postingan atau di bagian akhir postingan..

<span class='shorturl'><a class='url' expr:onclick='"shortenUrl(this, '" + data:post.url + "', 'googl');return false;"' 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> <br>

Nah itulah beberapa informasi sekaligus tutorial tentang cara pasang short artikel di setiap postingan yang anda post. Selebihnya anda bisa edit dan explore sendiri agar tampilannya bisa lebih keren dan sesuai dengan apa yang anda inginkan. Kalau anda ingin lihat contohnya, anda bisa lihat di post blog ini atau di demo berikut:

DEMO