Cara Memasang Short Url Goo.gl di blogger

13 komentar
Asyik dapat ilmu baru nih, cara ini berkaitan langsung dengan maraknya penggunaan url pendek atau short url seperti layanan goo.gl - t.co - bit.ly - fb.me dan sebagainya. Kita tahu bahwa dengan url yang simple akan lebih mempermudah ketika dishare dimedia sosial ataupun memasang url diblog atau situs lain. Selain itu dari segi SEO bisa jadi dihitung sebagai backlink redirect dan jika boleh saya menyarankan sebaiknya pastikan status layanan short url tersebut 301 (permanent). Tapi untuk mencegah hal yang tidak diinginkan sebaiknya back-up dulu template kita.
contoh short url
Baik untuk langkah pertama pastikan anda memiliki kode API dari Google Developers Console untuk bisa mengakses kode API tersebut silakan langsung menuju ke https://cloud.google.com/console/project kemudian klik API Project lalu klik APIs & auth sehingga muncul project-project API dari google, setelah itu cari URL Shortener API dan pastikan statusnya ON untuk lebih jelas mengenai cara mendapatkan kode API bisa lihat di bersosial.com.
Jika sudah punya kode API bisa kita lanjutkan dengan membuka dashboard blogger dan langsung buka tab Template lalu Edit html, silakan pasang jquery library namun jika di template anda sudah memilikinya maka langsung saja ke bagian script kedua :
script pertama

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>

Silakan pasang script kedua seperti yang terlihat dibawah ini :

<!-- shorturl -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script src='//apis.google.com/js/client.js' type='text/javascript'/>
    <script type='text/javascript'>//<![CDATA[
      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 += "<pre><code>" + response.id + "</code></pre>";
                  document.getElementById("output").innerHTML = str;
              } else {
                  alert("ERROR: creating short url n" + response.error);
              }
          });
      }

      function load() {
          gapi.client.setApiKey('inikodeapayangkamupunyapastibeda');
          gapi.client.load('urlshortener', 'v1', function () {
              document.getElementById("output").innerHTML = "";
          });
      }
      window.onload = load; //]]>
    </script>
    </b:if>
<!-- end shorturl -->

pasangkan script kedua sebelum kode

</head>

Jika sudah silakan cari kode :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>

dan pastikan bukan bagian dari template mobile, silakan  pasang script ketiga tepat dibawah kode tersebut :

<br/><br/>
&lt;input class=&quot;btn btn-google btn&quot; type=&quot;hidden&quot; name=&quot;url&quot; value=&quot;<data:post.url/>&quot; id=&quot;longurl&quot; /&gt;
<input class='btn btn-google btn' onclick='makeShort(); this.style.visibility= &quot;hidden&quot;;' type='button' value='Create Shorten URLs'/>
<div id='output'>Loading...</div>

Dan jika sudah silakan save template anda dan lihat hasilnya, semoga sekarang anda sudah bisa mengetahui cara memasang short url goo.gl di blogger.

13 komentar:

  1. Ini dia yang saya cari. Bikin loading blog jadi berat ga?

    BalasHapus
    Balasan
    1. test saja blog ini, apa terasa berat ?

      Hapus
  2. emang keuntungannya apa mas jika pake short url tersebut?

    BalasHapus
    Balasan
    1. kalau misal mau menyisipkan link / url jadi gak terlalu panjang kan :D

      Hapus
  3. gan, ada video tutorial. msih binggung masang scriptnya

    BalasHapus
    Balasan
    1. belum ketemu /membuat video tutorial nya, bagian yang membinggungkan-nya dimana ?

      Hapus
  4. Iya ni gan....setelah saya cek speed dengan pegespeed google disitu tertera perbaikan dan suruh mengganti dengan apis.google.com/..... Lah yg saya bingung masang skripnya gan....
    http://ternakpertama.blogspot.com jika agan berkenan tolong dicekin gan nilai ane masi 54/100 dan masih byk yg perlubdiperbaiki tp bingung cara memperbaikinya...

    BalasHapus
    Balasan
    1. beda tujuan, maksud pagespeed disana yang menyuruh untuk mengganti dengan apis.google ialah supaya situs/blog nya bisa lebih cepat, nah jadi sebaiknya tanyakan langsung kepada pembuat templatenya :)

      Hapus
  5. kalo pake javascript ooglapis apa sama aja hasilnya om ?

    BalasHapus
  6. simpen dulu buat cadangan

    BalasHapus
  7. mantap , jadi lebih irit waktu buat dapetin url nya

    BalasHapus

Tanggapan dan sanggahan dari yang menyimak.

artikel populer