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:

Blogger

• Cara Menghapus Komentar Spam Secara Otomatis
• Cara Membuat Blog Terindeks Google dengan Cepat
• 5 Kesalahan yang Dilakukan Oleh Blogger Pemula
• Mengembalikan Blog yang Sudah Dihapus, Bisakah ?
• Apa Itu Niche Blogging ?
• Daftar 60+ Forum Do-Follow Ber-PageRank Tinggi 2014
• Cara Menghindari Blog Dihapus Oleh Google
• Cara Memilih Nama Blog & Situs yang Ramah SEO
• Cara Mengembalikan Mood Blogging
• Mengapa Subscriber Feedburner Menjadi 0 ?
• 7 Tips SEO untuk Blogger
• 10 Tips Mantap Untuk Meningkatkan Trafik Organik
• 7 Trik Membuat Artikel Lama Menjadi Populer
• 7 Cara Mendapat Pengunjung Dengan Mudah
• Tutorial Blog dan SEO Terkena Malware ?
• Bagaimana Mengefektifkan Backlink Dalam SEO
• 8 Tips Membuat Loading Blog Lebih Cepat
• Cara Membuat Kotak Fanpage Facebook Hitam Putih
• Optimasi Gambar Untuk Dapatkan Pengunjung
• Cara Menghindari SEO yang Berlebihan
• 8 Tips Untuk Seorang Blogger Pemula
• Cara Mendapatkan Google Sitelink Dengan Cepat
• Cara Membuat dan Tips Pengaturan Meta Tag
• Cara Meningkatkan Ranking Alexa Dengan Cepat
• Cara Mengklaim Situs di Alexa

Social Sharing

• 5 Widget yang Wajib Dimiliki Oleh Blogger
• Cara Membuat Blog Terindeks Google dengan Cepat
• Cara Membuat Kotak Fanpage Facebook Hitam Putih
• Cara Membuat Widget Subcription + Social Sharing + Facebook Like Box di Bawah Postingan
• Menambahkan Widget Social Share Melayang Keluar Tiba-Tiba
• Cara Membuat Widget Social Sharing Berputar di Bawah Postingan
• Cara Menambahkan Floating Social Bookmark
• Cara Membuat Scrolling Sticky Bar Lengkap Untuk Blogger
• Cara Membuat Twitter Box Untuk Blogger
• Cara Membuat 6 Animasi Twitter Melayang Untuk Blogger
• Menambahkan WIdget Sosial Bookmark dari Shareholic
• Menambahkan Widget Sosial Bookmark + Kotak Pencarian Di Blogger
• Cara Menaruh Facebook Like Box Secara Tiba-Tiba
• Cara Memasang Widget Sosial Bookmark Melayang Versi AddThis.com
• Menaruh Kotak Fanpage Facebook di Blogger - V3
• Menaruh Widget Sosial Bookmark di Side Bar
• Menambahkan Fitur "Like" Facebook di Kotak Komentar Blogger
• Cara Menambahkan Widget Sosial Bookmark Berbentuk Segitiga
• Menambahkan Facebook Recommendations Bar kedalam Blogger
• Menambahkan Widget Icon Sprite Media Sosial di Blog
• Menaruh Widget Flipper Sharing Untuk Blogger
• Menambahkan Widget Touch Me di Blogger
• Membuat Widget Sassy Social Bookmark di Blogger
• Membuat Scroll Jquery Sosial Bookmark Untuk Blog
• Menaruh Widget Eksklusif Sosial Bookmarking

Posted in: Blogger,Social Sharing