TUTORIAL Membuat Widget ShortURL Otomatis pada Setiap Postingan Blog .

Tutorial kali ini ane akan menjelaskan bagaimana untuk secara otomatis menghasilkan URL pendek (menggunakan bit.ly API) untuk setiap posting di Blogger, dan menampilkan URL pendek ini dalam kotak di bagian bawah setiap posting.
Dengan menggunakan API bit.ly, standar layanan Twitter, kita dapat membuat dan mempublikasikan URL pendek untuk setiap entri di Blogger Anda.



Berikut ane jelasin tahapan2nyaa :

• Log in ke Blog Anda
• Klik Rancangan
• Klik Edit HTML conteng expand template widget
• Masukkan kode berikut sebelum kode </head> dan Simpan Template
  *waspadalah... amankan Template anda jika ada keraguan dengan cara save ke directory pribadi anda
  <script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&amp;login=USERNAMEANDA&amp;apiKey=APIKEYANDA"></script>

<script type="text/javascript" charset="utf-8">

BitlyClient.addPageLoadEvent(function(){

BitlyCB.myShortenCallback = function(data) {

// this is how to get a result of shortening a single url

var result;

for (var r in data.results) {

result = data.results[r];

result['longUrl'] = r;

break;

}

document.getElementById("shorturl").innerHTML = "Share this link: &lt;input type='text' value='" + result['shortUrl'] + "' name='bitlyurl'/&gt;";

}

BitlyClient.shorten(document.location, 'BitlyCB.myShortenCallback');

});

</script>*Ganti USERNAME anda dengan username yang anda pakai di bit.ly sedangkan untuk APIKEY ganti dengan Kode APIKEY anda yang dapat di lihat pada akun bit.ly anda.

• Langkah Pilihan: Anda jg dapat merubah tampilan dari pada kotak ShortURL ini dengan memasukkan kode berikut sebelum ]]></b:skin>

  form#shorturl {
  
  color:#666;
  
  font-size:11px
  
  }#shorturl input {
  color:#999;
  border:1px inset #CDCDCD;
  padding:1px 5px;
  }

• Langkah terakhir: cari kode berikut (gunakan CTR+F untuk mempermudah pencarian)<div class='post-footer-line post-footer-line-3'>

</div>

lalu masukkaan kode berikut diantaranya :<b:if cond='data:blog.pageType == "item"'><form id='shorturl'/></b:if>

contohnya menjadi seperti ini:<div class='post-footer-line post-footer-line-3'>
<b:if cond='data:blog.pageType == "item"'><form id='shorturl'/></b:if>
</div>

• Dan akhirnya selesai jg perjalanan panjang kitaa, eeh jangan lupa klik Save Template

*contoh nya anda dapat lihat dibawah postingan ini .

selamat berkarya :D

Artikel Terkait