Lama kelamaan saya tertarik memasang URL Google Shortener di Blog saya sendiri, karena saya sering main di kompiajaib. Tapi ketika saya mencoba nya pada blog saya, ternyata script yang dibagikan mas adhy bentrok dengan script Defer Iframe Videos Youtube yang saya gunakan.
Dimana script tersebut jadi tidak berfungsi karena masalah window.onload = init; yang tersemat dalam kedua script tersebut, dimana kedua script tersebut tidak boleh terpisah, melainkan harus disatukan. Namun mas adhy memberikan alternatif lain dengan menggunakan Onload iframe dan akhirnya berhasil dan script tidak bentrok lagi.

Untuk sobat yang mungkin memliki masalah yang sama, atau sekedar ingin memasang Google URL Shortener ini di blog sobat, sobat bisa mencoba cara saya ini yang saya adaptasi dari blog kompiajaib. Namun, dengan penyesuaian script yang telah saya katakan tadi.

Memasang Google URL Shortener
Fungsi dari URL Shortener ini adalah untuk mempersingkat URL halaman blog kita yang biasanya panjang, menjadi lebih ringkas dan lebih ennak buat disebar luaskan. Yuk, langsung aja.

Pertama masuk ke mode Edit Template dan copy kode CSS dibawah ini tepat diatas kode </head>
 <style type='text/css'>
/*<![CDATA[*/
.shorten-box{font-size:100%;font-weight:bold;color:#666!important;margin:10px 0}
#output{display:inline-block;}
.shorten-text{display:inline-block;margin-right:5px;border:1px solid transparent;line-height:1;padding:5px 0;}
.output{display:inline-block;font-family:Consolas,Monaco,'Andale Mono',monospace;white-space:initial;word-spacing:normal;word-break:normal;hyphens:none;color:#000;cursor:pointer;background:#f8f8f8;border:1px solid #ccc;border-radius:3px;line-height:1;padding:5px 8px;margin:0;box-shadow: inset 0px 0px 1px rgba(0,0,0,.08);}
.output:focus,.output:active{outline:none}
.clear{clear:both}
/*]]>*/
</style>
Sebelum melangkah untuk langkah selanjutnya, sobat diharuskan membuat URL Shortener API key DISINI. Selanjutnya copy kode dibawah ini tepat diatas kode </body> dan perhatikan kode yang saya berikan tanda "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx".
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
(function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/client.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

function makeShort() {
    var longUrl = document.getElementById("longurl").value;
    var request = gapi.client.urlshortener.url.insert({
        'resource': {
            'longUrl': longUrl
        }
    });
    request.execute(function(response) {
        if (response.id != null) {
            str = "";
            str += "<div class='output' contenteditable='true' onClick='document.execCommand(&quot;selectAll&quot;,false,null)' title='Click and CTRL+C'>" + response.id + "</div>";
            document.getElementById("output").innerHTML = str;
        } else {
            alert("ERROR: creating short url \n" + response.error);
        }
    });
}

function load() {
    gapi.client.setApiKey("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"), gapi.client.load("urlshortener", "v1", function () {
        document.getElementById("output")
            .innerHTML = makeShort()
    });
    for (var t = document.getElementsByTagName("iframe"), e = 0; e < t.length; e++) t[e].getAttribute("data-src") && t[e].setAttribute("src", t[e].getAttribute("data-src"));
}
window.onload = load;
//]]>
</script>
</b:if>

Menempatkan Google URL Shortener
Setelah kedua kode tersebut sobat copy, silahkan ganti yang saya beri tanda tersebut dengan kode khusus yang sudah sobat buat tadi. Setelah samapi sini, sedikit lagi kita akan selesai. Selanjutnya sobat harus menentukan mau diletakkan dimana Google URL Shortener tersebut. Kalau saya akan diletakkan dibawah tombole share.

Atau minimal sobat letakkan dibawah postingan blog dengan mencari kode <b:includable id='post' var='post'> dan cobat cari dibagian bawahnya itu ada kode yang mirip seperti kode berikut
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

Dan simpan kode dibawah ini tepat dibawah kode tersebut atau </div>
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='shorten-box'>
<input expr:value='data:post.url' id='longurl' name='url' type='hidden'/>
<div class='shorten-text'>Share this with short URL:</div>
<div id='output'/>
<div class='clear'/>
  </div>
</b:if>
Selesai, silahkan simpan template sobat, dan lihat hasilnya. Cara ini lebih baik karena kita akan lebih simple untuk mendapatkan URL Singkat yang biasanya kita harus mengcopy URL aslinya dan Shorten URL di https://goo.gl/ Semoga bermanfaat dan tidak bntrok lagi dengan script lainnya yah..
Share this with short URL:
How to style text in Disqus comments:
  • 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