Tuesday, February 21, 2012

Menambahkan Widget ShortURL Otomatis di Setiap Postingan


Duh judulnya bikin pusing, jangan2 tutornya juga lagi. hehehe tenag saja sob itu cuma judulnya doang yang bikin muntah tapi tetep tutornya mudah dimengerti kok hehe. oke pada tutor kali ini saya akan memberi tahu caranya membuat widget shortURL secara otomatis pada setiap postingan kita. kalian tahu kan tentang shortener URL ? kalau tidak tahu bisa dicari do google hehe :p. hal yang harus pertama kalian lakukan adalah membuat akun bit.ly terlebih dahulu. bit.ly adalah semacam client untuk penyingkat URL yang gratis layaknya goo.gl. berikut langkah2nya :

1. Membuat akun bit.ly terlebih dahulu bisa kalian klik disini

2. Jika sudah, Masuk ke akun Blogger kalian seperti biasa.

3. Klik Rancangan --> Edit HTML --> Centang Expand Template Widget.

4. Cari kode ini </Head> gunakan CTRL+F untuk mempermudah pencarian dan letakan kode dibawah ini 

<script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&amp;login=USERNAME BIT.LY KAMU&amp;apiKey=APIKEY BIT.LY KAMU"></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>



5. Ganti Tulisan USERNAME dengan USERNAME BIT.LY kamu dan Ganti APIKEY dengan APIKEY BIT.LY kamu. contohnya : login=hzndi&apiKey=R_9999999999999999999999999999999. Klik Settings pada akun Bit.ly kamu, maka akan terdapat APIKEY-nya.

6. Cari kode ]]></b:skin> dan pastekan kode dibawah ini tepat diatas kode ]]></b:skin>




form#shorturl {

color:#666;

font-size:11px

}#shorturl input {
color:#999;
border:1px inset #CDCDCD;
padding:1px 5px;
}



7. Cari kode ini,


<div class='post-footer-line post-footer-line-3'>


<div>

Copas kode dibawah ini dan letakan ditengah2 kode diatas.

<b:if cond='data:blog.pageType == "item"'><form id='shorturl'/></b:if>


Sehingga tampilannya seperti ini


<div class='post-footer-line post-footer-line-3'>


<b:if cond='data:blog.pageType == "item"'><form id='shorturl'/></b:if>

<div>

Widget ShortURL diatas akan terletak dibawah postingan, namun jika ingin letaknya diatas seperti punya saya.cari kode ini

<div class='post-header-line-1'/>

dan taruh kode yang di copas tadi sehingga hasilnya seperti ini.

<div class='post-header-line-1'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'><form id='shorturl'/></b:if>

8. Simpan Template kamu dan lihat hasilnya :D mudah2an bermanfaat yah

Postingan Terkait:

15 comments:

  1. boleh juga ni dicoba sob,,tapi nambah beban load g ya sob

    ReplyDelete
  2. ichwan : engga kok sob, buktinya blog saya juga ga terlalu berat :)

    ReplyDelete
  3. boleh juga tuch
    moga berhasil Sob

    ReplyDelete
  4. ropink : sudah ane coba n berhasil :D

    ReplyDelete
  5. hadddooohhhh..!

    pengen sih..
    tapi kok repot banget yaa..?

    ReplyDelete
  6. siipp dah, tapi bingung :D
    bkin lemot ngga >?

    ReplyDelete
  7. oomguru : engga ribet kok sob :)
    eko : bingung kenapa sob ? ga dong, ini bukan widget yang berat sob :D

    ReplyDelete
  8. wah boleh juga nih untuk membuat random biar yang lama bisa keluar lagi

    bermanfaat sobat


    oh iya. gak apa apa, nanti aku cari lagi yang korel itu yaing ya

    siiip keep post

    ReplyDelete
  9. R-82 : heheh ente salah komen postingan gan, yang ini mah untuk membuat shortURL secara otomatis hehe. oke sob2 sama2 nanti saya akan cari pengganti corel draw tapi versi freewarenya hehe

    ReplyDelete
  10. Random post..?artikel lama keluar lagi dong bang..?
    ijin praktek ya..?

    nice artikel...:D

    ReplyDelete
    Replies
    1. loh kok random post gan ? salah komen postingan hehehe tapi gpp deh :)

      Delete
  11. asiiikkk...ada tips trik terbaru nih dari abang... saya pemula harus bookmark nih tips abang...
    makasih ya bang

    ReplyDelete
    Replies
    1. hehe merendah saja nih si abang, saya juga pemula bang, mari kita belajar sama2 :)

      Delete
  12. sip gan dah nongol, di atas postingan... tengs berat sob

    ReplyDelete

Komentarmu menunjukan kecerdasanmu, Kalau komentar cuma buat cari link buat apa ? :)

Twitter Delicious Facebook Digg Stumbleupon Favorites More