×Close

Notifications

Disqus Logo


Cara Membuat Google URL Shortener Untuk Share Postingan Blogger


Cara Membuat Google URL Shortener Untuk Share Postingan Blogger

Cara Membuat Google URL Shortener Untuk Share Postingan Blogger
Siapa saja yang ingin membagikan artikel blog baik melalui media sosial dan maupun pesan langsung antar pengguna.  Tombol berbagi untuk media sosial seperti facebook, google plus, twitter, dan maupun yang lainnya memang sudah umum pada setiap blog yang telah disediakan. Nah dan selain tombol berbagimedia sosial, kita juga dapat menyediakan sebuah short url untuk memudahkan pengeunjung/ pembaca membagikan url blog kita baik itu melalui media sosial dan maupun pesan langsung antar pengguna.

Bentuk dari salah satu penyedia url shortener yaitu Google URL Shortener yang kemungkinan usia layanannya akan panjang, karena ini memang kepunyaan Google sehingga kemungkinan untuk khawatiran mengenai kerusakan url tidak akan terjadi, karena google akan terus memperbaiki layanan mereka. ini terkecuali jika Google tidak mematikan layanannya seperti Google Code. 

Untuk demonya anda bisa scrool ke bawah postingan ini, letak nya di atas tombol share.

Bagi anda yang penasaran, tidak sabar lagi untuk ingin mencobanya maka silahkan anda ikuti penjelsan di bawah ini cara penerapannya.

Cara Pasang Google URL Shortener 

1.Pertama , pastikan anda sudah masuk di dasbhor anda sendiri
2. Anda masuk pada bagian editor template , caranya pilih Menu Template ==> Edit HTML.
3. Silahkan copy kode CSS di bawah ini dan simpan di atas kode </head> (cara cepat tekan CTRL+F)
<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>
4. Kemudian silahkan anda copy kode HTML di bawah ini dan simpan di bawah postingan blog milik anda. Dan cari kode ini <b:includable id='post' var='post'> Lalu anda scrool ke bawah dan cari sperti mirip kode di bawah ini.
<data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
5. Dan anda bisa simpan kode di bawah ini di bawah kode yang bewarna merah yaitu di bawah 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>
6. Nah Silahkan anda simpan kode javasript di bawah ini di atas kode </body> atau bisa juga di atas kode yang seperti 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>
7. Jika suadah anda klik save template.
Note: Untuk kode javascript di atas adalah kode javascript untuk men-defer kode javascript URL Shortener dan saya hosting di Google Drive milik saya. Untuk masalah keamanan silahkan anda bisa hosting di Google Drive Anda atau bisa juga jika Anda sudah membuat javascript defer untuk halaman postingan blog Anda silahkan shortenurl.js satukan dengan js lainnya di hostingan blog Anda.

Demikian penjelasan saya, selamat mencoba dan semoga berhasil.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas

Ketik dan Tekan Enter Di Bawah Ini