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:

Posted in: Blogger,Social Sharing