Tutorial Buat Short URL Otomatis di Blogger


Assalamualaikum... kabar gembira untuk kamu pengunjung blog saya ini, walaupun artikelnya nggak pernah dibaca. Ya, bisa dimaklumi sih nggak ada yang menarik di setiap tulisan saya, yang ada malah bikin bingung. Iya kan? #aha

Kenapa saya bilang kabar gembira? karena untuk kali pertama di blog ini saya akan buat artikel yang (mungkin) bermanfaat buat kamu, terutama untuk para teman-teman blogger. Kali ini saya akan (mencoba) memberikan tutorial seputar blog. Ya, walaupun saya bukan ahlinya dalam urusan blogging.

Sepertinya nggak usah ditulis lagi tutorial tentang apa, dari judul kan sudah jelas, tinggal dibaca lagi kalau belum ngerti. Lalu manfaat dari Short URL apaan?
  • Biar (sedikit) keren ada short URL, otomatis pula
  • Hemat karakter pas nge-share di MedSos
Ya, kira-kira itulah 2 manfaat dari short URL yang akan kita buat. Situs-situs besar aja sudah pake short link, masa kamu yang masih 'kecil' nggak pake? #eh

Oh iya, contoh seperti apa hasilnya nanti bisa dilihat di blog saya ini, tepatnya di bawah Author Box. Oke langsung saja bagi yang pengen pasang shor url seperti punya saya dibawah, silahkan disimak baik-baik, bagi yang nggak minat silahkan bookmark halaman ini, siapa tahu suatu saat nanti kepengen pasang. #hahay

Tutorial Buat Short URL Otomatis di Blogger

Tutorial Buat Short URL Otomatis di Blogger:

  • Pastinya harus punya blog, dan harus Blogger. Selain blogger saya belum pernah coba. Selanjutnya masuk ke mode edit template
  • Daftar atau buat akun di bitly.com. Cara daftar bitly.com sepertinya nggak perlu saya buatkan tutorial bukan?
  • Sudah buat akun bitly? selanjutnya buka link ini https://bitly.com/a/your_api_key
  • Di halaman itu ada Bitly Username dan Bitly API Key

bitly api key
  • Copy script berikut ini dan paste di atas ]]></b:skin>

form#shorturl {
color:#fff;
font-size:12px
z-index:99;
margin:5px;
}
#shorturl input {
color:#fff;
border:1px solid #FF6666;
width:300px;
font-weight:bold;
background-color:#FF6666  ;
}
#short-inner{
width:510;
padding:0px;
background-color:#FF6666  ;
z-index:-1;
margin-top:1px;
margin-bottom:1px;
}

  • Copy dan paste script berikut di atas </head>

<script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=BITLY USERNAME&amp;apiKey=BITLY API KEY' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
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[&#39;longUrl&#39;] = r;
break;
}
document.getElementById(&quot;shorturl&quot;).innerHTML = &quot;Short link untuk artikel ini adalah: &lt;input type=&#39;text&#39; value=&#39;&quot; + result[&#39;shortUrl&#39;] + &quot;&#39; name=&#39;bitlyurl&#39;/&gt;&quot;;
}
BitlyClient.shorten(document.location, &#39;BitlyCB.myShortenCallback&#39;);
});
</script>

Ubah BITLY USERNAME dan BITLY API KEY dengan punya kamu tadi.
  • Selanjutnya copy script berikut ini dan paste dimanapun Shor URL-nya akan ditempatkan. Contohnya di blog ini ditempatkan di bawah Author Box.

<div id='short-inner'>
<form id='shorturl'/>
</div>

  • Oke, sekarang simpat template yang sudah diedit tadi.
Sekarang lihat apakah yang kamu buat tadi berhasil atau tidak. Untuk mengubah warna silahkan utak-atik kode CSS diatas. Silahkan berkreasi sendiri.

Oke, sudah sampai di sini aja tutorial kali ini, sampai berjumpa di tutorial dan artikel (tidak bermanfaat) selanjutnya. Babay....!
Labels: