Cara Otomatis Menghasilkan URL Pendek di Blogger dengan Bit.ly

Cara Otomatis Menghasilkan URL Pendek di Blogger dengan Bit.ly

Cara Otomatis Menghasilkan URL Pendek di Blogger dengan Bit.ly

Cara otomatis menghasilkan url pendek di Blogger dengan menggunakan bit.ly. Pada artikel kali ini saya akan membagikan sebuah trik membuat url pendek atau url singkat yang secara otomatis akan di hasilkan di halaman postingan pada blog sobat.

Namun sebelum itu ada baiknya kita mengenal atau tahu terlebih dahulu apa itu url pendek dan juga bitly itu sendiri, secara umum url pendek atau penyingkatan url adalah suatu teknik yang membuat suatu laman situs dapat diakses dengan menggunakan suatu url yang sangat pendek selain alamat aslinya dengan tujuannya antara lain adalah untuk menghemat ruang, merahasiakan url, membuat kejutan buat teman kita dan lain-lain, dan biasanya sering digunakan pada media sosial seperti Twitter yang memiliki keterbatasan jumlah huruf yang bisa dikirim.

Adapun apa itu Bit.ly? adalah sebuah layanan online terkenal yang menyediakan alat untuk mempersingkat url milik kita sehingga bisa dibagikan kepada semua orang yang kita kehendaki, url yang dihasilkan biasanya akan nampak seperti ini http://bit.ly/1UJ3Rhy

Cara Otomatis Menghasilkan URL Pendek di Blogger dengan Bit.ly
Cara Otomatis Menghasilkan URL Pendek di Blogger dengan Bit.ly

Itulah sedikit penjelasan singkat dari saya mengenai url pendek dan bit.ly. Berikutnya adalah bagaimana cara menginstallnya di blog milik kita dan secara otomatis akan menghasilkan url pendek pada setiap laman artikel yang kita postingkan sehingga kita tidak perlu repot-repot lagi menuju ke halaman bit.ly untuk membuat url singkat ini.

Dibawah ini saya sudah buatkan langkah-langkah memasang widget bit.ly yang dapat menghasilkan url pendek secara otomatis di blog milik anda setiap anda membuat postingan, WOW kerenkan!.

Note: Link pendek ini akan tampil secara otomatis dibawah setiap postingan pada blog anda !

Langkah-langkah Menghasilkan URL Pendek di Blogger dengan Bit.ly secara Otomatis :

Langkah-1 : Seperti biasanya masuk ke Dasboard Blogger milik sobat pilih Template kemudian klik edit HTML lalu masukan CSS berikut sebelum </head>
CSS:
<style type='text/css'>
/* Cabon Css Start */
#ShortArea {
float: left;
background: #f5f5f5;
padding-bottom: 12px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
padding-top: 12px;
width: 100%;
}
#ShortCabon {
float: left;
padding-right:13px;
padding-top:5px;
text-transform:uppercase;
font-weight:bold;
}
.areaCabon {
text-align:center;
font-size: 11px;
width:150px;
height:25px;
margin: 4px;
border: 1px dashed #fff;
border-radius: 4px;
background: #3b5998;
color: #ffffff;
}

/* Responsive Style */
@media only screen and (max-width:480px){
#ShortCabon,.areaCabon {margin:0 auto;}  
}
@media only screen and (max-width:320px) {
#ShortCabon,.areaCabon {margin:0 auto;}
}
</style>

Langkah-2 :Pastikan sobat menemukan kode  <div class='post-footer'> dan letakan kode HTML dibawah ini sebelum atau sesudah kode tersebut, sesuaikanlah dengan keadaan tampilam template blogger sobat.
HTML:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='ShortenBitlyUrl'>
<form id='ShortArea'/>
</div>
</b:if>

Langkah-3 :Letakan kode Javascript dibawah ini tepat sebelum kode </body>
Javascript:
<script src='http://bit.ly/javascript-api.js?version=latest&amp;login=unbfacts&amp;apiKey=R_cb436480530becb8bb6e628aa34520f2' type='text/javascript'/>
<script type='text/javascript'>
BitlyClient.addPageLoadEvent(function(){
BitlyCB.myShortenLINK = function(data) {
var result;
for (var r in data.results) {
result = data.results[r];
result[&#39;longUrl&#39;] = r;
break;
}
document.getElementById(&quot;ShortArea&quot;).innerHTML = &quot;<div id='ShortCabon'>Bagikan dengan url pendek berikut: </div> &lt;input type=&#39;text&#39;  class=&#39;areaCabon&#39; value=&#39;&quot; + result[&#39;shortUrl&#39;] + &quot;&#39; name=&#39;bitlyurl&#39;/&gt;&quot;;}
BitlyClient.shorten(document.location, &#39;BitlyCB.myShortenLINK&#39;);
});
</script>

Langkah-4 :Simpan Template sobat dan lihat hasilnya.

Cara Otomatis Menghasilkan URL Pendek di Blogger dengan Bit.ly
Cara Otomatis Menghasilkan URL Pendek di Blogger dengan Bit.ly



Pada postingan yang akan datang saya akan membagikan Template Blogger Safelink Generator secara gratis untuk sobat blog antoncabon dan untuk melihat penampakan demo template tersebut dapat dilihat disini:


Demikianlah Tutorial mengenai Cara Otomatis Menghasilkan URL Pendek di Blogger dengan Bit.ly, semoga ada manfaatnya ya, dan saya sangat senang jika sobat dapat berkomentar atau memberi masukan mengenai tutorial diatas.

Jika ada sobat Blogger yang ingin berdiskusi seputar Postingan ini atau Postingan tentang Dunia Kebun Sawit, silahkan tinggalkan komentar sobat di kolom komentar blog ini. saya akan sangat senang meresponnya, terimakasih salam Antoncabon.

"Hendaknya kesibukan kita lebih berfokus pada penyempurnaan penunaian kewajiban-kewajiban kita kepada Tuhan, sebab Dia, Tuhan yang sekaligus Pemberi Rejeki pasti akan membalas penunaian kewajiban tersebut dengan anugrah-Nya yang akan mencukupi kebutuhan kita." my fav words!

DONASI VIA FASAPAY



Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Suka dengan postingan ini? Silahkan share postingan ini dengan cara klik Tombol SHARE THIS di atas, Terimakasih.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Anton Cabon? Keep us running by whitelisting Antoncabon in your ad blocker.

This is how to whitelisting Antoncabon in your ad blocker.

Thank you!

×
×
×