Cara Otomatis Menyingkat URL Postingan Blogspot dengan URL Shortener Bit.ly

Previous Topic Next Topic
 
Posted by Soraya Soraya
      Options
Untuk blogger pengguna blogspot.com yang ingin menyingkat setiap URL postingan secara otomatis (Auto Generate Short URLs) menggunakan Bit.ly dan sekaligus otomatis menampilkan hasil penyingkatan URL di halaman postingan, bisa mencoba mengikuti tutorial blogspot berikut ini:

Contoh Halaman Dashboard Blogspot

Langkah Pertama,
Login ke halaman dashboard blogger anda dan pilih blog yang ingin anda pasang penyingkat url otomatis. Selanjutnya, buka menu:

Template >> Edit HTML >> dan cari kode ]]></b:skin>

Langkah Kedua,
Copy dan Paste Kode CSS  di bawah ini di atas kode ]]></b:skin>:
#shorturl {
float: left;
background: #F8F8F8;
padding-bottom: 10px;
border-top: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
padding-top: 10px;
width: 650px;
}
#shorternh2 {
float: left;
padding-left: 20px;
padding-right: 10px;
}
.textinpo {
float: left;
font-family: "verdana",helvetica,Tahoma,Arial,sans-serif;
font-size: 12px;
color: #666;
border: 1px solid #ccc;
border-radius: 3px;
background: #fff;
width: 215px;
padding: 0px!important;
padding-left: 10px!important;
height: 20px!important;
margin: -4px!important;
}
Langkah Ketiga,
Carilah kode: <div class='post-footer'>. Jika sudah ketemu, copy dan paste kode script penyingkat URL di bawah ini di atas kode tersebut.
<!-- Script Short URLs Gratis Reshared by bit.ly/ForumSoraya -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='shoternUrl'>
<form id='shorturl'/>
 <!-- short url widget script start -->
  <script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=unbfacts&amp;apiKey=R_cb436480530becb8bb6e628aa34520f2' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
BitlyClient.addPageLoadEvent(function(){
BitlyCB.myShortenCallback = function(data) {
// kode berikut ini otomatis akan menyingkat URL
var result;
for (var r in data.results) {
result = data.results[r];
result['longUrl'] = r;
break;
}
       document.getElementById(&quot;shorturl&quot;).innerHTML = &quot;<div id='shorternh2'>Share this link in your Status!</div> &lt;input type='text'  class='textinpo' value='&quot; + result['shortUrl'] + &quot;' name='bitlyurl'/&gt;&quot;;}
BitlyClient.shorten(document.location, 'BitlyCB.myShortenCallback');
});
</script></div>
    </b:if>
<!-- Script Short URLs Gratis Reshared by twit @SorayaForum -->
Langkah Keempat,
Uji coba hasil kerja anda, dengan membuka halaman postingan mana saja dari blogspot anda. Jika berhasil, maka anda akan melihat URL postingan anda secara otomatis telah disingkat dan ditampilkan di bawah postingan.

Catatan:
Sebaiknya, anda mengganti nomor apiKey=R_cb436480530becb8bb6e628aa34520f2 dengan apiKey bit.ly anda sendiri. Caranya: mendaftarlah atau login ke developer bit.ly (Anda bisa login otomatis dengan menggunakan akun twitter anda). Setelah login,  anda bisa mendapatkan nomor apiKey gratis.

Selamat mencoba, dan salam sukses
Anda Kesulitan Menerapkan Tutorial Auto Generate Short URLs in di Blogspot?
Login to vote